/* Cocuyo CSS bundle v1: generated by scripts/build-css.mjs. */
/* cocuyo-css: assets/css/idioma.css */
/* Un solo selector: compacto en la cabecera, con nombres completos en Preferencias. */
.cocuyo-idioma{position:relative;display:block;flex-shrink:0;min-height:44px;padding:0;border:1px solid #ffffff1a;border-radius:10px;background:#181b18;color:#e4e8e1;font:500 12px/1.2 var(--fuente,sans-serif)}
.cocuyo-idioma>summary{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 11px;list-style:none;border-radius:inherit;cursor:pointer;user-select:none;white-space:nowrap}
.cocuyo-idioma>summary::-webkit-details-marker{display:none}
.cocuyo-idioma svg{width:16px;height:16px;flex-shrink:0}
.cocuyo-idioma>summary .cocuyo-idioma-chevron{width:12px;height:12px;opacity:.65}
.cocuyo-idioma[open]>summary .cocuyo-idioma-chevron{transform:rotate(180deg)}
.cocuyo-idioma>summary:hover,.cocuyo-idioma[open]>summary{color:#fff;background:#ffffff0b}
.cocuyo-idioma>summary:focus-visible,.cocuyo-idioma-menu>button:focus-visible{outline:2px solid var(--verde-cocuyo,#b4f64b);outline-offset:3px}
.cocuyo-idioma-menu{position:absolute;z-index:100;right:0;top:calc(100% + 8px);min-width:172px;padding:5px;background:#191d19;border:1px solid #ffffff1c;border-radius:12px;box-shadow:0 12px 36px #0007;font:500 13px/1.3 var(--fuente,sans-serif);letter-spacing:normal}
.cocuyo-idioma:not([open])>.cocuyo-idioma-menu{display:none}
.cocuyo-idioma-menu>button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 12px;margin:0;color:#d9dfd5;border:0;border-radius:7px;background:transparent;font:inherit;text-align:left;cursor:pointer}
.cocuyo-idioma-menu>button:hover{background:#ffffff0b;color:#fff}
.cocuyo-idioma-menu>button[aria-checked="true"]{color:var(--verde-cocuyo,#b4f64b);background:#b4f64b0b}
.cocuyo-idioma-menu>button>svg{width:16px;height:16px;margin-inline-start:auto;visibility:hidden}
.cocuyo-idioma-menu>button>span{min-width:0;overflow-wrap:anywhere}
/* Veinte idiomas con bandera (dueño, 4-oct-2026): rejilla de dos columnas con desplazamiento propio. */
.cocuyo-idioma-menu{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:2px;max-width:calc(100vw - 16px);max-height:min(70vh,520px);overflow:auto;overscroll-behavior:contain}
.cocuyo-bandera{flex:none;width:24px;height:18px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px color-mix(in srgb,var(--blanco-luz,#fff) 14%,transparent)}
.cocuyo-idioma>summary>.cocuyo-bandera{width:20px;height:15px}
.cocuyo-idioma-menu>button[aria-checked="true"]>svg{visibility:visible}
.cocuyo-idioma-arriba>.cocuyo-idioma-menu{top:auto;bottom:calc(100% + 8px)}
.cocuyo-idioma-derecha>.cocuyo-idioma-menu{right:auto;left:0}
.cocuyo-idioma.cocuyo-idioma-compacto{border-color:transparent;background:transparent;color:#d6dcd1;font-size:11px;letter-spacing:.04em}
.cocuyo-idioma-compacto>summary{gap:6px;padding-inline:9px}
.cabecera>.cocuyo-idioma{margin-left:auto}
/* El menú de cuenta puede desplazar su contenido: las opciones quedan dentro. */
body.studio-workbench #accmenu .acc-language{align-items:flex-start}
body.studio-workbench #accmenu .acc-language>span{padding-top:14px}
body.studio-workbench #accmenu .acc-language .cocuyo-idioma{padding:0;min-height:44px;max-width:none}
body.studio-workbench #accmenu .acc-language .cocuyo-idioma-menu{position:static;min-width:166px;grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;margin:0 4px 4px;border:0;box-shadow:none;background:transparent}
@media(max-width:600px){.cocuyo-idioma-compacto>summary{width:44px;padding:0;gap:0}.cocuyo-idioma-compacto>summary [data-idioma-label],.cocuyo-idioma-compacto>summary .cocuyo-idioma-chevron{display:none}.cocuyo-idioma-compacto>summary>svg{width:17px;height:17px}.cocuyo-idioma-menu{grid-template-columns:repeat(2,minmax(0,1fr));width:min(340px,calc(100vw - 16px))}}
@media(prefers-reduced-motion:no-preference){.cocuyo-idioma>summary,.cocuyo-idioma-menu>button{transition:color .15s,background .15s}.cocuyo-idioma[open]>.cocuyo-idioma-menu{animation:cocuyo-language-in .12s ease-out}@keyframes cocuyo-language-in{from{opacity:0}to{opacity:1}}}
.apoyo-idiomas{display:flex;gap:4px;padding:4px;border:1px solid var(--negro-borde);border-radius:10px;margin-left:auto}
.apoyo-idiomas a{padding:8px;color:var(--gris-niebla);font:500 12px/1.2 sans-serif;text-decoration:none;border-radius:6px}
.apoyo-idiomas a[aria-current]{background:var(--negro-elevado);color:var(--blanco-luz)}
.apoyo-idiomas a:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:2px}
@media(max-width:480px){.apoyo-cabecera{gap:12px;flex-wrap:wrap}.apoyo-idiomas a{padding:6px}}


/* cocuyo-css: assets/css/estudio-derechos.css */
.derechos-imagen{box-sizing:border-box;width:min(500px,calc(100vw - 28px));max-height:calc(100dvh - 28px);margin:auto;padding:34px;border:1px solid var(--border2,#343434);border-radius:22px;background:var(--surface,#121212);color:var(--text,#f8fafc);font-family:var(--font,sans-serif);overflow:auto;box-shadow:0 24px 90px #0009}
.derechos-imagen::backdrop{background:#000b;backdrop-filter:blur(6px)}
.derechos-close{position:absolute;right:12px;top:10px;width:36px;height:36px;border:0;border-radius:50%;background:#ffffff08;color:inherit;font-size:24px;cursor:pointer}
.derechos-kicker{font-size:10px;letter-spacing:.13em;color:var(--studio-accent,#aff33e);margin:0 0 12px}
.derechos-imagen h2{font-size:27px;line-height:1.2;letter-spacing:-.7px;margin:0 0 13px;font-weight:600}
.derechos-imagen form>p:not(.derechos-kicker){font-size:13px;line-height:1.65;color:var(--muted2,#a8b0a9)}
.derechos-files{max-height:76px;overflow:auto;padding:10px 14px;margin:16px 0 22px;background:#ffffff04;border:1px solid var(--border,#262626);border-radius:10px;list-style:none;font-size:12px;line-height:1.8;color:var(--muted2,#a8b0a9)}
.derechos-files li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.derechos-check{display:flex;align-items:flex-start;gap:11px;font-size:13px;line-height:1.6;cursor:pointer}
.derechos-imagen input{accent-color:var(--studio-accent,#aff33e);width:17px;height:17px;flex:none;margin:3px 0 0}
.derechos-imagen [hidden]{display:none!important}
.derechos-note a{color:var(--text,#f8fafc);text-underline-offset:3px}
.derechos-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}
.derechos-actions button{min-height:44px;padding:11px 18px;border:1px solid var(--border2,#343434);border-radius:10px;background:none;color:inherit;font:550 13px var(--font,sans-serif);cursor:pointer}
.derechos-actions [type=submit]{background:var(--studio-accent,#aff33e);border-color:transparent;color:#14200b}
.derechos-actions [type=submit]:disabled{opacity:.4;cursor:default}
.derechos-imagen :is(input,button,a):focus-visible{outline:2px solid var(--studio-accent,#aff33e);outline-offset:3px}
@media(max-width:520px){.derechos-imagen{padding:30px 22px 22px}.derechos-actions{flex-wrap:wrap}.derechos-actions button{flex:1;padding-inline:12px}}


/* cocuyo-css: assets/css/acceso-modal.css */
/* ============================================================
   ACCESO COCUYO — ventana de acceso (también en el Estudio móvil) y
   formulario de entrar.html. Estilo Higgsfield (8-oct-2026): gris oscuro,
   tipografía fuerte (solo Geist), botones sobrios y la lima con moderación:
   solo en las O de COCUYO, el punto de la etiqueta, el foco, «Usar» y la
   casilla marcada. Valores literales en variables propias (--acx-*): no
   dependen de tokens.css, que crear.html no carga. El gris #737475 de
   Higgsfield (3,85:1) queda para lo desactivado; el texto secundario va en
   #898a8b (5,2:1 sobre #131517).
   ============================================================ */
.acceso-modal, .acceso-pagina, .acceso-legal, .acceso-marketing {
  --acx-fondo: #131517;
  --acx-lienzo: #0b0b0b;
  --acx-linea: rgba(255, 255, 255, .10);
  --acx-linea-suave: rgba(255, 255, 255, .08);
  --acx-linea-hover: rgba(255, 255, 255, .20);
  --acx-texto: #f7f7f8;
  --acx-texto-2: #898a8b;
  --acx-off: #737475;
  --acx-boton: #23262a;
  --acx-boton-hover: #2c2f33;
  --acx-boton-off: #292b2c;
  --acx-lima: #d1fe17;
  --acx-error: #f87171;
  --acx-curva: cubic-bezier(.4, 0, .2, 1);
  --acx-t: .2s;
  --acx-fuente: "Geist", Inter, "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Ventana ---------- */
html.acceso-modal-abierto { overflow: hidden; }
.acceso-modal { display: grid; grid-template-columns: minmax(0, 535px) minmax(440px, 1fr); grid-template-rows: minmax(0, 1fr); width: min(1120px, calc(100vw - 64px)); height: min(776px, calc(100vh - 64px)); height: min(776px, calc(100dvh - 64px)); max-width: none; max-height: none; margin: auto; padding: 12px; box-sizing: border-box; border: 1px solid rgba(217, 217, 217, .04); border-radius: 24px; background: var(--acx-fondo); color: var(--acx-texto); box-shadow: inset 0 0 32px rgba(0, 0, 0, .2); font-family: var(--acx-fuente); overflow: hidden; overscroll-behavior: contain; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.acceso-modal:not([open]) { display: none; }
.acceso-modal::backdrop { background: rgba(0, 0, 0, .8); }
.acceso-modal[open] { animation: acx-entrada var(--acx-t) var(--acx-curva); }
@keyframes acx-entrada { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
/* crear.html (y sus traducciones) carga esta hoja SIN tokens.css. */
.acceso-modal [hidden] { display: none !important; }
.acceso-modal *, .acceso-pagina .hero-entrar * { box-sizing: border-box; }
.acceso-modal button, .acceso-modal a, .acceso-modal input { -webkit-tap-highlight-color: transparent; }
.acceso-modal button { font-family: inherit; cursor: pointer; }
/* El formulario va primero en el DOM; el vídeo ocupa la primera columna. */
.acceso-modal-visual { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; border-radius: 12px; }
.acceso-modal-contenido { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 20px 76px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
/* margin-block:auto centra; si no cabe, empieza arriba y se desplaza. */
.acceso-modal-formulario { width: 100%; max-width: 383px; margin: auto; }
.acceso-modal-cerrar { position: absolute; z-index: 3; top: 15px; inset-inline-end: 15px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, .04); border-radius: 50%; background: rgba(255, 255, 255, .05); color: #fff; transition: background-color var(--acx-t) var(--acx-curva); }
.acceso-modal-cerrar:hover { background: rgba(255, 255, 255, .1); }
.acceso-modal :is(button, a, input[type="checkbox"]):focus-visible, .acceso-pagina :is(button, a, input[type="checkbox"], summary):focus-visible, .acceso-legal a:focus-visible { outline: 2px solid var(--acx-lima, #d1fe17); outline-offset: 2px; }

/* ---------- Visual de marca: un vídeo real con tres pestañas (compartido) ---------- */
.acceso-visual { position: relative; isolation: isolate; overflow: hidden; background: #000; color: #fff; font-family: var(--acx-fuente, sans-serif); }
.acceso-visual-clips { position: absolute; inset: 0; }
.acceso-visual-clip { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--acx-curva, ease); }
.acceso-visual-clip.acceso-visual-activo { opacity: 1; }
/* Encuadre de cada clip (16:9) en la columna vertical: el colibrí, la
   cascada y la locutora con su micrófono. */
.acceso-visual-clip[data-acceso-visual-clip="0"] { object-position: 36% 50%; }
.acceso-visual-clip[data-acceso-visual-clip="2"] { object-position: 60% 50%; }
/* Velo algo más oscuro abajo (10-oct-2026): el subtítulo quedaba a 3,1:1
   sobre zonas claras del vídeo (la blusa de la locutora en Audio). */
.acceso-visual-velo { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .45) 70%, rgba(0, 0, 0, .82) 100%); }
.acceso-visual-texto { position: absolute; z-index: 2; inset-inline: 20px; bottom: 20px; }
.acceso-visual .acceso-visual-kicker { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin: 0; padding: 0 8px; border-radius: 8px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.acceso-visual-punto { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--acx-lima, #d1fe17); }
.acceso-visual .acceso-visual-titulo { margin: 12px 0 0; color: #fff; font-size: 40px; font-weight: 800; line-height: 48px; letter-spacing: -.8px; text-transform: uppercase; overflow-wrap: anywhere; }
.acceso-visual .acceso-visual-sub { max-width: 40ch; min-height: 40px; margin: 4px 0 0; color: rgba(255, 255, 255, .86); font-size: 14px; line-height: 20px; text-wrap: pretty; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.acceso-visual-pestanas { display: grid; grid-template-columns: repeat(var(--acceso-pestanas, 3), minmax(0, 1fr)); gap: 4px; margin-top: 24px; }
.acceso-visual-pestana { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0 0 2px; border: 0; border-radius: 4px; background: none; color: rgba(255, 255, 255, .6); font: inherit; font-size: 12px; font-weight: 500; line-height: 16px; text-align: start; cursor: pointer; transition: color var(--acx-t, .2s) var(--acx-curva, ease); }
.acceso-visual-pestana:hover, .acceso-visual-pestana[aria-selected="true"] { color: #fff; }
.acceso-visual-pestana:focus-visible { outline: 2px solid var(--acx-lima, #d1fe17); outline-offset: 4px; }
.acceso-visual-pestana-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acceso-visual-barra { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.acceso-visual-barra i { display: block; width: 100%; height: 100%; border-radius: inherit; background: #fff; transform: scaleX(0); transform-origin: left center; }
[dir="rtl"] .acceso-visual-barra i { transform-origin: right center; }
/* La barra activa se llena en ~9 s (unas dos vueltas del clip) y pasa a la
   siguiente pestaña. Pausa u oculta: se congela. Sistema quieto: llena. */
.acceso-visual-pestana[aria-selected="true"] .acceso-visual-barra i { animation: acx-progreso 9s linear forwards; }
.acceso-visual-quieto .acceso-visual-pestana[aria-selected="true"] .acceso-visual-barra i { animation-play-state: paused; }
.acceso-visual-fijo .acceso-visual-pestana[aria-selected="true"] .acceso-visual-barra i { animation: none; transform: none; }
@keyframes acx-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.acceso-visual-pausa { position: absolute; z-index: 3; top: 16px; inset-inline-start: 16px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, .06); border-radius: 50%; background: rgba(19, 21, 23, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: background-color var(--acx-t, .2s) var(--acx-curva, ease); }
.acceso-visual-pausa:hover { background: rgba(19, 21, 23, .8); }
.acceso-visual-pausa:focus-visible { outline: 2px solid var(--acx-lima, #d1fe17); outline-offset: 2px; }
/* Redondos también con el foco del teclado: la regla global de crear.html
   («:focus-visible { border-radius: 6px }») los volvía cuadrados. */
.acceso-modal-cerrar:focus-visible, .acceso-visual-pausa:focus-visible { border-radius: 50%; }

/* ---------- Formulario (compartido con entrar.html) ---------- */
:is(.acceso-modal, .acceso-pagina) .ac-marca { display: block; margin: 0; color: #fff; font-family: var(--acx-fuente); font-size: 22px; font-weight: 800; line-height: 32px; letter-spacing: -.04em; text-align: center; text-decoration: none; }
:is(.acceso-modal, .acceso-pagina) .ac-marca b { font-weight: 800; color: var(--acx-lima); }
:is(.acceso-modal, .acceso-pagina) .ac-titulo { margin: 16px 0 0; color: var(--acx-texto); font-family: var(--acx-fuente); font-size: 30px; font-weight: 600; line-height: 36px; letter-spacing: -.02em; text-align: center; text-wrap: balance; outline: none; }
:is(.acceso-modal, .acceso-pagina) .ac-titulo:focus, :is(.acceso-modal, .acceso-pagina) .ac-titulo:focus-visible { outline: none; box-shadow: none; }
:is(.acceso-modal, .acceso-pagina) .ac-sub { margin: 12px 0 0; color: var(--acx-texto-2); font-size: 14px; font-weight: 400; line-height: 20px; text-align: center; text-wrap: balance; }
/* Japonés y coreano: sin partir palabras por la mitad («確 / 認», «크 / 레딧»,
   «くだ / さい»). El japonés corta por frases (auto-phrase; donde no exista,
   como siempre); el coreano, por los espacios entre palabras (y, si una
   palabra no cabe, donde haga falta). Todo el acceso: títulos, avisos y notas. */
:is(.acceso-modal, .acceso-pagina):lang(ja) { word-break: auto-phrase; }
:is(.acceso-modal, .acceso-pagina):lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
/* Bloque social a 40 px del subtítulo; sin proveedores, el campo va a 32. */
:is(.acceso-modal, .acceso-pagina) .ac-social { min-height: 0; margin: 0; }
:is(.acceso-modal, .acceso-pagina) .ac-social > .acceso-social { margin-top: 40px; }
:is(.acceso-modal, .acceso-pagina) .ac-social.ac-social-nota { margin-top: 24px; color: var(--acx-texto-2); font-size: 13px; line-height: 18px; text-align: center; }
:is(.acceso-modal, .acceso-pagina) :is([data-am-form], .ac-form) { display: flex; flex-direction: column; margin: 32px 0 0; }
:is(.acceso-modal, .acceso-pagina) .ac-social:has(> .acceso-social:not([hidden])) ~ :is([data-am-form], .ac-form) { margin-top: 0; }
/* Consulta fallida: una línea con «Reintentar» y, sin «o», el campo a 24. */
:is(.acceso-modal, .acceso-pagina) .ac-social:has(> .acceso-social[data-social-error="si"]) ~ :is([data-am-form], .ac-form) { margin-top: 24px; }
:is(.acceso-modal, .acceso-pagina) .ac-label { display: block; margin: 0 0 8px; color: var(--acx-texto-2); font-size: 12px; font-weight: 400; line-height: 18px; text-align: start; }
:is(.acceso-modal, .acceso-pagina) .ac-input + .ac-label { margin-top: 16px; }
:is(.acceso-modal, .acceso-pagina) .ac-oculto { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
:is(.acceso-modal, .acceso-pagina) .ac-input { display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px; border: 1px solid var(--acx-linea); border-radius: 12px; background: transparent; color: #fff; font-family: inherit; font-size: 14px; line-height: 20px; outline: none; box-shadow: none; caret-color: #fff; transition: border-color var(--acx-t) var(--acx-curva); -webkit-appearance: none; appearance: none; }
:is(.acceso-modal, .acceso-pagina) .ac-input::placeholder { color: var(--acx-texto-2); opacity: 1; }
:is(.acceso-modal, .acceso-pagina) .ac-input:hover { border-color: var(--acx-linea-hover); }
:is(.acceso-modal, .acceso-pagina) .ac-input:focus { border-color: #fff; box-shadow: none; }
/* El Estudio pinta un anillo de foco en todos los campos (body.studio-workbench):
   aquí el foco de un campo es su borde blanco, sin halo. */
html body :is(.acceso-modal, .acceso-pagina) :is(.ac-input, .ac-otp-caja):is(:focus, :focus-visible) { outline: none; box-shadow: none; }
:is(.acceso-modal, .acceso-pagina) .ac-input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 52px var(--acx-fondo) inset; transition: background-color 9999s; }
:is(.acceso-modal, .acceso-pagina) .ac-input[aria-invalid="true"], :is(.acceso-modal, .acceso-pagina) .ac-input[aria-invalid="true"]:focus { border-color: var(--acx-error); }
:is(.acceso-modal, .acceso-pagina) .ac-input:disabled { opacity: .6; }
/* El correo siempre en LTR; en árabe y urdu, alineado a la derecha. */
[dir="rtl"] :is(.acceso-modal, .acceso-pagina) .ac-input[dir="ltr"] { text-align: right; }
:is(.acceso-modal, .acceso-pagina) .ac-aviso { margin: 8px 0 0; color: var(--acx-texto-2); font-size: 13px; line-height: 18px; text-align: start; text-wrap: pretty; }
:is(.acceso-modal, .acceso-pagina) .ac-aviso.es-error { color: var(--acx-error); }
/* Continuar: 40 px; vacío, apagado pero enfocable (aria-disabled). */
:is(.acceso-modal, .acceso-pagina) .ac-principal { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; min-height: 40px; margin: 16px 0 0; padding: 0 16px; border: 0; border-radius: 10px; background: var(--acx-boton); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0; cursor: pointer; transition: background-color var(--acx-t) var(--acx-curva), color var(--acx-t) var(--acx-curva); }
:is(.acceso-modal, .acceso-pagina) .ac-principal:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--acx-boton-hover); }
:is(.acceso-modal, .acceso-pagina) .ac-principal:is(:disabled, [aria-disabled="true"]) { background: var(--acx-boton-off); color: var(--acx-off); cursor: default; opacity: 1; }
:is(.acceso-modal, .acceso-pagina) .ac-principal[data-cargando] { background: var(--acx-boton); color: #fff; cursor: progress; }
:is(.acceso-modal, .acceso-pagina) .ac-principal[data-cargando]::before { content: ''; flex: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: acx-giro .7s linear infinite; }
@keyframes acx-giro { to { transform: rotate(360deg); } }
:is(.acceso-modal, .acceso-pagina) .ac-enlace { display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 4px; border: 0; background: transparent; color: var(--acx-texto-2); font: inherit; font-size: 13px; font-weight: 500; line-height: 18px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 3px; cursor: pointer; transition: color var(--acx-t) var(--acx-curva); }
:is(.acceso-modal, .acceso-pagina) .ac-enlace:hover:not(:disabled) { color: #fff; text-decoration-color: currentColor; }
:is(.acceso-modal, .acceso-pagina) .ac-enlace:disabled { opacity: .5; cursor: default; }
/* «Entrar con contraseña» y otras vías: texto gris sin subrayado. */
:is(.acceso-modal, .acceso-pagina) .ac-alternativa { display: flex; justify-content: center; width: fit-content; min-height: 32px; margin: 12px auto 0; padding: 6px 8px; text-decoration: none; }
:is(.acceso-modal, .acceso-pagina) .ac-alternativa:hover:not(:disabled) { color: #fff; }
/* Pie con divisoria: «¿Es tu primera vez? Crea tu cuenta» / «¿Ya tienes cuenta? Login». */
:is(.acceso-modal, .acceso-pagina) :is(.ac-cambio, .ac-pie) { margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid var(--acx-linea-suave); color: var(--acx-texto-2); font-size: 14px; font-weight: 500; line-height: 20px; text-align: center; }
:is(.acceso-modal, .acceso-pagina) .ac-cambio :is(button, a) { display: inline-flex; align-items: center; min-height: 32px; margin: -6px 0; padding: 0 2px; border: 0; background: transparent; color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
:is(.acceso-modal, .acceso-pagina) .ac-cambio :is(button, a):hover { text-decoration: underline; text-underline-offset: 3px; }
:is(.acceso-modal, .acceso-pagina) .ac-pie .ac-alternativa { margin: -6px auto; }

/* ---------- Código de 6 dígitos ---------- */
:is(.acceso-modal, .acceso-pagina) .ac-correo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 4px 0 0; color: #fff; font-size: 14px; font-weight: 600; line-height: 20px; text-align: center; }
:is(.acceso-modal, .acceso-pagina) .ac-correo bdi { min-width: 0; overflow-wrap: anywhere; }
:is(.acceso-modal, .acceso-pagina) .ac-correo .ac-enlace { min-height: 28px; padding: 2px 4px; font-weight: 500; }
:is(.acceso-modal, .acceso-pagina) .ac-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 28px 0 0; direction: ltr; }
:is(.acceso-modal, .acceso-pagina) .ac-otp-caja { display: block; width: 100%; min-width: 0; height: 56px; margin: 0; padding: 0; border: 1px solid var(--acx-linea); border-radius: 12px; background: transparent; color: #fff; font-family: var(--acx-fuente); font-size: 22px; font-weight: 600; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; caret-color: #fff; outline: none; box-shadow: none; transition: border-color var(--acx-t) var(--acx-curva); -webkit-appearance: none; appearance: none; }
:is(.acceso-modal, .acceso-pagina) .ac-otp-caja:not(:placeholder-shown) { border-color: var(--acx-linea-hover); }
:is(.acceso-modal, .acceso-pagina) .ac-otp-caja:hover { border-color: var(--acx-linea-hover); }
:is(.acceso-modal, .acceso-pagina) .ac-otp-caja:focus { border-color: #fff; }
:is(.acceso-modal, .acceso-pagina) .ac-otp-caja[aria-invalid="true"] { border-color: var(--acx-error); }
:is(.acceso-modal, .acceso-pagina) .ac-otp-caja:disabled { opacity: .6; }
:is(.acceso-modal, .acceso-pagina) .ac-reenviar { display: block; min-height: 32px; margin: 20px auto 0; padding: 6px 8px; border: 0; background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 500; line-height: 20px; font-variant-numeric: tabular-nums; cursor: pointer; }
:is(.acceso-modal, .acceso-pagina) .ac-reenviar:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
:is(.acceso-modal, .acceso-pagina) .ac-reenviar:disabled { color: var(--acx-off); cursor: default; }
:is(.acceso-modal, .acceso-pagina) .ac-caduca { margin: 8px 0 0; color: var(--acx-texto-2); font-size: 12px; line-height: 16px; text-align: center; }
:is(.acceso-modal, .acceso-pagina) .ac-nota { margin: 8px 0 0; color: var(--acx-texto-2); font-size: 12px; line-height: 16px; text-align: center; text-wrap: pretty; }
:is(.acceso-modal, .acceso-pagina) .ac-nota .ac-enlace { display: inline; min-height: 0; padding: 0; font-size: 12px; line-height: 16px; color: #fff; }

/* Alta sin casilla: frase legal pequeña bajo el botón; enlaces en blanco
   subrayados. p.acceso-legal gana a los «.hero-entrar p» / «.intro-* p». */
p.acceso-legal { margin: 12px 0 0; color: var(--acx-texto-2); font-family: var(--acx-fuente); font-size: 12px; font-weight: 400; line-height: 16px; text-align: center; text-wrap: pretty; }
.acceso-legal a { color: #fff; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 2px; }
.acceso-legal a:hover { color: #fff; text-decoration-color: currentColor; }
.acceso-legal[hidden] { display: none !important; }
.formulario > .acceso-legal { margin-top: 12px; }
.form-intro-correo .acceso-legal { flex: 0 0 100%; grid-column: 1 / -1; width: 100%; margin: 4px 0 2px; padding: 0 .75rem .35rem; color: var(--gris-niebla, #898a8b); }
/* Japonés y chino no separan palabras con espacios (10-oct-2026): en
   entrar.html el hueco entre un trozo traducido y su enlace va en su propio
   span y en esos idiomas no se pinta (la ventana lo une igual: sinEspacios). */
:lang(ja) .ac-espacio, :lang(zh) .ac-espacio { display: none; }

/* Correos de novedades y ofertas (4-oct-2026): casilla OPCIONAL y desmarcada
   antes de Continuar. Discreta; lima solo al marcar. */
.acceso-marketing { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; color: var(--acx-texto-2); font-family: var(--acx-fuente); font-size: 12px; font-weight: 400; line-height: 16px; text-align: start; cursor: pointer; }
.acceso-marketing[hidden] { display: none !important; }
.acceso-marketing input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--acx-lima); cursor: pointer; }
.acceso-marketing:has(input:disabled) { opacity: .6; cursor: default; }
.form-intro-correo .acceso-marketing { flex: 0 0 100%; grid-column: 1 / -1; width: 100%; margin: 4px 0 0; padding: 0 .75rem; color: var(--gris-niebla, #898a8b); }

/* ---------- Correo que no puede existir (8-oct-2026) ----------
   «¿Quisiste decir…? Usar» y «Mi correo está bien escrito» bajo el aviso del
   campo. La lima solo en el botón «Usar». */
:is(.acceso-modal, .acceso-pagina) .ac-sugerencia { display: grid; justify-items: start; gap: 2px; margin: 8px 0 0; }
:is(.acceso-modal, .acceso-pagina) .ac-sugerencia[hidden] { display: none; }
:is(.acceso-modal, .acceso-pagina) .ac-sugerencia-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 8px 8px 12px; padding-inline: 12px 8px; border-radius: 12px; background: rgba(209, 254, 23, .08); color: #e8e8e8; font-size: 13px; line-height: 18px; }
:is(.acceso-modal, .acceso-pagina) .ac-sugerencia-fila p { min-width: 0; margin: 0; overflow-wrap: anywhere; text-align: start; }
:is(.acceso-modal, .acceso-pagina) .ac-sugerencia-fila b { color: #fff; font-weight: 600; }
:is(.acceso-modal, .acceso-pagina) .ac-sugerencia-usar { flex: none; height: 32px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--acx-lima); color: #131517; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; }
:is(.acceso-modal, .acceso-pagina) .ac-sugerencia-usar:hover { background: #dcff4d; }
:is(.acceso-modal, .acceso-pagina) .ac-sugerencia .ac-enlace { min-height: 32px; padding: 6px 0; font-size: 12px; font-weight: 400; line-height: 16px; }

/* ---------- Pantallas bajas: también cabe con Apple activo ---------- */
@media (min-width: 1024px) and (max-height: 820px) {
  :is(.acceso-modal, .acceso-pagina) .ac-titulo { margin-top: 12px; }
  :is(.acceso-modal, .acceso-pagina) .ac-social > .acceso-social { margin-top: 24px; }
  :is(.acceso-modal, .acceso-pagina) :is([data-am-form], .ac-form) { margin-top: 24px; }
  :is(.acceso-modal, .acceso-pagina) :is(.ac-cambio, .ac-pie) { margin-top: 16px; }
}

/* ---------- Tableta: sin vídeo, ventana de 560 ---------- */
@media (max-width: 1023px) {
  .acceso-modal { grid-template-columns: minmax(0, 1fr); width: min(560px, calc(100vw - 48px)); height: -moz-fit-content; height: fit-content; max-height: min(700px, calc(100vh - 48px)); max-height: min(700px, calc(100dvh - 48px)); padding: 0; }
  .acceso-modal-visual { display: none; }
  .acceso-modal-contenido { grid-column: 1; padding: 32px 40px; }
  .acceso-modal-cerrar { top: 16px; inset-inline-end: 16px; }
}

/* ---------- Móvil (también el Estudio móvil): tarjeta centrada ---------- */
@media (max-width: 640px) {
  .acceso-modal { width: min(352px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 20px; }
  .acceso-modal-contenido { padding: 24px 20px; }
  .acceso-modal-cerrar { top: 12px; inset-inline-end: 12px; }
  :is(.acceso-modal, .acceso-pagina) .ac-social > .acceso-social { margin-top: 24px; }
  :is(.acceso-modal, .acceso-pagina) :is([data-am-form], .ac-form) { margin-top: 24px; }
  /* 16 px: el iPhone no hace zoom al escribir. */
  :is(.acceso-modal, .acceso-pagina) .ac-input { font-size: 16px; }
  :is(.acceso-modal, .acceso-pagina) .ac-principal { height: 44px; min-height: 44px; }
  :is(.acceso-modal, .acceso-pagina) .ac-otp { gap: 6px; }
  :is(.acceso-modal, .acceso-pagina) .ac-otp-caja { height: 52px; }
}
/* Con el teclado abierto (pantalla baja): hoja a pantalla completa, sin
   desplazamientos anidados. */
@media (max-width: 640px) and (max-height: 640px) {
  .acceso-modal { width: 100%; height: 100%; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .acceso-modal-contenido { padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .acceso-modal-contenido { padding-inline: 16px; }
  :is(.acceso-modal, .acceso-pagina) .ac-titulo { font-size: 26px; line-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .acceso-modal[open] { animation: none; }
  .acceso-visual-clip { transition: none; }
  :is(.acceso-modal, .acceso-pagina) .ac-principal[data-cargando]::before { animation-duration: 2.4s; }
  :is(.acceso-modal, .acceso-pagina) :is(.ac-input, .ac-otp-caja, .ac-principal, .ac-enlace), .acceso-modal-cerrar { transition: none; }
}


/* cocuyo-css: assets/css/estudio-base.css */
/* Estudio (crear.html): estilos base. Hasta el 12-oct-2026 iban en un <style>
   de unas 2.760 líneas dentro de crear.html (y de sus 19 copias por idioma):
   ahora son una hoja más, al final de <body> y en el paquete de build-css,
   en el MISMO sitio de la cascada (después de idioma.css, estudio-derechos.css
   y acceso-modal.css; antes de estudio-compositor.css). En el <head> solo queda
   el CSS crítico del primer pintado (letra Geist, --fuente/--font, la puerta y
   los esqueletos del ordenador y del teléfono). Las rutas de las fuentes,
   relativas a esta carpeta (../fonts/). Velocidad, auditoría v340.
   Limpieza (punto 10): se quitaron unas 230 declaraciones que nunca ganaban
   porque la MISMA regla (mismo selector y mismo @media) vuelve a poner la
   misma propiedad más abajo, aquí o en una hoja posterior del paquete. Los
   estilos calculados de Crear (ordenador, tableta y teléfono; Imagen, Video
   y Audio; es/en/ar) salieron idénticos antes y después. */
/* Las letras DE VERDAD (31-ago-2026). --font declaraba 'Onest','Inter' pero
   ninguna estaba auto-alojada y la CSP (font-src 'self' data:) bloquea
   cualquier CDN: todo el Estudio se pintaba con la letra del sistema sin
   que nadie lo notara. Geist para la interfaz (la misma del resto de
   Cocuyo) y Fraunces para los titulares (la letra de cartel de la casa). */
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-latin.woff2?v=7234ed860a9c") format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap;
}
/* ============ TOKENS CANÓNICOS (P0.2, 4-sep-2026) ============
   La ÚNICA raíz de color y letra del Estudio. Nombres y valores son un
   ESPEJO EXACTO de assets/css/tokens.css (la fuente de verdad de toda la
   casa): si allí cambia un valor, se cambia AQUÍ el mismo. No se importa
   la hoja entera porque su reset (margin/padding:0 a todo elemento)
   desmontaría un Estudio que se maquetó contando con los márgenes del
   navegador; y su .btn / anillo de foco pisarían clases homónimas de aquí.
   Los alias locales (--bg, --surface, --lima…) ya NO llevan hex: cuelgan
   de los canónicos. Antes convivían cuatro :root (Picsart, Lime Frost,
   CALMA y claro) con tres limas rivales (dos apagadas de épocas anteriores y
   la buena) y un alias llamado "azul" que era verde. Ahora hay UNA lima y se
   llama por su nombre. */
:root{
  /* --- canónicos (= tokens.css) --- */
  --negro-abismo:#050505;       /* fondo principal · NEGRO */
  --negro-elevado:#121212;      /* tarjetas y superficies */
  --negro-borde:#262626;        /* bordes e inputs */
  --pizarra:#333333;            /* secundario neutro: chips, separadores */
  --verde-cocuyo:#AFF33E;       /* EL acento: LIMA · el único verde de marca */
  --verde-profundo:#14532D;     /* fondos de acento, estados */
  --lima-clara:#D9FF8A;         /* lima iluminada: la escarcha del hover */
  --tinta-sobre-verde:#0A0A0A;  /* negro sobre lima (botones primarios, chips activos) */
  --blanco-luz:#F8FAFC;         /* texto principal */
  --gris-niebla:#CBD5E1;        /* texto secundario */
  --gris-humo:#94A3B8;          /* terciario / placeholders */
  --peligro:#F87171;            /* errores */
  --precio-rosa:#FF005B;        /* insignias de los modelos: TOP (= tokens.css) */
  --precio-azul:#1F55FF;        /* NEW */
  --precio-lima:#D1FE17;        /* ECONÓMICO */
  --apps-traje-marino:#20344f; /* muestras de vestuario (= tokens.css) */
  --apps-traje-gris:#626975;
  --apps-traje-negro:#171a20;
  --apps-traje-beige:#d1bfa6;
  --escarcha:color-mix(in srgb,var(--negro-elevado) 72%,transparent);       /* vidrio de Lime Frost */
  --escarcha-borde:color-mix(in srgb,var(--blanco-luz) 12%,transparent);
  --acento-fondo:color-mix(in srgb,var(--verde-profundo) 45%,var(--negro-abismo));
  --glow-suave:0 0 12px color-mix(in srgb,var(--verde-cocuyo) 30%,transparent);
  --glow-medio:0 0 24px color-mix(in srgb,var(--verde-cocuyo) 40%,transparent),0 0 6px color-mix(in srgb,var(--verde-cocuyo) 55%,transparent);
  /* --fuente y --font: en el CSS crítico del <head> de crear.html (las usa el esqueleto del primer pintado). */
  --fuente-display:"Fraunces",Georgia,"Times New Roman",serif;   /* SOLO titulares de cartel */
  --fuente-mono:"JetBrains Mono","Cascadia Code","SF Mono",Consolas,monospace;

  /* --- alias del Estudio → canónicos. Escala del abismo: 05 / 12 / 26 --- */
  --bg:var(--negro-abismo);
  --panel:color-mix(in srgb,var(--negro-abismo) 70%,var(--negro-elevado)); /* ≈#090909: el cromo (barra lateral) retrocede */
  --surface:var(--negro-elevado);
  --surface2:color-mix(in srgb,var(--negro-elevado) 70%,var(--negro-borde)); /* ≈#181818: hover */
  --surface3:color-mix(in srgb,var(--negro-elevado) 40%,var(--negro-borde)); /* ≈#1E1E1E: pulsado, pozo */
  --elev:var(--negro-elevado);
  --border:var(--negro-borde);
  --border2:var(--pizarra);
  --text:var(--blanco-luz);
  --muted2:var(--gris-niebla);
  --muted:var(--gris-humo);
  --dim:color-mix(in srgb,var(--gris-humo) 70%,var(--negro-abismo));         /* ≈#697482: tinte, no texto pequeño */
  --lima:var(--verde-cocuyo);
  --lima2:color-mix(in srgb,var(--verde-cocuyo) 80%,var(--verde-profundo));  /* ≈#90D33B: interruptores y trazos */
  --lima-suave:color-mix(in srgb,var(--verde-cocuyo) 11%,transparent);       /* fondo del ítem activo (sustituye al viejo alias azul) */
  --gradlima:linear-gradient(135deg,var(--lima-clara),var(--verde-cocuyo) 55%,var(--lima2));
  --ambar:#E9BE73;              /* el único acento que no es lima: favoritos y saldo */
  --err:var(--peligro);
  --display:var(--fuente-display);
  --side:208px;
  /* Escala tipográfica (= tokens.css, 29-sep-2026). Disponible para retoques;
     no cambia nada que no la use con var(). */
  --titulo-1:clamp(2rem,1.45rem + 2.4vw,3.5rem);
  --titulo-2:clamp(1.625rem,1.3rem + 1.4vw,2.5rem);
  --titulo-3:clamp(1.25rem,1.1rem + .65vw,1.75rem);
  --titulo-4:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --interlinea-titular:1.1;
  --interlinea-subtitulo:1.25;
  --interlinea-compacta:1.35;
  --interlinea-texto:1.55;
  --tracking-titular:-0.025em;
  --tracking-subtitulo:-0.015em;
  --tracking-mayusculas:0.07em;
  /* Movimiento y vidrio (= tokens.css). */
  --curva-suave:cubic-bezier(0.22,1,0.36,1);
  --vidrio:blur(18px) saturate(180%);
  --vidrio-fino:blur(12px) saturate(180%);

  /* --- Familia Cocuyo (29-sep-2026) ---
     ESPEJO de los tokens --f-* de assets/css/familia.css (el Estudio no
     carga esa hoja). Los usa assets/css/estudio-familia.css, el acabado
     ligero del Estudio. Si allí cambia un valor, se cambia AQUÍ igual. */
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
svg{display:block}
.ic{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ic.s14{width:14px;height:14px;flex-basis:14px}
.ic.s16{width:16px;height:16px;flex-basis:16px}
/* one placeholder rule for every editable surface */
[data-ph]:empty:before{content:attr(data-ph);color:var(--muted);pointer-events:none}
/* stacked double chevron, like the real selects */
.car{display:inline-flex;flex-direction:column;line-height:.55;font-size:0;opacity:.55;margin-left:1px}
.car:before{content:"\25B4";font-size:8px}.car:after{content:"\25BE";font-size:8px}
/* Saldo y costes que cambian en vivo: cifras tabulares para que no «bailen»
   al actualizarse (mismo tipo de letra, mismo tamaño). */
.cifras,.credit-wallet-value,.studio-generate-cost,#parambar .param,#mesa .cost b{font-variant-numeric:tabular-nums}
/* Móvil táctil: los campos de texto a 16 px como mínimo para que iOS no
   amplíe la página al enfocarlos. El escritorio con ratón no cambia. */
@media(pointer:coarse){body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]),textarea,select){font-size:max(16px,1em)!important}}

/* announcement */
.annc{height:33px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:600;position:relative;z-index:60}
.annc .all{position:absolute;left:12px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.annc .new{background:rgba(255,255,255,.22);border-radius:5px;padding:1px 7px;font-size:11px}
.annc .x{position:absolute;right:12px;font-size:15px;opacity:.9}

/* layout */
.app{display:flex;min-height:100vh}
.side{width:var(--side);flex:0 0 var(--side);background:var(--panel);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .top{display:flex;align-items:center;justify-content:space-between;padding:0 4px 16px}
.brand{display:flex;align-items:center;}
.navlist a{display:flex;align-items:center;gap:11px;color:var(--muted2);}
.navlist a:hover{background:var(--surface)}
.grouphead{display:flex;align-items:center;justify-content:space-between;}
.showmore{display:flex;align-items:center;gap:11px;padding:8px 10px;color:var(--muted);font-size:13.5px;font-weight:600;width:100%}
.showmore:hover{color:var(--text)}
.sessions .item{display:flex;align-items:center;gap:10px;padding:9px 10px;color:var(--muted);font-size:13.5px}
.sessions .item .sq{width:22px;height:22px;border-radius:7px;background:var(--surface2);display:grid;place-items:center;font-size:13px}
.side .foot{margin-top:auto;display:flex;flex-direction:column;}
.upg{display:flex;align-items:center;gap:9px}
.upgbtn{flex:1;display:flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--verde-cocuyo) 35%,transparent);font-weight:700;}
.diamond{width:28px;height:28px;border-radius:9px;border:1px solid color-mix(in srgb,var(--verde-cocuyo) 35%,transparent);display:grid;place-items:center}
.acct{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);position:relative;cursor:pointer}
.acct .av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px}
.acct .cr{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600}
.acct .dots{margin-left:auto;opacity:.6}

/* account menu */
.accmenu{position:fixed;left:12px;bottom:56px;width:230px;background:var(--elev);border:1px solid var(--border2);border-radius:12px;padding:0 0 6px;box-shadow:0 30px 70px -12px rgba(0,0,0,.9);display:none;z-index:90}
.accmenu.open{display:block}
.accmenu .em{padding:13px 14px;font-size:12.5px;color:var(--muted2);border-bottom:1px solid var(--border)}
.accmenu .card{margin:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;gap:10px}
.accmenu .card .ring{width:20px;height:20px;border-radius:50%;border:2px solid var(--lima)}
.accmenu .card b{font-size:13.5px}
.accmenu .card small{display:block;color:var(--dim);font-size:11.5px}
.accmenu .sec{padding:4px 6px;border-top:1px solid var(--border)}
.accmenu .sec:first-of-type{border-top:0}
.accmenu .mi{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;font-size:13px;color:var(--muted2)}
.accmenu .mi:hover{background:var(--surface2);color:var(--text)}
.accmenu .mi .val{margin-left:auto;color:var(--dim);font-size:12px;display:flex;align-items:center;gap:5px}

/* main */
.main{flex:1;min-width:0;position:relative;overflow-x:hidden}
.topright{position:absolute;top:14px;right:20px;z-index:20}
.btnblue{font-size:13px;border-radius:9px;padding:8px 14px;display:inline-flex;align-items:center;gap:7px}
.wrap{max-width:1240px;margin:0 auto}
.page{display:none}.page.on{display:block}

/* mode switch */
.modesw{display:flex;justify-content:center;margin:4px 0 0}
.modesw .inner{display:inline-flex;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:4px}
.modesw button{display:flex;align-items:center;gap:8px;padding:8px 18px;border-radius:9px;color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap}
.modesw button.active{background:var(--surface3);color:var(--text)}
.modesw .modemore{color:var(--muted2);font-weight:600;position:relative;margin-left:3px;padding-left:15px}
.modesw .modemore::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:1px;background:var(--border)}
.modesw .modemore .ic{transition:transform .2s ease}
body.mas-abierto .modesw .modemore .ic{transform:rotate(180deg)}
body.mas-abierto .modesw .modemore{color:var(--txt,var(--text))}
h1.title{text-align:center;font-size:clamp(26px,3.6vw,38px);font-weight:700;letter-spacing:-.025em;margin:46px 0 20px}
.apps{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.appbtn{position:relative;display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:9px 17px;font-size:14px;font-weight:600;white-space:nowrap}
.appbtn:hover{background:var(--surface2);border-color:var(--border2)}
.appbtn .tagapp{position:absolute;top:-8px;right:8px;background:var(--lima);color:var(--tinta-sobre-verde);font-size:11px;font-weight:700;padding:1px 6px;border-radius:5px}

/* composer */
.composer{max-width:722px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px;position:relative}
.refgrid{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:14px}
.refbox{flex:0 0 auto;width:98px;height:62px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:9px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:12px;font-weight:500}
#waRefs .refbox{width:112px;height:66px}
.refbox:hover{background:var(--surface2);border-color:var(--border2);color:var(--text)}
.refbox .ic{width:20px;height:20px}
.headicons{position:absolute;top:14px;right:14px;display:flex;gap:8px;z-index:5}
.iconbtn{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--muted2)}
.iconbtn:hover{background:var(--surface2);color:var(--text)}
.roundbtn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:.15s}
.roundbtn:hover{box-shadow:0 0 0 4px rgba(255,255,255,.12)}
/* 4-sep-2026 (Listillo Diseño): el botón de generar era solo un icono; en
   escritorio se lee «Generar» al lado. En móvil (≤640) vuelve a ser redondo
   para no pisar la tira de referencias. */
.headicons .roundbtn{width:auto;min-width:34px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 15px 0 12px;border-radius:999px;font-size:13px;font-weight:800;white-space:nowrap}
.headicons .roundbtn .rlbl{line-height:1}
@media(max-width:640px){
  .headicons .roundbtn{padding:0;border-radius:50%}   /* el ancho lo da min-width (34, o 44 táctil) */
  .headicons .roundbtn .rlbl{display:none}
}
.ta{min-height:44px;padding:6px 4px;font-size:14.5px;outline:0}
.ta:empty:before{content:attr(data-ph);color:var(--muted)}
.parambar{display:flex;align-items:center;flex-wrap:nowrap;gap:2px;padding-top:12px;font-size:13px;overflow:visible}
@media(max-width:760px){.parambar{flex-wrap:wrap}}
.addimg{width:30px;height:30px;flex:0 0 30px;border:1px dashed var(--border2);border-radius:8px;display:grid;place-items:center;color:var(--muted2);margin-right:6px}
.addimg:hover{border-color:var(--dim);color:var(--text)}
/* Referencias del compositor: acceso visible a PC y galería. */
.image-ref-controls{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:9px 14px;margin:12px 112px 14px 0}
.image-ref-controls[hidden]{display:none!important}
.image-ref-add{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:9px 13px;border:1px dashed var(--border2);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.image-ref-add:hover{border-color:var(--verde-cocuyo);background:var(--surface2)}
.image-ref-add:focus-visible,.image-ref-menu button:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}
.image-ref-add:disabled{opacity:.5;cursor:default}
.image-ref-add b{font-size:11px;font-weight:500;color:var(--muted2);padding:3px 6px;border-radius:5px;background:var(--surface3)}
.image-ref-hint{color:var(--muted);font-size:12px;line-height:1.5}
.image-ref-controls .image-ref-menu{top:auto;bottom:calc(100% + 8px);left:0;transform:none;width:min(300px,78vw);z-index:80}
.image-ref-controls .image-ref-menu button{justify-content:flex-start}
.image-ref-menu button{min-height:44px}
.modo-imagen #attrow .attchip{border-radius:12px}
.attchip button.x{padding:0;border:0;cursor:pointer}
.modo-imagen .mesa-in{border-color:var(--border2);background:var(--panel);box-shadow:0 12px 48px rgba(0,0,0,.4)}
.modo-imagen .mesa-in::before,.modo-imagen .mesa-in::after{display:none}
.modo-imagen .mesa-top{padding-bottom:8px;border-bottom:1px solid var(--border)}
.modo-imagen .ta{min-height:76px;padding-top:8px}
@media(max-width:640px){.image-ref-controls{margin-right:42px;gap:7px}.image-ref-hint{flex-basis:100%}.image-ref-add{font-size:12px}}
.parambar .lbl{color:var(--muted);font-weight:600;margin-right:4px;font-size:12.5px}
.param{display:inline-flex;align-items:center;gap:5px;padding:6px 7px;border-radius:8px;font-weight:700;font-size:13px;white-space:nowrap;position:relative;flex:0 0 auto}
.param:hover{background:var(--surface2)}
.param.open{background:var(--surface2);box-shadow:0 0 0 1px var(--border2)}
.param .car{opacity:.5}
.param.dim{color:var(--text)}
.cost{margin-left:auto;padding-left:8px;display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px;white-space:nowrap;flex:0 0 auto}
.cost b{color:var(--text)}
.cost .old{opacity:.45;text-decoration:line-through}
.tile{width:16px;height:16px;border-radius:4px;flex:0 0 16px}

/* agent bar */
.agentbar{display:flex;align-items:center;gap:6px;padding-top:12px}
.agentbar .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:9px;font-size:13px;font-weight:700;white-space:nowrap}
.pill:hover{background:var(--surface2)}
.sendround{width:34px;height:34px;border-radius:50%;background:var(--surface3);display:grid;place-items:center}
.quickrow{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:20px}
.quick{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:600;white-space:nowrap}
.quick:hover{background:var(--surface2);border-color:var(--border2)}

/* popovers */
.pop{position:absolute;bottom:calc(100% + 10px);left:0;background:var(--elev);border:1px solid var(--border2);border-radius:12px;padding:6px;box-shadow:0 26px 60px -12px rgba(0,0,0,.9);display:none;z-index:70;min-width:150px}
.pop.on{display:block}
.pop .ph{font-size:11.5px;color:var(--dim);padding:7px 10px 6px;display:flex;align-items:center;gap:7px}
.pop .opt{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer}
.pop .opt:hover{background:var(--surface2)}
.pop .opt .chk{margin-left:auto;opacity:0}
.pop .opt.sel .chk{opacity:1}
.pop.grid2{min-width:236px}
.pop.grid2 .rows{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pop .opt small{display:block;font-weight:400;color:var(--dim);font-size:11.5px;margin-top:2px}
.pop.wide{min-width:300px}
.rowtog{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;border-radius:9px}
.rowtog .txt{flex:1}
.rowtog .txt b{font-size:13.5px;font-weight:600}
.rowtog .txt small{display:block;color:var(--dim);font-size:11.5px;margin-top:2px;line-height:1.35}
.sw{width:34px;height:19px;border-radius:999px;background:var(--border2);position:relative;flex:0 0 34px;margin-top:2px;transition:background .18s;cursor:pointer}
.sw:after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--text);transition:transform .18s}
.sw.on:after{transform:translateX(15px)}
.slidewrap{padding:6px 12px 12px;min-width:230px}
.slidewrap input{width:100%;}
.slidewrap .val{text-align:center;font-weight:700;font-size:14px;margin:8px 0 4px;background:#000;border:1px solid var(--border);border-radius:8px;padding:8px}
.slidewrap .mm{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:6px}

/* model modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);display:none;z-index:100;padding:22px}
.modal.on{display:flex;align-items:flex-start;justify-content:center}
.mbox{width:min(735px,100%);max-height:calc(100vh - 44px);border:1px solid var(--border2);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 90px -20px #000}
.mtop{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--border)}
.segbtn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted)}
.segbtn.on{background:var(--surface3);color:var(--text)}
.msearch{flex:1;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:9px 12px;color:var(--dim);font-size:13px}
.msearch input{flex:1;background:none;border:0;outline:0;color:var(--text);font-family:inherit;font-size:13px}
.mclose{width:30px;height:30px;border-radius:8px;background:var(--surface2);display:grid;place-items:center}
.mbody{overflow-y:auto;padding:14px 12px 18px}
.mhead{font-size:11.5px;letter-spacing:.09em;color:var(--dim);padding:8px 10px}
.mrow{display:flex;gap:13px;padding:11px 12px;border-radius:12px;cursor:pointer;align-items:flex-start}
.mrow:hover{background:var(--surface)}
.mrow.sel{background:var(--surface)}
.mrow .logo{width:34px;height:34px;border-radius:9px;background:var(--surface3);display:grid;place-items:center;flex:0 0 34px}
.mrow .body{flex:1;min-width:0}
.mrow .l1{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mrow .nm{font-size:14.5px;font-weight:700}
.mrow.locked .nm,.mrow.locked .ds{color:var(--muted)}
.bdg{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;white-space:nowrap}
.bdg.up{background:rgba(249,115,22,.16);color:#fdba74}
.bdg.best{background:rgba(217,70,239,.16);color:#f0abfc}
.bdg.launch{background:rgba(34,197,94,.14);color:#86efac}
.bdg.less{background:rgba(239,68,68,.14);color:#fca5a5}
.spec{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--muted2);background:var(--surface2);padding:2px 8px;border-radius:6px;white-space:nowrap}
.spec .st{text-decoration:line-through;opacity:.5;margin-right:3px}
.mrow .ds{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.radio{width:20px;height:20px;border-radius:50%;border:1.6px solid var(--border2);flex:0 0 20px;margin-top:7px;display:grid;place-items:center}
.mrow.sel .radio:after{content:"✓";font-size:12px;font-weight:700}
.grp{display:flex;align-items:center;gap:11px;padding:12px 12px;border-radius:10px;cursor:pointer}
.grp:hover{background:var(--surface)}
.grp .gn{font-size:14px;font-weight:700}
.grp .gc{font-size:12px;color:var(--dim)}
.grp .car{margin-left:auto;color:var(--muted)}

/* rails */
.navlist a.enobras,.excard.enobras{opacity:.55;cursor:default}
.navlist a.enobras:hover,.excard.enobras:hover{background:none;transform:none;box-shadow:none}
.enobras-sello{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--border);border-radius:999px;padding:2px 7px;color:var(--muted)}
.proxnota{margin:-4px 0 18px;color:var(--muted);font-size:13.5px;line-height:1.6;max-width:560px}
.proxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;padding-bottom:30px}
.tcard.prox{opacity:.72;cursor:default;filter:saturate(.55)}
.tcard.prox:hover{transform:none;box-shadow:none}
.tcard.prox .thumb{position:relative}
.proxsello{position:absolute;left:10px;top:10px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);color:var(--text);
  border-radius:999px;padding:4px 10px}

.railhead{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);}
.railhead .lt{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:700}
.railctrl{display:flex;gap:7px}
.railctrl button{width:30px;height:30px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;color:var(--muted2);font-size:13px}
.railctrl button:hover{background:var(--surface2);color:var(--text)}
.rail{display:flex;gap:15px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.poprow{scrollbar-width:none}.poprow::-webkit-scrollbar{display:none}
.packgrid{scrollbar-width:none}.packgrid::-webkit-scrollbar{display:none}
.tcard{flex:0 0 292px}
.tcard .ds{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tcard .thumb{aspect-ratio:7/5;border-radius:12px;position:relative;overflow:hidden;border:1px solid var(--border)}
.tcard .thumb .fill{position:absolute;inset:0;transition:transform .3s}
.tcard:hover .thumb .fill{transform:scale(1.05)}
.tcard .meta{display:flex;align-items:center;gap:8px;margin:10px 0 5px}
.tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px}
.tag.utility{background:rgba(255,255,255,.10);color:var(--muted2)}
.tcard .nm{font-size:14px;font-weight:700}
.tcard .ex{margin-left:auto;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tcard .ds{font-size:13px;color:var(--muted);line-height:1.45}
.noise:after{content:"";position:absolute;inset:0;background:radial-gradient(140px 90px at 28% 22%,rgba(255,255,255,.2),transparent),radial-gradient(150px 110px at 78% 72%,rgba(0,0,0,.3),transparent);mix-blend-mode:overlay}
.p-violet{background:linear-gradient(135deg,#4c1d95,#7c3aed,#a78bfa)}
.p-pink{background:linear-gradient(135deg,#831843,#db2777,#f9a8d4)}
.p-orange{background:linear-gradient(135deg,#7c2d12,#ea580c,#fdba74)}
.p-teal{background:linear-gradient(135deg,#0f766e,#14b8a6,#5eead4)}
.p-blue{background:linear-gradient(135deg,#1e3a8a,#3b82f6,#93c5fd)}
.p-lime{background:linear-gradient(135deg,#3f6212,#84cc16,#d9f99d)}
.p-slate{background:linear-gradient(135deg,#1f2937,#4b5563,#9ca3af)}
.p-sun{background:linear-gradient(135deg,#b45309,#f59e0b,#fde68a)}
.poprow{display:flex;gap:26px;overflow-x:auto;padding:4px 0 6px}
.ptool{display:flex;align-items:center;gap:11px;flex:0 0 auto;font-size:14.5px;font-weight:600;white-space:nowrap}
.ptool .sq{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;}
.promos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.promo .art{aspect-ratio:16/6;border-radius:12px;position:relative;overflow:hidden;border:1px solid var(--border);display:grid;place-items:center;font-weight:800;font-size:26px}
.promo .cap{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:13.5px;font-weight:700}
.promo .cap .new{background:color-mix(in srgb,var(--verde-cocuyo) 14%,transparent);color:var(--lima-clara);font-size:10.5px;padding:2px 7px;border-radius:5px}
.promo .cap .new.g{background:rgba(34,197,94,.16);color:#86efac}

/* library page */
.libbar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.libbtn{display:inline-flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:8px 14px;font-size:13.5px;font-weight:600}
.libbar .zoom{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--muted)}
.libbar .zoom input{accent-color:var(--lima);width:110px}
.libmain{display:flex;min-height:520px}
.libcanvas{flex:1;display:grid;place-items:center;text-align:center;padding:60px 20px}
.libcanvas .fold{width:64px;height:64px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;margin:0 auto 16px}
.libcanvas h3{margin:0 0 8px;font-size:17px}
.libcanvas p{margin:0 0 18px;color:var(--muted);font-size:13.5px;line-height:1.5}
.libside{width:250px;flex:0 0 250px;border-left:1px solid var(--border);padding:16px 14px}
.libsearch{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:9px 12px;color:var(--dim);font-size:13px;margin-bottom:14px}
.libnav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:var(--muted2);font-size:13.5px;font-weight:600}
.libnav a:hover{background:var(--surface)}
.libfilters{margin-top:18px}
.libfilters .fh{display:flex;align-items:center;justify-content:space-between;padding:0 11px 8px;color:var(--dim);font-size:12px;font-weight:600}

/* ref box popover */
.refwrap{position:relative}
.refpop{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:210px;background:var(--elev);border:1px solid var(--border2);border-radius:12px;padding:14px 13px 12px;text-align:center;display:none;z-index:60;box-shadow:0 26px 60px -12px rgba(0,0,0,.9)}
.refpop.on{display:block}
.refpop p{margin:0 0 11px;font-size:12.5px;color:var(--muted2);line-height:1.45}
.refpop button{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:9px;font-size:12.5px;font-weight:600}
.refpop button+button{margin-top:7px}
.refpop button:hover{background:var(--surface3)}

/* explore */
.exhero{display:grid;grid-template-columns:1fr 1.25fr;gap:0;background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-top:14px}
.exhero .l{padding:40px 34px}
.exhero .eyeb{font-size:12px;font-weight:700;letter-spacing:.12em;margin-bottom:14px}
.exhero h2{font-size:clamp(22px,2.7vw,31px);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:0 0 14px}
.exhero p{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0 0 22px;max-width:330px}
.exhero .r{position:relative;min-height:250px}
.exshow{margin-top:34px}
.exshow .h{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.exshow .h b{font-family:var(--font);font-size:20px;font-weight:800;letter-spacing:-.01em;text-transform:uppercase}
.exshow .h .nm2{background:color-mix(in srgb,var(--verde-cocuyo) 14%,transparent);color:var(--lima-clara);font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px}
.exshow .sub{color:var(--muted);font-size:13px;margin-bottom:14px}
.exgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;position:relative}
.exgrid .g{aspect-ratio:3/4;border-radius:12px;position:relative;overflow:hidden;border:1px solid var(--border)}
.exbtns{display:flex;justify-content:center;gap:12px;margin-top:-46px;position:relative;z-index:3}
.exbtns .w{border-radius:999px;padding:10px 18px;font-size:13.5px;font-weight:700}
.exbtns .d{background:rgba(20,20,20,.9);backdrop-filter:blur(8px);border:1px solid var(--border2);border-radius:999px;padding:10px 18px;font-size:13.5px;font-weight:700}
.excards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:40px}
.excard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;position:relative}
.excard:hover{border-color:var(--border2)}
.excard .ci{width:34px;height:34px;border-radius:10px;background:var(--surface3);display:grid;place-items:center;margin-bottom:26px}
.excard .nm{font-size:14.5px;font-weight:700;margin-bottom:4px}
.excard .ds{font-size:12.5px;color:var(--muted)}
.excard .flag{position:absolute;top:14px;right:14px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px}
.flag.trend{color:var(--lima-clara)}
.flag.video{background:color-mix(in srgb,var(--verde-cocuyo) 14%,transparent);color:var(--lima-clara)}
.flag.image{background:rgba(168,85,247,.18);color:#c4a3ff}

/* app page */
.appwrap{display:flex;min-height:100vh}
.apppanel{width:350px;flex:0 0 350px;border-right:1px solid var(--border);padding:22px 20px;display:flex;flex-direction:column}
.apppanel h2{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700;margin:0 0 5px}
.apppanel .sub{color:var(--muted);font-size:13px;margin:0 0 20px}
.drop{border:1px dashed var(--border2);background:var(--panel);border-radius:13px;padding:34px 16px;text-align:center;margin-bottom:14px;cursor:pointer}
.drop:hover{border-color:var(--dim);background:var(--surface)}
.drop .di{display:grid;place-items:center;margin-bottom:10px;color:var(--muted2)}
.drop b{display:block;font-size:14.5px;font-weight:700;margin-bottom:5px}
.drop small{color:var(--dim);font-size:12px}
.adv{display:flex;align-items:center;justify-content:space-between;padding:12px 2px;font-size:13.5px;font-weight:600;color:var(--muted2);cursor:pointer;border-top:1px solid var(--border);margin-top:4px}
.genbtn{margin-top:auto;width:100%;border-radius:11px;padding:13px;font-size:14.5px;display:flex;align-items:center;justify-content:center;gap:9px}
.appmain{flex:1;min-width:0;padding:22px 26px 50px}
.apptabs{display:flex;justify-content:center;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:4px;width:max-content;margin:0 auto 26px}
.apptabs button{display:flex;align-items:center;gap:7px;padding:8px 16px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--muted)}
.apptabs button.on{background:var(--surface3);color:var(--text)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:660px;margin:0 auto;border-radius:14px;overflow:hidden;border:1px solid var(--border)}
.cmp .side2{aspect-ratio:3/4;position:relative}
.cmp .lb{position:absolute;top:10px;font-size:10.5px;font-weight:700;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);padding:3px 9px;border-radius:6px}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:22px 36px;max-width:700px;margin:34px auto 0}
.step{display:flex;gap:13px}
.step .n{width:26px;height:26px;border-radius:50%;background:var(--surface3);display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:0 0 26px;color:var(--muted2)}
.step b{display:block;font-size:14px;font-weight:700;margin-bottom:4px}
.step p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}

/* asset picker (lipsync) */
.pick{max-width:1100px;margin:0 auto;padding:34px 0}
.pick h2{text-align:center;font-size:26px;font-weight:700;margin:0 0 7px}
.pick .sub{text-align:center;color:var(--muted);font-size:14px;margin:0 0 20px}
.pick .seg{display:flex;justify-content:center;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:4px;width:max-content;margin:0 auto 26px}
.pick .seg button{display:flex;align-items:center;gap:7px;padding:8px 18px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--muted)}
.pick .seg button.on{background:var(--surface3);color:var(--text)}
.pickbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:16px;margin-bottom:16px}
.pickbar .sr{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:9px 12px;color:var(--dim);font-size:13px;min-width:230px}
.chipf{display:inline-flex;align-items:center;gap:7px;background:var(--surface2);border-radius:8px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--muted2)}
.chipf.on{background:var(--surface3);color:var(--text)}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.pickvacio{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:44px 20px;border:1px dashed var(--border);border-radius:16px;text-align:center}
.pickvacio p{margin:0;color:var(--muted);font-size:14px;max-width:380px}
.pickitem{aspect-ratio:16/11;border-radius:12px;position:relative;overflow:hidden;border:1px solid var(--border)}
.pickitem .dur{position:absolute;left:9px;bottom:9px;font-size:11px;font-weight:600;background:rgba(0,0,0,.6);padding:3px 8px;border-radius:6px;display:flex;gap:5px;align-items:center}
.pickitem .dots{position:absolute;right:9px;top:9px;opacity:.8}

/* collapsed sidebar */
.side.mini{width:62px;flex-basis:62px}
.side.mini .brand span,.side.mini .navlist a span.lbl2,.side.mini .grouphead span,
.side.mini .showmore span,.side.mini .sessions .item span.t,.side.mini .upgbtn,
.side.mini .acct .cr,.side.mini .acct .dots{display:none}
.side.mini .navlist a{justify-content:center;padding:9px 0}
.side.mini .grouphead{justify-content:center;padding:14px 0 6px}
.side.mini .showmore{justify-content:center}
.side.mini .sessions .item{justify-content:center}
.side.mini .upg{flex-direction:column;gap:6px}
.side.mini .acct{justify-content:center;padding:7px 0}
.side.mini .top{justify-content:center}
.side.mini .top .brand{gap:0}
/* tools search */
.toolsearch{display:none;margin:2px 4px 6px}
.toolsearch.on{display:block}
.toolsearch input{width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:8px;padding:7px 10px;color:var(--text);font-family:inherit;font-size:12.5px;outline:0}
/* model modal group expansion */
.grpwrap{border-radius:10px}
.grpwrap.open{background:rgba(255,255,255,.02)}
.grpitems{display:none;padding:0 0 6px 46px}
.grpwrap.open .grpitems{display:block}
.grpitems .gi{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;font-size:13px;color:var(--muted2);cursor:pointer}
.grpitems .gi:hover{background:var(--surface2);color:var(--text)}
.grpitems .gi .chk{margin-left:auto;color:var(--lima);opacity:0}
.grpitems .gi.sel{color:var(--text)}.grpitems .gi.sel .chk{opacity:1}
.grp .car{transition:transform .18s}
.grpwrap.open .grp .car{transform:rotate(180deg)}
/* multi-select */
.mrow .radio.sq{border-radius:6px}
.msbar{display:none;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--border);background:var(--surface)}
.msbar.on{display:flex}
.msbar .cnt{font-size:13px;color:var(--muted)}
.msbar .go{margin-left:auto;background:var(--lima);color:var(--tinta-sobre-verde);border-radius:9px;padding:8px 16px;font-size:13px;font-weight:700}
/* generic dropdown for agent bar */
.dd{position:absolute;bottom:calc(100% + 8px);left:0;min-width:210px;background:var(--elev);border:1px solid var(--border2);border-radius:12px;padding:6px;box-shadow:0 26px 60px -12px rgba(0,0,0,.9);display:none;z-index:70}
.dd.on{display:block}
.dd .ph{font-size:11.5px;color:var(--dim);padding:7px 10px 5px}
.dd .opt2{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:8px;font-size:13.5px;color:var(--muted2);cursor:pointer}
.dd .opt2:hover{background:var(--surface2);color:var(--text)}
.dd .opt2 small{display:block;color:var(--dim);font-size:11.5px;margin-top:2px;font-weight:400}
.dd .opt2 .chk{margin-left:auto;color:var(--lima);opacity:0}
.dd .opt2.sel{color:var(--text)}.dd .opt2.sel .chk{opacity:1}
/* app tab panels */
.apppanel2{display:none}.apppanel2.on{display:block}
.emptyhist{text-align:center;padding:70px 20px;color:var(--muted)}
.emptyhist .fold{width:58px;height:58px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;margin:0 auto 14px}
.exgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:13px;max-width:800px;margin:0 auto}
.exgal .g{aspect-ratio:3/4;border-radius:12px;border:1px solid var(--border);position:relative;overflow:hidden}
/* library multi-select + zoom */
.gal.z0{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.gal.z2{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.gal.z3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.libbtn.on{color:var(--tinta-sobre-verde)}

/* ===== Writing Assistant modal ===== */
.modal.wa{align-items:center}
.wa .mbox{width:min(1200px,100%);height:min(660px,calc(100vh - 44px))}
.wa .wacol:first-child{background:#0f0f10}
.wa .wacol:last-child{background:#1b1b1b}
.wa .waedit{font-size:15px;margin-top:36px}
.wachip{color:var(--muted2)}
.wahead{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border)}
.wahead b{font-size:17px;font-weight:700}
.wahead .btns{margin-left:auto;display:flex;gap:9px}
.wabtn{border-radius:999px;padding:8px 17px;font-size:13.5px;font-weight:600;background:var(--surface);border:1px solid var(--border2)}
.wabtn.w{background:var(--gradlima);color:var(--tinta-sobre-verde);border-color:transparent}
.wabody{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:0}
.wacol{display:flex;flex-direction:column;min-height:0;padding:16px}
.wacol+.wacol{border-left:1px solid var(--border)}
.waempty{flex:1;display:grid;place-items:center;text-align:center}
.waempty svg{margin:0 auto 14px;color:var(--muted2)}
.waempty h4{margin:0 0 8px;font-size:17px;font-weight:700;line-height:1.3}
.waempty p{margin:0;font-size:12.5px;color:var(--muted)}
.waempty p u{cursor:pointer}
.wachips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.wachip{border:1px solid var(--border2);background:transparent;border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:500}
.wachip:hover{background:var(--surface2)}
.wainput{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px;min-height:88px;display:flex;flex-direction:column}
.wainput .ph2{color:var(--muted);font-size:13.5px;flex:1;outline:0}
.wainput .row{display:flex;align-items:center;margin-top:8px}
.wainput .row .send{margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--gradlima);color:var(--tinta-sobre-verde);display:grid;place-items:center}
.waedit{flex:1;font-size:13.5px;outline:0;overflow:auto;min-height:0}
.waedit:empty:before{content:attr(data-ph);color:var(--muted)}
.wafoot{display:flex;align-items:center;gap:9px;border-top:1px solid var(--border);padding-top:11px;margin-top:11px;font-size:12.5px;color:var(--muted)}
.wafoot .ring{width:15px;height:15px;border-radius:50%;border:2px solid var(--border2)}

/* ===== shared media library modal ===== */
.lib .mbox{width:min(1444px,100%);height:min(648px,calc(100vh - 44px))}
.libtop{display:flex;align-items:center;gap:10px;padding:13px 16px}
.libbody{flex:1;display:flex;min-height:0;border-top:1px solid var(--border)}
.libcv{flex:1;display:grid;place-items:center;text-align:center;padding:30px}
.libcv .fold{width:52px;height:52px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;margin:0 auto 13px}
.libcv h4{margin:0 0 7px;font-size:16px;font-weight:700}
.libcv p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.libpanel{width:178px;flex:0 0 178px;border-left:1px solid var(--border);padding:14px 12px;overflow-y:auto}

/* ===== audio page ===== */
.audiowrap{display:flex;gap:22px;padding:20px 22px 30px;min-height:100vh}
.audiomain{flex:1;min-width:0;background:#101012;border:1px solid var(--border);border-radius:16px;display:flex;flex-direction:column;padding:16px}
.audiomain .script{flex:1;font-size:14.5px;outline:0;min-height:240px}
.audiomain .script:empty:before{content:attr(data-ph);color:var(--muted)}
.helpme{margin-top:14px}
.helpme .lb2{font-size:12px;color:var(--muted);margin-bottom:9px}
.helpme .chips{display:flex;flex-wrap:wrap;gap:9px}
.hchip{display:inline-flex;align-items:center;gap:7px;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600}
.hchip:hover{background:var(--surface3)}
.audiobar{display:flex;align-items:center;gap:10px;border-top:1px solid var(--border);padding-top:13px;margin-top:14px;flex-wrap:wrap}
.audiobar .cc{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.audiobar .cc .ring{width:15px;height:15px;border-radius:50%;border:2px solid var(--border2)}
.audiobar .right{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.selpill{display:inline-flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:8px 13px;font-size:13px;font-weight:700;white-space:nowrap}
.selpill .k{color:var(--muted);font-weight:500;font-size:12.5px}
.genblue{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:9px 17px;font-size:13.5px;}
.audioside{width:405px;flex:0 0 405px;display:flex;flex-direction:column}
.sidetabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:14px}
.sidetabs button{flex:1;text-align:left;padding:11px 16px;font-size:13.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent}
.sidetabs button.on{background:rgba(255,255,255,.03)}
/* Writing Assistant panel is flat with a warm glow; only History is a bordered card */
.sidecard{flex:1;display:flex;flex-direction:column;padding:16px;min-height:300px}
#audioWA{background:radial-gradient(420px 240px at 50% 38%,rgba(180,120,60,.10),transparent 70%)}
#audioHist{background:#0e0e0e;border:1px solid var(--border);border-radius:14px;flex:0 0 245px;min-height:245px}

/* ===== extractor page ===== */
.extract{max-width:600px;margin:0 auto;padding:90px 20px;text-align:center}
.extract .ei{color:var(--text);margin:0 auto 16px}
.extract h2{font-size:22px;font-weight:700;margin:0 0 12px}
.extract p.sub{color:var(--muted2);font-size:15px;line-height:1.5;margin:0 0 26px}
.exbox{background:#1A1A1C;border-radius:16px;padding:16px;text-align:left;position:relative;min-height:150px;display:flex;flex-direction:column}
.exbox .ph3{flex:1;background:none;border:0;outline:0;resize:none;color:var(--text);font-family:inherit;font-size:13.5px;line-height:1.6;padding:0 44px 0 0;min-height:74px}
.exbox .ph3::placeholder{color:var(--muted)}
.exbox .up{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:var(--gradlima);color:var(--tinta-sobre-verde);display:grid;place-items:center;font-weight:700}
.exbox .selmedia{display:inline-flex;align-items:center;gap:7px;width:fit-content;background:var(--surface3);border-radius:8px;padding:5px 10px;color:var(--muted2);font-size:12px;margin-top:10px}
.exbox .selmedia:hover{color:var(--text);background:var(--border2)}

/* ===== upscaler / product / hero-card apps ===== */
.herocard{max-width:990px;margin:40px auto;background:#0F0F11;border:1px solid var(--border);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.herocard .l2{padding:46px 34px}

/* upscaler: the same picture, soft on the left half and sharp on the right */
.cmphalf{position:absolute;inset:0}
.cmphalf.soft{filter:blur(5px) saturate(.85);clip-path:inset(0 50% 0 0);animation:sweepClip 5s ease-in-out infinite alternate}
.cmphalf.sharp{clip-path:inset(0 0 0 50%);animation:sweepClip2 5s ease-in-out infinite alternate}
@keyframes sweepClip{from{clip-path:inset(0 72% 0 0)}to{clip-path:inset(0 28% 0 0)}}
@keyframes sweepClip2{from{clip-path:inset(0 0 0 28%)}to{clip-path:inset(0 0 0 72%)}}
.typew{display:inline-block;overflow:hidden;white-space:nowrap;border-right:7px solid var(--lima);animation:typing 4.5s steps(36) infinite,caret .8s step-end infinite}
@keyframes typing{0%{width:0}60%,100%{width:15.5em}}
@keyframes caret{50%{border-color:transparent}}
.herocard .idrow{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.herocard .idrow .sq2{width:32px;height:32px;border-radius:9px;background:var(--surface2);display:grid;place-items:center}
.herocard .idrow b{font-size:16px;font-weight:700}
.herocard h2{font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0 0 18px}
.herocard p.d2{color:var(--muted2);font-size:15px;line-height:1.55;margin:0 0 24px}
.herodrop{background:var(--surface);border:1px dashed var(--border2);border-radius:14px;padding:16px}
.herodrop .bluebtn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--gradlima);color:var(--tinta-sobre-verde);border-radius:10px;padding:10px;font-size:14px;font-weight:700}
.herodrop .bluebtn:hover{filter:brightness(1.06)}
.herodrop small{display:block;text-align:center;color:var(--dim);font-size:12px;margin-top:10px}
.herocard .r2{position:relative;min-height:340px;overflow:hidden}
.herocard .r2 .bd{position:absolute;top:14px;font-size:11px;font-weight:600;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);padding:4px 10px;border-radius:999px;z-index:3}
.herocard .r2 .divider{position:absolute;top:0;bottom:0;width:3px;background:var(--lima);left:50%;z-index:2;animation:sweep 5s ease-in-out infinite alternate}
.herocard .r2 .divider:after{content:"";position:absolute;top:50%;left:-2px;transform:translateY(-50%);width:7px;height:42px;border-radius:99px;background:#3b82f6}
@keyframes sweep{from{left:28%}to{left:72%}}
.herocard .r2 .feat{position:absolute;left:18px;bottom:16px;z-index:3}
.herocard .r2 .feat small{display:block;color:var(--muted2);font-size:12px;margin-bottom:4px}
.herocard .r2 .feat b{font-size:15px;font-weight:700}
.herotiles{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
/* masonry gallery */
.masonry2{columns:5;column-gap:12px;padding:0 24px 50px;max-width:1240px;margin:0 auto}
.masonry2 .m{break-inside:avoid;margin-bottom:12px;border-radius:12px;position:relative;overflow:hidden;border:1px solid var(--border)}
.masonry2 .m .bdg2{position:absolute;left:9px;bottom:9px;font-size:10.5px;font-weight:600;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);padding:3px 9px;border-radius:6px}
.masonry2 .m .rmx2{position:absolute;left:9px;bottom:9px;font-size:10.5px;font-weight:600;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);padding:3px 11px;border-radius:6px;opacity:0;transition:opacity .15s}
.masonry2 .m:hover .rmx2{opacity:1}
.masonry2 .m:hover .bdg2{opacity:0}
@media(max-width:1000px){.masonry2{columns:3}}
@media(max-width:620px){.masonry2{columns:2}}

/* ===== image editor ===== */
.edwrap{display:flex;min-height:100vh}
.edcanvas{flex:1;display:grid;place-items:center;text-align:center;padding:40px 20px}
.edcanvas .sq3{width:70px;height:70px;border-radius:16px;background:var(--surface2);display:grid;place-items:center;margin:0 auto 18px}
.edcanvas h3{margin:0 0 8px;font-size:18px;font-weight:700}
.edcanvas p{margin:0 0 22px;color:var(--muted);font-size:13.5px}
.edcanvas .bluebtn{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--gradlima);color:var(--tinta-sobre-verde);border-radius:999px;padding:11px 22px;font-size:14px;font-weight:700;min-width:250px;margin:0 auto 11px}
.edcanvas .outlinebtn{display:flex;align-items:center;justify-content:center;gap:9px;background:transparent;border:1px solid var(--lima2);border-radius:999px;padding:11px 22px;font-size:14px;font-weight:700;min-width:250px;margin:0 auto}
.edpanel{width:295px;flex:0 0 295px;border-left:1px solid var(--border);background:var(--panel);padding:12px 10px}
.edrow{display:flex;align-items:center;gap:11px;height:48px;padding:0 11px;border-radius:9px;color:var(--muted);font-size:13.5px;font-weight:500;cursor:not-allowed}
.edrow .car2{margin-left:auto;opacity:.6}

/* ===== photo packs ===== */
.packs{max-width:1180px;margin:0 auto;padding:34px 24px 60px}
.packs h2{text-align:center;font-size:26px;font-weight:700;margin:0 0 8px}
.packs .sub2{text-align:center;color:var(--muted);font-size:14px;line-height:1.55;margin:0 auto 24px;max-width:560px}
.packbar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.packbar .sr2{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px;color:var(--dim);font-size:13px;width:230px}
.packbar .sr2 input{flex:1;background:none;border:0;outline:0;color:var(--text);font-family:inherit;font-size:13px;min-width:0}
.packbar .sr2 input::placeholder{color:var(--dim)}
.packrow{margin-bottom:30px}
.packrow .ph4{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;margin-bottom:12px}
.packgrid{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px}
.packcard{flex:0 0 296px;aspect-ratio:1/1;border-radius:12px;position:relative;overflow:hidden;border:1px solid var(--border)}
.packcard .ov{position:absolute;inset:auto 0 0 0;padding:14px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.88))}
.packcard .ovrow{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.packcard .cat{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:6px;flex:0 0 auto;color:var(--tinta-sobre-verde)}
.packcard .tt{font-size:14.5px;font-weight:700}
.packcard .dd2{font-size:12px;color:var(--muted2);line-height:1.4}

/* ===== account settings ===== */
.acctwrap{display:flex;gap:34px;padding:34px 30px 60px;max-width:1180px}
.acctnav{width:180px;flex:0 0 180px}
.acctnav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:var(--muted);font-size:13.5px;font-weight:600;margin-bottom:3px}
.acctnav a:hover{background:var(--surface)}
.acctnav a.on{background:var(--surface2);color:var(--text)}
.acctmain{flex:1;min-width:0}
.acctmain h1{font-size:26px;font-weight:700;margin:0 0 22px}
.card2{background:#0c0c0c;border:1px solid var(--border);border-radius:14px;margin-bottom:16px;overflow:hidden}
.card2 .hd{padding:16px 18px 0;font-size:15px;font-weight:700}
.card2 .bd2{padding:16px 18px}
.card2 .ft{display:flex;align-items:center;gap:12px;padding:13px 18px;border-top:1px solid var(--border);font-size:12.5px;color:var(--muted)}
.card2 .ft .b2{margin-left:auto;border-radius:9px;padding:7px 14px;font-size:12.5px;font-weight:700}
.card2 .ft .b2.red{background:var(--err);color:var(--text)}
.seg3{display:flex;gap:9px}
.seg3 button{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px;font-size:13.5px;font-weight:600;color:var(--muted2)}
.seg3 button.on{background:color-mix(in srgb,var(--verde-cocuyo) 14%,transparent);border-color:var(--lima2);color:var(--lima)}
.kv{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border);font-size:13.5px}
.kv:first-child{border-top:0}
.kv .k2{color:var(--dim);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;min-width:110px}
.kv .v2{color:var(--text);font-weight:400;margin-left:auto;text-align:right}
.kv .ed{color:var(--muted);margin-left:10px}
.acctnav h1{font-size:24px;font-weight:700;margin:0 0 18px;padding-left:12px}
.acctmain h1{display:none}
.emptybox{border:1px solid var(--border);border-radius:12px;padding:34px 20px;text-align:center}
.emptybox b{display:block;font-size:14.5px;margin-bottom:6px}
.emptybox span{font-size:13px;color:var(--muted);line-height:1.5}
.emptybox u{cursor:pointer}
.notif{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-top:1px solid var(--border)}
.notif:first-child{border-top:0}
.notif .tx{flex:1}
.notif .tx b{display:block;font-size:13.5px;font-weight:600}
.notif .tx small{display:block;color:var(--dim);font-size:12px;margin-top:3px}
.notif .en{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:7px 13px;font-size:12.5px;font-weight:600}
.statrow{display:flex;gap:12px;margin:14px 0}
.statrow .st2{flex:1;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:16px}
.statrow .st2 b{display:block;font-size:22px;font-weight:700}
.statrow .st2 small{color:var(--muted);font-size:12px}
.progressbar{height:7px;border-radius:99px;background:var(--surface3);overflow:hidden;margin:10px 0 4px}
.progressbar i{display:block;height:100%;width:100%;background:var(--err)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.stepbox{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:11px;display:flex;gap:13px}
.stepbox .cn{width:26px;height:26px;border-radius:50%;background:var(--surface3);display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:0 0 26px}
.stepbox b{display:block;font-size:13.5px;margin-bottom:4px}
.stepbox p{margin:0 0 10px;font-size:12.5px;color:var(--muted);line-height:1.5}
.copyrow{display:flex;align-items:center;gap:9px;background:#000;border:1px solid var(--border);border-radius:9px;padding:8px 11px}
.copyrow .mono{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted2)}
.copyrow .cp{background:var(--text);color:var(--panel);border-radius:7px;padding:5px 11px;font-size:12px;font-weight:700}
.badge2{background:rgba(168,85,247,.2);color:#d8b4fe;font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px}

.jobcard{background:var(--surface);border:1px solid var(--border);border-radius:14px;}
.jhead{display:flex;align-items:center;gap:10px;font-size:13.5px}
.jhead b{font-weight:700}
.jmeta{color:var(--muted);font-size:12px}
.jx{margin-left:auto;color:var(--dim);cursor:pointer;padding:2px 6px;border-radius:6px}
.jx:hover{background:var(--surface2);color:var(--text)}
.jprompt{color:var(--muted2);font-size:12.5px;margin:7px 0 0;line-height:1.45;word-break:break-word}
.jerr{color:#fca5a5;font-size:12.5px;margin-top:8px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-radius:9px;padding:8px 11px}
.jmedia{margin-top:11px;display:grid;gap:10px}
.jmedia.two{grid-template-columns:1fr 1fr}
.jacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.jbtn{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--muted2);cursor:pointer}
.jbtn:hover{background:var(--surface3);}
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;width:100%;padding:16px;align-self:start}
.attchip .k{position:absolute;left:5px;bottom:5px;font-size:9px;font-weight:700;background:rgba(0,0,0,.65);padding:1px 6px;border-radius:5px;text-transform:uppercase}
.attchip.up{color:var(--muted);font-size:10px}
.mobbtn{display:none}
@media(max-width:900px){
  .side{position:fixed;left:0;top:0;z-index:80;transform:translateX(-100%);transition:transform .25s}
  .side.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.55)}
  .mobbtn{display:grid;position:absolute;top:14px;left:16px;z-index:20}
  .refgrid{grid-template-columns:repeat(2,1fr)}
  .wrap{padding:22px 14px 60px}
  .libside{display:none}
}

/* ============ PIEL COCUYO (Lime Frost) ============
   (P0.2) Esta capa tenía su propio :root con negros VERDOSOS (#070A06…) y
   dos limas rivales de épocas anteriores. Los tokens viven ahora solo en la
   raíz canónica de arriba; aquí quedan las reglas de componente, ya
   colgadas de var(--verde-cocuyo) y de la escala del abismo. */
.fly{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--verde-cocuyo) 75%,transparent))}
.annc{background:linear-gradient(90deg,var(--panel),var(--acento-fondo) 55%,var(--panel));color:var(--lima-clara)}
.annc .new{background:color-mix(in srgb,var(--verde-cocuyo) 22%,transparent);color:var(--lima-clara)}
.navlist a.active{color:var(--lima-clara);}
.btnblue{font-weight:800;border:0}
.upgbtn{border-color:color-mix(in srgb,var(--verde-cocuyo) 40%,transparent);background:color-mix(in srgb,var(--verde-cocuyo) 8%,transparent);color:var(--lima-clara)}
.diamond{border-color:color-mix(in srgb,var(--verde-cocuyo) 40%,transparent);background:color-mix(in srgb,var(--verde-cocuyo) 8%,transparent);color:var(--lima-clara)}
.acct .av{background:var(--gradlima);color:var(--tinta-sobre-verde);font-weight:800}
.avatar{background:var(--gradlima);color:var(--tinta-sobre-verde)}
.roundbtn{background:var(--gradlima);color:var(--tinta-sobre-verde);position:relative;box-shadow:0 0 14px color-mix(in srgb,var(--verde-cocuyo) 45%,transparent)}
.roundbtn:hover{box-shadow:0 0 26px color-mix(in srgb,var(--verde-cocuyo) 70%,transparent),0 0 0 5px color-mix(in srgb,var(--verde-cocuyo) 15%,transparent)}
.roundbtn:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--verde-cocuyo) 35%,transparent);animation:pulso 2.2s ease-out infinite}
@keyframes pulso{0%{transform:scale(.9);opacity:.9}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.genblue{background:var(--gradlima);color:var(--tinta-sobre-verde);font-weight:800}
.genbtn{background:var(--gradlima);color:var(--tinta-sobre-verde);font-weight:800}
.genbtn:hover{background:var(--gradlima);box-shadow:0 0 20px color-mix(in srgb,var(--verde-cocuyo) 40%,transparent)}
.promptbox,.composer{border-color:var(--border);box-shadow:0 24px 60px -22px rgba(0,0,0,.8),0 0 0 1px color-mix(in srgb,var(--verde-cocuyo) 6%,transparent)}
.composer:focus-within{box-shadow:0 24px 60px -22px rgba(0,0,0,.8),0 0 0 1.5px color-mix(in srgb,var(--verde-cocuyo) 40%,transparent),0 0 34px -6px color-mix(in srgb,var(--verde-cocuyo) 25%,transparent)}
.pilltabs button.active,.modesw button.active{background:var(--gradlima);color:var(--tinta-sobre-verde);font-weight:800}
.apptabs button.on,.libtabs button.active,.segbtn.on{background:color-mix(in srgb,var(--verde-cocuyo) 16%,transparent);color:var(--lima-clara)}
.sidetabs button.on{color:var(--lima-clara);border-bottom-color:var(--lima)}
.libnav a.active{background:var(--lima-suave);color:var(--lima-clara)}
.modelmenu .mi.sel .chk,.grpitems .gi.sel .chk{color:var(--lima)}
.mrow.sel{background:color-mix(in srgb,var(--verde-cocuyo) 7%,transparent)}
.sw.on{background:var(--lima2)}
.jbtn:hover{background:color-mix(in srgb,var(--verde-cocuyo) 14%,transparent);color:var(--lima-clara);border-color:color-mix(in srgb,var(--verde-cocuyo) 35%,transparent)}
.hchip.ai{border-color:var(--lima2);color:var(--lima-clara)}
.badge-new{color:var(--lima-clara);background:color-mix(in srgb,var(--verde-cocuyo) 12%,transparent);border-color:color-mix(in srgb,var(--verde-cocuyo) 30%,transparent)}
.exhero .eyeb{color:var(--verde-cocuyo)}
.creditcard{background:linear-gradient(180deg,color-mix(in srgb,var(--verde-cocuyo) 10%,transparent),var(--surface))}
.creditcard .bar i{background:var(--gradlima)}
.tag.video{background:color-mix(in srgb,var(--verde-cocuyo) 16%,transparent);color:var(--lima-clara)}
.tag.image{background:rgba(255,194,75,.16);color:#F4CE85}
.slidewrap input{accent-color:var(--lima2)}
.ptool .sq{background:var(--gradlima);color:var(--tinta-sobre-verde)}
.ptool .sq.alt{background:var(--surface3);color:var(--text)}
.herodrop .bluebtn,.edcanvas .bluebtn{background:var(--gradlima);color:var(--tinta-sobre-verde);font-weight:800}
.edcanvas .outlinebtn{border-color:color-mix(in srgb,var(--verde-cocuyo) 50%,transparent);color:var(--lima-clara)}
.packcard .cat{background:var(--lima2)}
.btn.grad{background:var(--gradlima);color:var(--tinta-sobre-verde);font-weight:800}
.exbtns .w{background:var(--gradlima);color:var(--tinta-sobre-verde)}
.libbtn.w{background:var(--gradlima);color:var(--tinta-sobre-verde);border-color:transparent;font-weight:800}
.libbtn.on{background:var(--lima2);border-color:var(--lima2)}
.jobcard{border-color:var(--border)}
.card2 .ft .b2{background:var(--gradlima);color:var(--tinta-sobre-verde)}
/* modal de packs de creditos */
.paypack{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:14px;margin-bottom:10px;cursor:pointer}
.paypack:hover{border-color:color-mix(in srgb,var(--verde-cocuyo) 50%,transparent);background:color-mix(in srgb,var(--verde-cocuyo) 6%,transparent)}
.paypack b{font-size:16px}


/* ===== fx:fireflies ===== */
/* fx-fireflies: fondo de luciérnagas (cocuyos) para Cocuyo Estudio */
.fx-fireflies{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  display:block;
  /* vignette sutil que funde el efecto con el fondo #070A06 */
  background:
    radial-gradient(120% 90% at 50% 110%, color-mix(in srgb,var(--verde-cocuyo) 5%,transparent), transparent 60%),
    transparent;
}
/* el contenido de la app debe quedar por encima */
.fx-fireflies-content{
  position:relative;
  z-index:1;
}
@media (prefers-reduced-motion: reduce){
  .fx-fireflies{ opacity:.5; }
}

/* ===== fx:borderbeam ===== */
/* ===========================================================
   fx-beam — haz de luz lima recorriendo el borde de tarjetas
   Basado en "Border Beam" (Magic UI). Solo CSS, sin JS.
   Requiere que la tarjeta tenga position:relative y border-radius.
   =========================================================== */

/* Angulo registrado para que el conic-gradient rote suave */
@property --fx-beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.fx-beam,
.fx-beam-hot {
  position: relative;          /* refuerzo; las tarjetas ya lo tienen */
  isolation: isolate;
}

/* Anillo comun: se pinta SOLO el grosor del borde via mask xor */
.fx-beam::after,
.fx-beam-hot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--fx-beam-w, 1.5px);          /* grosor del haz */
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  animation: fx-beam-spin var(--fx-beam-t, 8s) linear infinite;
  will-change: background;
}

/* Variante SUTIL (tarjetas normales): cometa corto, discreto */
.fx-beam::after {
  background: conic-gradient(
    from var(--fx-beam-angle),
    transparent 0deg,
    transparent 300deg,
    rgba(143, 224, 58, 0.0) 306deg,
    rgba(143, 224, 58, 0.45) 332deg,   /* cola (--lima2) */
    var(--lima) 352deg,                 /* cuerpo */
    rgba(228, 255, 143, 0.9) 358deg,    /* cabeza brillante */
    transparent 360deg
  );
}

/* Variante INTENSA (1 elemento protagonista): arco largo,
   cabeza calida y glow real alrededor del haz */
.fx-beam-hot {
  --fx-beam-w: 2px;
  --fx-beam-t: 5s;
}
.fx-beam-hot::after {
  background: conic-gradient(
    from var(--fx-beam-angle),
    transparent 0deg,
    transparent 240deg,
    rgba(127, 191, 31, 0.0) 246deg,
    rgba(127, 191, 31, 0.5) 290deg,     /* cola larga */
    var(--lima2) 322deg,
    var(--lima) 344deg,
    var(--lima-clara) 354deg,                     /* cabeza lima clara */
    var(--ambar) 358deg,                /* chispa ambar en punta */
    transparent 360deg
  );
  filter: drop-shadow(0 0 6px color-mix(in srgb,var(--verde-cocuyo) 55%,transparent))
          drop-shadow(0 0 18px color-mix(in srgb,var(--verde-cocuyo) 25%,transparent));
}

/* Halo ambiente fijo para el protagonista (muy leve) */
.fx-beam-hot::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--verde-cocuyo) 12%,transparent),
              0 0 32px color-mix(in srgb,var(--verde-cocuyo) 8%,transparent);
}

@keyframes fx-beam-spin {
  to { --fx-beam-angle: 360deg; }
}

/* Accesibilidad: sin movimiento, queda un anillo estatico tenue */
@media (prefers-reduced-motion: reduce) {
  .fx-beam::after,
  .fx-beam-hot::after {
    animation: none;
    background: color-mix(in srgb,var(--verde-cocuyo) 25%,transparent);
    filter: none;
  }
}

/* ===== fx:shimmer ===== */
/* FX SHIMMER — destello diagonal + press. Base: Magic UI "Shimmer Button" (dillionverma).
   Se aplica ENCIMA del boton lima existente (.btnblue/.roundbtn) sin tocar sus colores. */
.fx-shimmer{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  transform:translateZ(0);
  transition:transform .16s cubic-bezier(.2,.9,.3,1.3), box-shadow .3s ease;
  will-change:transform;
}

/* Destello diagonal que cruza el boton */
.fx-shimmer::before{
  content:"";
  position:absolute;
  top:-60%; bottom:-60%;
  left:-30%; width:38%;
  transform:skewX(-20deg) translateX(-260%);
  background:linear-gradient(90deg,
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,.45) 40%,
    var(--lima-clara)               50%,   /* punta clara de var(--gradlima) */
    rgba(255,255,255,.45) 60%,
    rgba(255,255,255,0)   100%);
  filter:blur(2px);
  mix-blend-mode:overlay;        /* abrillanta el lima sin lavarlo */
  pointer-events:none;
  z-index:1;
}

@keyframes fx-shimmer-slide{
  0%   { transform:skewX(-20deg) translateX(-260%); }
  55%  { transform:skewX(-20deg) translateX(420%); }
  100% { transform:skewX(-20deg) translateX(420%); } /* pausa entre pasadas */
}

/* Brillo interior inferior (highlight del original de Magic UI) */
.fx-shimmer::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:inset 0 -8px 10px rgba(255,255,255,.14);
  transition:box-shadow .3s ease;
  pointer-events:none;
  z-index:2;
}
.fx-shimmer:hover::after{ box-shadow:inset 0 -6px 10px rgba(255,255,255,.28); }
.fx-shimmer:active::after{ box-shadow:inset 0 -10px 10px rgba(255,255,255,.30); }

/* Halo lima en hover (usa la variable de la app) */
.fx-shimmer:hover{
  box-shadow:
    0 0 16px color-mix(in srgb, var(--lima) 40%, transparent),
    0 0 40px color-mix(in srgb, var(--lima2) 20%, transparent);
}

/* Micro-interaccion press */
.fx-shimmer:active{
  transform:scale(.96) translateY(1px);
  transition-duration:.08s;
}

/* Variante: destello solo al pasar el raton (una sola pasada) */
.fx-shimmer--hover::before{ animation:none; opacity:0; }
.fx-shimmer--hover:hover::before{
  opacity:1;
  animation:fx-shimmer-slide 1.1s cubic-bezier(.55,.1,.35,.9) 1 both;
}

/* Accesibilidad / rendimiento */
@media (prefers-reduced-motion: reduce){
  .fx-shimmer::before{ animation:none; opacity:0; }
}

/* ===== fx:textfx ===== */
/* fx-titulo: gradiente lima-ambar-lima animado sobre el texto */
.fx-titulo{
  position: relative;
  display: inline-block;
  color: var(--lima); /* fallback si no hay background-clip:text */
  background-image: linear-gradient(90deg,
    var(--lima-clara) 0%,
    var(--lima) 20%,
    var(--ambar) 45%,
    var(--lima2) 70%,
    var(--lima-clara) 100%); /* mismo color en ambos extremos = bucle sin saltos */
  background-size: 300% 100%;
  animation: fx-grad-flow 9s linear infinite;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .fx-titulo{
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
@keyframes fx-grad-flow{
  to{ background-position: 300% 0; }
}

/* fx-sparkle: 2-3 destellos twinkle alrededor del titular (CSS only) */
.fx-sparkle{
  position: relative;
  display: inline-block;
  --fx-star: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'><path d='M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z' fill='black'/></svg>");
}
.fx-sparkle::before,
.fx-sparkle::after,
.fx-sparkle .fx-sparkle-dot{
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
  background: var(--lima);
  -webkit-mask: var(--fx-star) center / contain no-repeat;
  mask: var(--fx-star) center / contain no-repeat;
  opacity: 0;
  animation: fx-twinkle 2.4s ease-in-out infinite;
  will-change: transform, opacity;
}
.fx-sparkle::before{
  width: .55em; height: .55em;
  top: -.38em; left: -.5em;
}
.fx-sparkle::after{
  width: .38em; height: .38em;
  top: -.1em; right: -.55em;
  background: var(--ambar);
  animation-delay: .9s;
  animation-duration: 2.8s;
}
.fx-sparkle .fx-sparkle-dot{
  width: .3em; height: .3em;
  bottom: -.2em; left: 32%;
  background: var(--lima2);
  animation-delay: 1.5s;
  animation-duration: 3.2s;
}
@keyframes fx-twinkle{
  0%, 100%{ opacity: 0; transform: scale(0) rotate(75deg); }
  50%{ opacity: 1; transform: scale(1) rotate(120deg); }
}

/* accesibilidad: sin movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .fx-titulo{ animation: none; background-position: 50% 0; }
  .fx-sparkle::before,
  .fx-sparkle::after,
  .fx-sparkle .fx-sparkle-dot{
    animation: none; opacity: .55; transform: scale(.8) rotate(105deg);
  }
}

/* ===== fx:spotlight ===== */
/* FX spotlight: glow lima que sigue al raton (aplicar clase .fx-spot a cualquier tarjeta) */
.fx-spot{
  position:relative;
  --fx-mx:50%;
  --fx-my:50%;
}
/* halo interior en el punto del cursor */
.fx-spot::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(230px circle at var(--fx-mx) var(--fx-my),
    color-mix(in srgb, var(--lima) 13%, transparent),
    color-mix(in srgb, var(--lima2) 5%, transparent) 45%,
    transparent 70%);
  opacity:0;
  transition:opacity .45s ease;
}
/* anillo de borde iluminado (mascara: solo pinta el filo de 1px) */
.fx-spot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  background:radial-gradient(300px circle at var(--fx-mx) var(--fx-my),
    var(--lima), var(--ambar) 40%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  transition:opacity .45s ease;
}
.fx-spot:hover::before,
.fx-spot:focus-within::before{ opacity:1; }
.fx-spot:hover::after,
.fx-spot:focus-within::after{ opacity:.5; }
@media (prefers-reduced-motion: reduce){
  .fx-spot::before,
  .fx-spot::after{ transition:none; }
}

/* ===== fx:reveal ===== */
/* fx-in: entrada con fade + subida 14px + blur leve (base: "Reveal" de asanshay) */
.fx-in{
  --fx-i: 0; /* indice de stagger (lo asigna el JS por hermanos, o ponlo a mano) */
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity   .6s cubic-bezier(.22,1,.36,1) calc(min(var(--fx-i), 8) * 90ms),
    transform .6s cubic-bezier(.22,1,.36,1) calc(min(var(--fx-i), 8) * 90ms),
    filter    .6s cubic-bezier(.22,1,.36,1) calc(min(var(--fx-i), 8) * 90ms);
}
.fx-in.fx-show{
  opacity: 1;
  transform: none;
  filter: none;
}
/* variante opcional para destacar titulares con la lima al entrar */
.fx-in.fx-glow.fx-show{
  text-shadow: 0 0 24px color-mix(in srgb, var(--lima) 35%, transparent);
}
@media (prefers-reduced-motion: reduce){
  .fx-in{
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ============ EL TALLER: la Mesa (consola fija) + el Muro ============ */
.fx-fireflies{z-index:0}
.app,.annc{position:relative;z-index:1}
#mesa{position:fixed;left:var(--side);right:0;bottom:0;z-index:55;display:flex;justify-content:center;padding:0 22px calc(16px + env(safe-area-inset-bottom));pointer-events:none}
.mesa-in{pointer-events:auto;width:min(900px,100%);background:color-mix(in srgb,var(--negro-abismo) 86%,transparent);backdrop-filter:blur(22px);border:1px solid color-mix(in srgb,var(--verde-cocuyo) 15%,transparent);border-radius:22px;padding:10px 14px 12px;box-shadow:0 -14px 60px rgba(0,0,0,.65)}
/* 4-sep-2026 (Listillo Diseño): a ~1050px la fila de apps (Ideas de vídeo,
   Lip Sync, Motion Sync) no cabía junto al conmutador y se cortaba con un
   desplazamiento invisible. En escritorio la fila pasa a envolver: si no cabe
   al lado, baja a su propia línea y los chips se reparten. En móvil (≤900)
   se conserva la tira deslizable, que es lo natural con el pulgar. */
.mesa-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 10px;margin-bottom:2px}
.mesa-top .modesw{margin:0;display:flex;justify-content:flex-start;flex:0 0 auto}
.mesa-top .modesw .inner{border-radius:11px;padding:3px}
.mesa-top .modesw button{padding:6px 13px;font-size:13px}
.mesa-top .apps{margin:0;justify-content:flex-start;flex-wrap:wrap;gap:8px;flex:1 1 auto;min-width:0}
.mesa-top .appbtn{padding:6px 12px;font-size:12.5px;flex:0 0 auto}
@media(max-width:900px){
  .mesa-top{flex-wrap:nowrap;gap:10px}
  .mesa-top .apps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1 1 0}
  .mesa-top .apps::-webkit-scrollbar{display:none}
}
.mesa-in .composer{background:transparent;border:0;box-shadow:none;padding:4px 2px 0;max-width:none}
.mesa-in .composer:focus-within{box-shadow:none}
.mesa-in .quickrow{margin-top:8px;justify-content:flex-start}
#pg-home .title{text-align:left;margin:10px 0 4px}
.muro-sub{margin:0 0 18px}
#genwrap{max-width:none!important;margin-top:4px!important}
#genout{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));align-items:start}
.jobcard{margin-bottom:0}
#genstatus:empty{display:none!important}
#genstatus{grid-column:1/-1;position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:70;max-width:min(92vw,560px);box-shadow:0 8px 30px rgba(0,0,0,.45)}
@media(max-width:900px){#mesa{left:0;padding:0 10px calc(10px + env(safe-area-inset-bottom))}}


/* ================= LUJO: capa premium ================= */
/* tipografia display: Fraunces SOLO en el titular de cartel (h1). El resto
   de la interfaz —h2, h3, nombres, precios, la marca— va en Geist (P0.2). */
h1,.title,.hello,.acctmain h1,.acctnav h1{font-family:var(--display)}
#pg-home .title{letter-spacing:-.02em;}
.muro-sub{text-transform:uppercase;letter-spacing:.16em;color:var(--dim)}
body{font-variant-numeric:tabular-nums}

/* grano de pelicula (textura cara) */
body::after{content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}

/* aurora ambiental muy lenta detras de todo */
.fx-aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;}
.fx-aurora i{position:absolute;border-radius:50%}
.fx-aurora i:nth-child(1){width:44vw;height:34vw;left:8%;top:-6%;background:radial-gradient(closest-side,color-mix(in srgb,var(--verde-cocuyo) 14%,transparent),transparent 70%);animation:fx-au1 26s ease-in-out infinite alternate}
.fx-aurora i:nth-child(2){width:36vw;height:30vw;right:4%;top:22%;background:radial-gradient(closest-side,rgba(255,194,75,.10),transparent 70%);animation:fx-au2 32s ease-in-out infinite alternate}
.fx-aurora i:nth-child(3){width:30vw;height:26vw;left:34%;bottom:-8%;background:radial-gradient(closest-side,rgba(127,191,31,.10),transparent 70%);animation:fx-au1 38s ease-in-out infinite alternate-reverse}
@keyframes fx-au1{to{transform:translate(6vw,4vh) scale(1.12)}}
@keyframes fx-au2{to{transform:translate(-5vw,6vh) scale(.92)}}
@media(prefers-reduced-motion:reduce){.fx-aurora i{animation:none}}

/* luz de canto (hairline superior) en superficies */
.jobcard,.tcard .thumb,.tool,.card2,.mesa-in,.accmenu,.modelmenu,.pop,.mbox,.excard,.paypack,.herocard,.plan,.card,.promptbox,.dd,.sidecard,.creditcard{
 box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 0 rgba(0,0,0,.4)}
.mesa-in{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 -18px 70px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--verde-cocuyo) 8%,transparent)}

/* profundidad al pasar: elevar con sombras por capas */
.jobcard,.tcard,.tool,.excard,.paypack,.plan,.card{transition:transform .28s cubic-bezier(.2,.8,.25,1),box-shadow .28s ease,border-color .28s ease}
/* Cuando GSAP lleva el hover de esta tarjeta (motion.js le pone .mot-hover),
   el CSS suelta el transform: si no, el navegador interpola ademas por su
   cuenta lo que GSAP escribe fotograma a fotograma y sale doble curva, con
   sensacion de goma. El borde y la sombra siguen siendo del CSS. Sin GSAP
   la clase no se pone y este :hover de siempre funciona igual. */
.excard.mot-hover{transition:box-shadow .28s ease,border-color .28s ease}
.excard.mot-hover:hover{transform:none}
.jobcard:hover,.tool:hover,.excard:hover,.paypack:hover{transform:translateY(-3px);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 14px rgba(0,0,0,.35),0 24px 48px -12px rgba(0,0,0,.55)}
.tcard:hover{transform:translateY(-4px)}

/* botones lima con bisel interior (acabado joya) */
.btnblue,.genbtn,.genblue,.roundbtn,.btn.grad,.libbtn.w,.herodrop .bluebtn,.edcanvas .bluebtn,.plan .cta.grad,.btn.solid,.sendround{
 box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -8px 14px color-mix(in srgb,var(--tinta-sobre-verde) 28%,transparent),0 4px 14px rgba(0,0,0,.35),0 0 18px color-mix(in srgb,var(--verde-cocuyo) 25%,transparent)}

/* etiquetas en versalitas con tracking (detalle sastre) */
.lbl,.grouphead span,.mhead,.pop .ph,.dd .ph,.kv .k2,.fh span,.powered .lbl,.eyebrow{letter-spacing:.14em;text-transform:uppercase}

/* scrollbar fino y seleccion lima */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--border2)}

/* sidebar como panel de cristal */
.side{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 90%,transparent),color-mix(in srgb,var(--negro-abismo) 94%,transparent));backdrop-filter:blur(14px);}
.side .brand{font-size:19px;letter-spacing:-.01em}

/* anillo de foco elegante */
:focus-visible{outline:2px solid color-mix(in srgb,var(--verde-cocuyo) 60%,transparent);outline-offset:2px;border-radius:6px}

/* medios del muro con marco fino */
.jmedia video,.jmedia img{box-shadow:0 10px 34px -8px rgba(0,0,0,.6);border-color:color-mix(in srgb,var(--verde-cocuyo) 12%,transparent)!important}

/* modal de modelos: cabecera cristal */
.mbox{background:linear-gradient(180deg,var(--surface),var(--panel));backdrop-filter:blur(8px)}

/* saldo con brillo ambar */
.acct .cr{color:var(--ambar)}

/* ================= LA BOVEDA ================= */
#pg-library .libmain{display:block}
#pg-library .libcanvas{display:block;padding:0;place-items:stretch;text-align:left;align-self:stretch}
#pg-library .libside{display:none}
.bv-barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;flex-wrap:wrap;
 background:color-mix(in srgb,var(--negro-abismo) 86%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.bv-segs{display:inline-flex;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:3px}
.bv-seg{padding:7px 15px;border-radius:8px;font-size:13px;font-weight:700;color:var(--muted)}
.bv-seg.on{background:var(--gradlima);color:var(--tinta-sobre-verde)}
.bv-accion{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);
 border-radius:9px;padding:8px 13px;font-size:12.5px;font-weight:700;color:var(--muted2);transition:.16s}
.bv-accion:hover{border-color:color-mix(in srgb,var(--verde-cocuyo) 45%,transparent);color:var(--text)}
.bv-accion.viva{background:var(--gradlima);border-color:transparent;color:var(--tinta-sobre-verde)}
.bv-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);
 border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--muted2)}
.bv-chip.on{background:rgba(255,194,75,.16);border-color:rgba(255,194,75,.45);color:#F4CE85}
.bv-sel{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:8px 11px;
 color:var(--muted2);font-family:inherit;font-size:12.5px;outline:0}
.bv-busca{flex:1;min-width:170px;max-width:300px;background:var(--surface);border:1px solid var(--border);
 border-radius:9px;padding:9px 13px;color:var(--text);font-family:inherit;font-size:13px;outline:0}
.bv-busca:focus{border-color:color-mix(in srgb,var(--verde-cocuyo) 45%,transparent)}
.bv-cuenta{margin-left:auto;font-size:12px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.bv-dia{display:flex;align-items:baseline;gap:11px;position:sticky;top:63px;z-index:15;
 background:linear-gradient(180deg,color-mix(in srgb,var(--negro-abismo) 95%,transparent),color-mix(in srgb,var(--negro-abismo) 0%,transparent))}
.bv-dia span{font-family:var(--font);font-size:15px;font-weight:600}
.bv-dia span::first-letter{text-transform:uppercase}
.bv-dia i{font-style:normal;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.bv-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--bv-min,258px),1fr));}
.bv-tar{margin:0;cursor:pointer}
.bv-marco{position:relative;aspect-ratio:var(--ar,16/9);border-radius:14px;overflow:hidden;
 border:1px solid var(--border);background:var(--surface);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 10px rgba(0,0,0,.4);transition:.3s}
.bv-tar:hover .bv-marco{transform:translateY(-3px);
 }
.bv-med{width:100%;height:100%;display:block}
.bv-badge{position:absolute;left:9px;top:9px;font-size:10.5px;font-weight:700;background:rgba(0,0,0,.62);
 backdrop-filter:blur(6px);padding:3px 9px;border-radius:6px;letter-spacing:.03em}
.bv-fav{position:absolute;right:9px;top:9px;width:27px;height:27px;border-radius:50%;background:rgba(0,0,0,.55);
 backdrop-filter:blur(6px);color:var(--dim);font-size:14px;display:grid;place-items:center;opacity:0;transition:.2s}
.bv-tar:hover .bv-fav{opacity:1}
.bv-fav.on{opacity:1;color:#FFC24B;text-shadow:0 0 10px rgba(255,194,75,.6)}
.bv-acc{position:absolute;right:9px;bottom:9px;display:flex;gap:6px;opacity:0;transform:translateY(5px);transition:.22s}
.bv-tar:hover .bv-acc{opacity:1;transform:none}
.bv-b{width:29px;height:29px;border-radius:8px;background:rgba(0,0,0,.66);backdrop-filter:blur(8px);
 border:1px solid rgba(255,255,255,.1);color:var(--text);font-size:13px;display:grid;place-items:center;cursor:pointer}
.bv-b:hover{background:var(--gradlima);color:var(--tinta-sobre-verde);border-color:transparent}
.bv-tar figcaption{padding:9px 3px 0;display:flex;flex-direction:column;gap:2px}
.bv-tar figcaption b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bv-tar figcaption span{font-size:11.5px;color:var(--dim)}
/* vacio / cargando */
.bv-vacio{text-align:center;padding:90px 24px;max-width:460px;margin:0 auto}
.bv-icono{font-size:40px;margin-bottom:14px;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--verde-cocuyo) 40%,transparent))}
.bv-vacio h3{font-family:var(--display);font-size:21px;margin:0 0 9px}
.bv-vacio p{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 8px}
.bv-nota{font-size:12px!important;color:var(--dim)!important}
.bv-cta{display:inline-block;margin-top:16px;background:var(--gradlima);color:var(--tinta-sobre-verde);font-weight:800;
 border-radius:11px;padding:11px 22px;font-size:14px;cursor:pointer;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 18px color-mix(in srgb,var(--verde-cocuyo) 30%,transparent)}
.bv-cta2{background:var(--surface2);border:1px solid var(--border2);color:var(--muted2);border-radius:11px;
 padding:11px 22px;font-size:14px;font-weight:700;cursor:pointer}
.bv-cargando{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:15px;padding:22px}
.bv-esq{aspect-ratio:16/9;border-radius:14px;background:linear-gradient(100deg,var(--surface) 30%,var(--surface3) 50%,var(--surface) 70%);
 background-size:220% 100%;animation:bv-sh 1.4s linear infinite}
@keyframes bv-sh{to{background-position:-220% 0}}
/* visor */
.bv-visor{position:fixed;inset:0;z-index:300;background:color-mix(in srgb,var(--negro-abismo) 96%,transparent);backdrop-filter:blur(10px);
 display:none;align-items:stretch;justify-content:stretch;padding:0}
.bv-visor.on{display:flex}
.bv-vbox{display:grid;grid-template-columns:1fr 360px;gap:0;width:100%;height:100%;max-height:none;
 background:var(--panel);border:1px solid color-mix(in srgb,var(--verde-cocuyo) 16%,transparent);border-radius:18px;overflow:hidden;
 box-shadow:0 40px 100px -20px #000}
.bv-vmedia{position:relative;display:grid;place-items:center;background:var(--negro-abismo);min-height:0;overflow:auto}
.bv-vmedia img,.bv-vmedia video{max-width:100%;max-height:100%;display:block}
.bv-vinfo{padding:18px;overflow-y:auto;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:14px}
.bv-vtop{display:flex;align-items:center}
.bv-vtop b{font-family:var(--font);font-size:15px;font-weight:600}
.bv-vtop .bv-b{margin-left:auto}
.bv-vprompt{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:13px;
 font-size:13px;line-height:1.55;color:var(--muted2);max-height:190px;overflow:auto}
.bv-vdl{margin:0;display:flex;flex-direction:column;gap:0}
.bv-vdl>div{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid var(--border);font-size:12.5px}
.bv-vdl dt{color:var(--dim);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;margin:0}
.bv-vdl dd{margin:0;color:var(--text)}
.bv-vacts{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto}
/* Texto centrado en vertical (Descargar es un enlace y quedaba arriba) y sin
   partir «Copiar prompt»; con Editar/Rehacer la fila pasa a dos líneas. */
.bv-vacts .bv-cta,.bv-vacts .bv-cta2{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-align:center;white-space:nowrap;margin:0;padding:10px 8px}
@media(max-width:900px){.bv-vbox{grid-template-columns:1fr}.bv-vinfo{border-left:0;border-top:1px solid var(--border)}
 /* Móvil: la ficha se desplaza en vez de aplastar el prompt, las acciones
    quedan al alcance y Cerrar se ve arriba sin tener que bajar. */
 .bv-vbox{position:relative;grid-template-rows:minmax(0,1fr) minmax(0,46%)}
 .bv-vinfo>*{flex-shrink:0}
 .bv-vinfo{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
 .bv-vtop{padding-right:52px}
 .bv-vtop .bv-b[data-cerrar]{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:12;min-width:44px;min-height:44px}}

/* ================= CALMA: menos ruido, mejor letra =================
   (P0.2) CALMA redefinía aquí la paleta entera por tercera vez (negro puro,
   la lima de marca y los grises de tokens.css). Ese era el destino correcto, así que
   ahora es lo que declara la raíz canónica de arriba y este bloque ya no
   toca tokens: solo letra, aire y controles. El criterio CALMA de "la lima
   solo para acentos pequeños" SE CONSERVA. */
body{font-family:var(--font);
  background:radial-gradient(1100px 620px at 68% -12%,color-mix(in srgb,var(--verde-cocuyo) 3%,transparent),transparent 62%),var(--bg)}

/* --- tipografia: Fraunces solo en el CARTEL (h1 y los titulares de portada
   que hacen de cartel: el vacio de La Boveda y los heroes de Explorar);
   Geist, la letra de la casa, para todo lo demas (P0.2) --- */
h1,.title,.hello,.bv-vacio h3,.hist-nada b,
.herocard h2,.pricing h2,.love h2,.finalcta h2,h1.headline{
  font-family:var(--display);font-weight:400;letter-spacing:0;line-height:1.15;font-optical-sizing:auto}
h2,h3,.bv-dia span,.packs h2,.pick h2,.bv-vtop b{font-family:var(--font)}
#pg-home .title{font-size:34px;font-weight:400}
#pg-home .title em,.fx-titulo em{font-style:italic}
.brand{font-family:var(--font);font-weight:500;letter-spacing:-.02em;}
.acctnav h1,.acctmain h1{font-family:var(--display);font-weight:400}
.jhead b,.plan .name,.nm,.bv-tar figcaption b{font-family:var(--font);font-weight:500}
.plan .price .cur{font-family:var(--font);font-weight:500}

/* etiquetas: menos grito (fuera versalitas agresivas) */
.lbl,.grouphead span,.mhead,.pop .ph,.dd .ph,.kv .k2,.fh span,.powered .lbl,.eyebrow,
.muro-sub,.bv-cuenta,.bv-dia i,.bv-vdl dt{
  text-transform:none;letter-spacing:.01em;font-size:12px;color:var(--muted);font-weight:400}
.muro-sub{font-size:13.5px}
.bv-dia i{font-size:12px}

/* --- bajar el ruido de los efectos --- */
body::after{opacity:.022}                     /* grano casi invisible */
.fx-aurora{opacity:.26;filter:blur(110px)}    /* aurora mas tenue */
.fx-fireflies{opacity:.52}                     /* luciernagas discretas */
/* el haz que recorria la Mesa sin parar cansaba: se queda quieto */
.mesa-in.fx-beam-hot::after{animation:none;background:none}
.mesa-in.fx-beam-hot::before{box-shadow:0 0 0 1px color-mix(in srgb,var(--verde-cocuyo) 10%,transparent)}
.fx-beam::after{opacity:.4;--fx-beam-t:14s}
/* el destello de los botones solo al pasar por encima */
.fx-shimmer::before{animation:none;opacity:0}
.fx-shimmer:hover::before{opacity:1;animation:fx-shimmer-slide 1.1s cubic-bezier(.55,.1,.35,.9) 1 both}
/* glow contenido */
.roundbtn{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 12px color-mix(in srgb,var(--verde-cocuyo) 28%,transparent)}
.roundbtn:after{display:none}                  /* fuera el pulso constante */
.roundbtn:hover{transform:scale(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 20px color-mix(in srgb,var(--verde-cocuyo) 45%,transparent)}
.btnblue,.genbtn,.genblue,.btn.grad,.libbtn.w,.herodrop .bluebtn,.edcanvas .bluebtn,.plan .cta.grad,.btn.solid,.sendround,.bv-cta{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 2px 8px rgba(0,0,0,.3)}
.fx-spot::after{opacity:0!important}           /* sin anillo de borde al pasar */
.fx-spot:hover::before{opacity:.7}
.tcard:hover .thumb{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 34px -12px rgba(0,0,0,.5)}
.bv-tar:hover .bv-marco{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 34px -12px rgba(0,0,0,.55);
  border-color:color-mix(in srgb,var(--verde-cocuyo) 22%,transparent)}

/* --- aire: mas respiro entre cosas --- */
.wrap{padding:30px 28px 70px}
.bv-rejilla{gap:18px;padding:0 26px 10px}
.bv-barra{padding:15px 26px;gap:11px}
.bv-dia{padding:30px 26px 13px}
.railhead{margin:48px 0 16px;padding-top:30px}
.jobcard{padding:16px}
#genout{gap:18px}
.navlist a.active{font-weight:500;box-shadow:none;background:var(--lima-suave)}
.side{border-right:1px solid var(--border)}

/* --- iconos: trazo fino y uniforme --- */
.ic{stroke-width:1.75}
.ic.s14{stroke-width:1.9}
.navlist a .ic,.libnav a .ic{opacity:.85}
.navlist a.active .ic{opacity:1}

/* --- controles mas suaves --- */
.pilltabs button.active,.modesw button.active,.bv-seg.on{
  background:var(--surface3);color:var(--text);font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.modesw button.active .ic,.bv-seg.on{color:var(--lima)}
.pop .opt.sel{background:var(--lima-suave);color:var(--text);font-weight:500}
.pop .opt.sel small{color:var(--muted)}
.mrow.sel .radio{background:var(--lima2);border-color:var(--lima2);color:var(--tinta-sobre-verde)}
.upgbtn,.btnblue{font-weight:500}
.btnblue{background:var(--surface3);color:var(--lima);border:1px solid color-mix(in srgb,var(--verde-cocuyo) 25%,transparent);box-shadow:none}
.btnblue:hover{background:color-mix(in srgb,var(--verde-cocuyo) 12%,transparent);box-shadow:none;transform:none}
::selection{background:color-mix(in srgb,var(--verde-cocuyo) 70%,transparent);color:var(--tinta-sobre-verde)}

/* referencias */
.attchip{position:relative;border-radius:12px;overflow:hidden;
 border:1px solid var(--border);background:var(--surface2);display:block}
.attchip img{width:100%;height:100%;object-fit:cover}
.attico{display:grid;place-items:center;height:100%;font-size:20px;color:var(--muted2)}
.attchip .x{position:absolute;top:4px;right:4px;width:19px;height:19px;border-radius:50%;
 background:rgba(0,0,0,.72);color:var(--text);font-size:10px;display:grid;place-items:center;cursor:pointer;z-index:2}
.attchip .x:hover{background:#b91c1c}
.attrol,.attrolfijo{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.74);
 backdrop-filter:blur(6px);color:var(--text);border:0;font-family:inherit;
 text-align:center;cursor:pointer;outline:0;width:100%}
.attrol{appearance:none}
.attchip.up{display:grid;place-items:center}
.attspin{width:17px;height:17px;border:2px solid var(--border2);border-top-color:var(--lima);
 border-radius:50%;animation:rot 1s linear infinite}
.composer.arrastrando{border-color:var(--lima)!important;
 box-shadow:0 0 0 2px color-mix(in srgb,var(--verde-cocuyo) 35%,transparent),0 0 40px -8px color-mix(in srgb,var(--verde-cocuyo) 30%,transparent)!important}
.composer.arrastrando:after{content:attr(data-soltar);position:absolute;inset:0;display:grid;place-items:center;
 background:color-mix(in srgb,var(--negro-abismo) 82%,transparent);border-radius:16px;font-size:14px;color:var(--lima);z-index:5;pointer-events:none}
.refbox{cursor:pointer}
.refbox:after{content:"";position:absolute}

/* --- detalles finales --- */
.glifo{display:inline-flex;align-items:center;justify-content:center;vertical-align:-2px}
.glifo .ic{width:15px;height:15px}
.jhead .glifo .ic,.jmeta .glifo .ic{width:14px;height:14px}
.jbtn .glifo{margin-right:5px}
.jbtn .glifo .ic{width:14px;height:14px}
.railhead .lt .glifo .ic{width:17px;height:17px;color:var(--lima)}
.paypack>span .glifo .ic{width:19px;height:19px;color:var(--lima)}
.jx .glifo .ic,.x .glifo .ic{width:13px;height:13px}
.car .glifo .ic,.val .glifo .ic{width:14px;height:14px;opacity:.7}
.dots .glifo .ic{width:16px;height:16px}
/* nada debe quedar tapado por la Mesa cuando crece con referencias */
#pg-home .wrap{padding-bottom:calc(var(--mesa-h,250px) + 46px)}
/* el chip de referencia: etiqueta corta y legible */
.attrol,.attrolfijo{font-size:10px;padding:3px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attchip{width:82px;height:82px}

/* ================= movil ================= */
@media(max-width:640px){
  /* la etiqueta lateral se pisaba con el aviso del centro */
  .annc .all{display:none}
  .annc{font-size:11.5px;padding:0 32px;gap:7px}
  .annc .new{font-size:10px;padding:1px 6px}

  /* la Mesa se comia media pantalla */
  #mesa{padding:0 8px calc(8px + env(safe-area-inset-bottom))}
  .mesa-in{padding:9px 11px 10px;border-radius:18px;max-height:62vh;overflow-y:auto}
  .mesa-top{gap:7px}
  .mesa-top .modesw button{padding:5px 10px;font-size:12px}
  .mesa-top .appbtn{padding:5px 10px;font-size:11.5px}
  /* las cajas de referencia: de dos filas a una tira que se desliza */
  .refgrid{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin-bottom:10px;
    padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .refgrid::-webkit-scrollbar{display:none}
  /* la tira no debe pasar por debajo del lapiz y el boton de generar */
  .mesa-in .refgrid{margin-right:76px}
  .refbox{width:auto;height:38px;flex-direction:row;gap:7px;padding:0 13px;
    font-size:12px;border-radius:11px;white-space:nowrap}
  .refbox .ic{width:16px;height:16px}
  .parambar{flex-wrap:wrap;gap:1px;row-gap:5px;font-size:12px;padding-top:9px}
  .parambar .cost{margin-left:auto}
  .attchip{width:66px;height:66px}
  .attrow{gap:8px}
  #genout{grid-template-columns:1fr;gap:14px}
  .wrap{padding-left:13px;padding-right:13px}
  #pg-home .title{font-size:26px;line-height:1.2}
  .muro-sub{font-size:12.5px}
  .topright{top:10px;right:12px}
  .btnblue{font-size:12px;padding:7px 11px}
  .railhead{margin:34px 0 12px;padding-top:20px}
  /* la boveda tambien */
  .bv-rejilla{grid-template-columns:repeat(2,1fr);gap:12px;padding:0 13px 10px}
  .bv-barra{padding:12px 13px}
  .bv-dia{padding:22px 13px 10px}
}
@media(max-width:400px){
  .bv-rejilla{grid-template-columns:1fr}
  .mesa-top .modesw button span{display:none}
}

/* contador y lupa de referencias */
.attcuenta{align-self:center;font-size:11.5px;color:var(--dim);background:var(--surface2);
 border:1px solid var(--border);border-radius:9px;padding:5px 9px;white-space:nowrap;font-variant-numeric:tabular-nums}
.attcuenta.pasa{color:#F0B36B;border-color:rgba(233,190,115,.45);background:rgba(233,190,115,.09)}
.attver{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);
 opacity:0;transition:.16s;cursor:zoom-in;color:var(--text);z-index:1}
.attchip:hover .attver{opacity:1}
.attchip.med .attico .ic{width:22px;height:22px}
.attlupa{position:fixed;inset:0;z-index:300;background:rgba(6,9,5,.92);backdrop-filter:blur(10px);
 display:grid;place-items:center;padding:34px;cursor:zoom-out;animation:fadeIn .16s}
.attlupa img{max-width:100%;max-height:100%;border-radius:14px;border:1px solid var(--border2);
 box-shadow:0 30px 90px -30px rgba(0,0,0,.9)}
.attlupax{position:absolute;top:18px;right:20px;color:var(--muted2)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ================= SELECCION MULTIPLE ================= */
.jobcard,.bv-tar{position:relative}
/* 3-sep-2026: sin esto Shift+clic sobre una tarjeta extendia la seleccion de
   TEXTO del navegador (titulos, fechas, "Audio generado") en vez de la de
   archivos, y Ctrl+clic la dejaba pintada de azul. El prompt se copia desde
   el visor ("Copiar prompt"), asi que aqui no se pierde nada seleccionable. */
.jobcard,.bv-tar,.bv-dia,.hist-dia{-webkit-user-select:none;user-select:none}
.fsel{position:absolute;top:9px;left:9px;z-index:6;width:26px;height:26px;border-radius:8px;
 display:grid;place-items:center;cursor:pointer;color:var(--muted2);
 background:color-mix(in srgb,var(--negro-abismo) 62%,transparent);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.10);
 opacity:0;transition:opacity .14s,color .14s,background .14s,transform .12s}
.jobcard:hover .fsel,.bv-tar:hover .fsel,.fsel:focus-visible{opacity:1}
.fsel[data-on="1"]{opacity:1;color:var(--tinta-sobre-verde);background:var(--lima);border-color:var(--lima)}
.fsel:hover{transform:scale(1.06)}
.fsel:focus-visible{outline:2px solid var(--lima);outline-offset:2px}
.jobcard.fsel-on,.bv-tar.fsel-on .bv-marco{box-shadow:0 0 0 2px var(--lima)}
.bv-tar.fsel-on .bv-marco{border-color:var(--lima)}
.fsel-dia{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;
 cursor:pointer;color:var(--dim);margin-right:2px;vertical-align:-4px}
.fsel-dia:hover{color:var(--lima2)}
.fsel-dia[data-est="1"],.fsel-dia[data-est="medio"]{color:var(--lima)}
.fsel-dia:focus-visible{outline:2px solid var(--lima);outline-offset:2px}

/* left:50% dejaria solo media pantalla para dimensionar la caja (shrink-to-fit
   mide desde el borde izquierdo hasta el final del viewport). Con left:0;right:0
   y margin auto se centra igual pero puede usar todo el ancho. */
#fselbar{position:fixed;left:0;right:0;margin:0 auto;width:max-content;
 transform:translateY(14px);bottom:calc(18px + env(safe-area-inset-bottom));z-index:120;
 display:none;align-items:center;gap:7px;padding:9px 11px;border-radius:16px;
 background:rgba(10,15,8,.93);backdrop-filter:blur(20px);
 border:1px solid color-mix(in srgb,var(--verde-cocuyo) 22%,transparent);box-shadow:0 22px 60px -22px rgba(0,0,0,.85);
 opacity:0;transition:opacity .18s,transform .18s;max-width:calc(100vw - 20px);
 flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
#fselbar::-webkit-scrollbar{display:none}
#fselbar.on{display:flex;opacity:1;transform:translateY(0)}
.fsel-n{font-size:13px;color:var(--text);padding:0 8px 0 4px;
 white-space:nowrap;font-variant-numeric:tabular-nums}
.fsel-n b{font-weight:600}
.fsel-n i{font-style:normal;color:var(--muted)}
.fsel-b{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:12.5px;
 padding:7px 11px;border-radius:10px;border:1px solid var(--border2);background:var(--surface2);
 color:var(--muted2);cursor:pointer;white-space:nowrap;transition:.14s}
.fsel-b:hover{background:var(--surface3);color:var(--text)}
.fsel-b.pri{background:var(--gradlima);color:var(--tinta-sobre-verde);border-color:transparent;font-weight:500}
.fsel-b.pri:hover{filter:brightness(1.06)}
.fsel-b.peligro:hover{background:rgba(185,28,28,.18);color:#FCA5A5;border-color:rgba(185,28,28,.5)}
.fsel-b.x{padding:7px 8px}
.fsel-b[hidden]{display:none}
.fsel-prog{position:absolute;left:0;right:0;bottom:calc(100% + 8px);display:flex;align-items:center;gap:9px;
 padding:8px 11px;border-radius:13px;background:rgba(10,15,8,.96);backdrop-filter:blur(18px);
 border:1px solid var(--border2);overflow:hidden}
.fsel-prog[hidden]{display:none}
.fsel-pbar{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--verde-cocuyo) 16%,transparent);
 transition:width .25s;pointer-events:none}
.fsel-pbar.indef{animation:fsel-desliza 1.15s ease-in-out infinite}
@keyframes fsel-desliza{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.fsel-ptxt{position:relative;font-size:12.5px;color:var(--muted2);white-space:nowrap;
 font-variant-numeric:tabular-nums}
.fsel-prog .fsel-b{position:relative;margin-left:auto}
@media(max-width:640px){
  #fselbar{gap:5px;padding:8px;border-radius:14px}
  .fsel-b{padding:7px 9px;font-size:12px}
  .fsel-b span{display:none}
  .fsel-b.pri span{display:inline}
  .fsel-n{padding:0 4px;font-size:12.5px}
  .fsel-n i{display:none}
  .fsel{opacity:1}
}

/* codigo de idioma en el selector */
.cod{display:inline-grid;place-items:center;min-width:26px;height:19px;padding:0 5px;
 border-radius:6px;background:var(--surface3);border:1px solid var(--border2);
 color:var(--muted2);font-size:10.5px;font-weight:600;letter-spacing:.04em;font-style:normal}
#submenu .mi:hover .cod{background:color-mix(in srgb,var(--verde-cocuyo) 16%,transparent);border-color:color-mix(in srgb,var(--verde-cocuyo) 40%,transparent);color:var(--lima)}

/* ---- sesiones ---- */
.sessions .item.ses{cursor:pointer;position:relative;transition:.14s}
.sessions .item.ses:hover{background:var(--surface)}
.sessions .item.ses.on{background:var(--lima-suave);color:var(--text)}
.sessions .item.ses.on .sq{color:var(--lima)}
.sessions .item .t.editando{outline:1px solid var(--lima);border-radius:5px;padding:0 4px;
 background:var(--bg);cursor:text;text-overflow:clip}
.sessions .sesn{font-size:11px;color:var(--dim);background:var(--surface2);
 border-radius:6px;padding:1px 6px;font-variant-numeric:tabular-nums}
.sessions .item.ses.on .sesn{background:color-mix(in srgb,var(--verde-cocuyo) 16%,transparent);color:var(--lima)}
.sessions .sesx{opacity:0;color:var(--dim);display:grid;place-items:center;
 width:20px;height:20px;border-radius:6px;transition:.14s}
.sessions .item.ses:hover .sesx{opacity:1}
.sessions .sesx:hover{background:rgba(185,28,28,.2);color:#FCA5A5}
.sessions .sesr:hover{background:color-mix(in srgb,var(--verde-cocuyo) 18%,transparent);color:var(--lima)}
.sessions .t.editando{background:var(--surface2);border-radius:6px;padding:1px 5px;outline:1px solid var(--lima);
  cursor:text;min-width:60px}
.sessions .item.sesnueva{cursor:pointer;color:var(--dim);border:1px dashed var(--border2);
 margin-top:4px;justify-content:flex-start}
.sessions .item.sesnueva:hover{color:var(--lima);border-color:color-mix(in srgb,var(--verde-cocuyo) 40%,transparent);background:var(--surface)}
.side.mini .sessions .sesn,.side.mini .sessions .sesx{display:none}

/* ---- densidad de la bodega ---- */
.bv-vista{display:flex;align-items:center;gap:8px;margin-left:auto;padding-left:10px}
.bv-vista .bv-ico{display:grid;place-items:center;color:var(--dim);background:none;border:0;padding:0;cursor:default}
.bv-vista .bv-ico.chico .ic{width:13px;height:13px}
.bv-vista .bv-ico.grande .ic{width:17px;height:17px}
.bv-vista button.bv-ico{cursor:pointer;width:28px;height:28px;border-radius:8px;
 border:1px solid var(--border);background:var(--surface2);transition:.14s}
.bv-vista button.bv-ico:hover{background:var(--surface3);color:var(--muted2)}
.bv-vista button.bv-ico.on{background:color-mix(in srgb,var(--verde-cocuyo) 14%,transparent);border-color:color-mix(in srgb,var(--verde-cocuyo) 38%,transparent);color:var(--lima)}
.bv-zoom{-webkit-appearance:none;appearance:none;width:104px;height:4px;border-radius:3px;
 background:var(--border2);outline:0;cursor:pointer}
.bv-zoom::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
 background:var(--lima);border:2px solid var(--bg);cursor:grab;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.bv-zoom::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--lima);
 border:2px solid var(--bg);cursor:grab}
/* rellenar: recorta a cuadrado; por defecto se respeta la proporcion real */
body.bv-llenar .bv-marco{aspect-ratio:1/1}
body.bv-llenar .bv-med{object-fit:cover}
.bv-med{object-fit:contain;background:var(--panel)}
@media(max-width:640px){
 .bv-vista{display:flex;padding-left:0;gap:0}
 .bv-vista button.bv-ico{width:44px;height:44px}
 /* La rejilla móvil tiene dos columnas; conserva Ajustar/Rellenar sin
    ofrecer un zoom que la propia rejilla no puede aplicar a ese ancho. */
 .bv-vista .bv-zoom,.bv-vista>.bv-ico:not(button){display:none}
}

:root{color-scheme:dark}
html{background:var(--bg)}

.mi-ver .val{color:var(--lima);opacity:.85}
.mi-ver:hover .ic{color:var(--lima)}

/* --dim se usa en etiquetas pequenas: sobre crema no llegaba a 4.5:1 */


/* iconos dentro de los submenus */
#submenu .mi .ic{width:16px;height:16px;flex:0 0 16px;opacity:.85}
#submenu .mi:hover .ic{opacity:1;color:var(--lima)}

/* boton del agente en el compositor */
.agbtn{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:12.5px;
 padding:6px 11px;border-radius:9px;border:1px solid color-mix(in srgb,var(--verde-cocuyo) 28%,transparent);
 background:color-mix(in srgb,var(--verde-cocuyo) 10%,transparent);color:var(--lima);cursor:pointer;white-space:nowrap;
 margin-left:8px;transition:.14s}
.agbtn:hover{background:color-mix(in srgb,var(--verde-cocuyo) 18%,transparent);border-color:color-mix(in srgb,var(--verde-cocuyo) 50%,transparent)}
.agbtn:disabled{opacity:.6;cursor:progress}
.agbtn.cargando .ic{animation:rot 1s linear infinite}

@media(max-width:640px){ .agbtn span{display:none} .agbtn{padding:6px 8px;margin-left:4px} }

/* ---- conversacion del agente ---- */
.agmsg{display:flex;gap:11px;margin-bottom:16px;max-width:820px}
.agmsg.yo{justify-content:flex-end}
.agmsg .agb{padding:11px 14px;border-radius:15px;font-size:14.5px;line-height:1.62;
 max-width:78%;word-break:break-word}
.agmsg.yo .agb{background:var(--surface2);border:1px solid var(--border);
 border-bottom-right-radius:5px;color:var(--text)}
.agmsg.el .agb{background:transparent;padding-left:0;color:var(--muted2)}
.agava{width:28px;height:28px;flex:0 0 28px;border-radius:9px;display:grid;place-items:center;
 background:color-mix(in srgb,var(--verde-cocuyo) 13%,transparent);color:var(--lima);margin-top:2px}
.agprompt{margin:12px 0;padding:12px;border-radius:13px;background:var(--surface);
 border:1px solid var(--border2)}
.agprompt code{display:block;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12.5px;
 line-height:1.6;color:var(--muted2);white-space:pre-wrap;margin-bottom:10px}
.agusar{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:12.5px;
 padding:7px 13px;border-radius:9px;border:0;background:var(--gradlima);color:var(--tinta-sobre-verde);
 font-weight:600;cursor:pointer;transition:.14s}
.agusar:hover{filter:brightness(1.07)}
.agpensando{display:flex;gap:5px;align-items:center;padding:14px 0}
.agpensando i{width:6px;height:6px;border-radius:50%;background:var(--lima);opacity:.35;
 animation:agpunto 1.1s ease-in-out infinite}
.agpensando i:nth-child(2){animation-delay:.16s}
.agpensando i:nth-child(3){animation-delay:.32s}
@keyframes agpunto{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}


@media(max-width:640px){ .agmsg .agb{max-width:88%} }

/* ---- dialogo propio ---- */
.fabdlg{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:24px;
 background:rgba(6,9,5,.72);backdrop-filter:blur(8px);opacity:0;transition:opacity .16s}
.fabdlg.on{opacity:1}
.fabdlg-caja{width:min(400px,100%);padding:26px 24px 20px;border-radius:20px;text-align:center;
 background:var(--elev);border:1px solid var(--border2);
 box-shadow:0 30px 80px -26px rgba(0,0,0,.85);transform:scale(.96);transition:transform .18s}
.fabdlg.on .fabdlg-caja{transform:scale(1)}
.fabdlg-ico{width:46px;height:46px;margin:0 auto 15px;border-radius:14px;display:grid;place-items:center;
 background:color-mix(in srgb,var(--verde-cocuyo) 13%,transparent);color:var(--lima)}
.fabdlg.peligro .fabdlg-ico{background:rgba(185,28,28,.16);color:#FCA5A5}
.fabdlg-caja h3{font-family:var(--font);font-size:18px;font-weight:600;margin:0 0 8px;color:var(--text)}
.fabdlg-caja p{font-size:13.8px;line-height:1.6;color:var(--muted);margin:0 0 20px}
.fabdlg-bt{display:flex;gap:9px}
.fabdlg-bt button{flex:1;padding:11px 14px;border-radius:11px;font-family:inherit;font-size:13.5px;
 font-weight:500;cursor:pointer;border:1px solid var(--border2);transition:.14s}
.fabdlg-no{background:var(--surface2);color:var(--muted2)}
.fabdlg-no:hover{background:var(--surface3);color:var(--text)}
.fabdlg-si{background:var(--gradlima);color:var(--tinta-sobre-verde);border-color:transparent}
.fabdlg.peligro .fabdlg-si{background:#B91C1C;color:var(--text)}
.fabdlg-si:hover{filter:brightness(1.08)}
.fabdlg-bt button:focus-visible{outline:2px solid var(--lima);outline-offset:2px}

/* ---- sesiones plegables y ajustables ---- */
.grouphead.plegable{cursor:pointer;user-select:none;border-radius:8px;transition:.14s}
.grouphead.plegable:hover{background:var(--surface)}
.grouphead .ghch{display:inline-grid;place-items:center;width:16px;height:16px;margin-right:5px;
 color:var(--dim);transition:transform .18s}
.grouphead.cerrado .ghch{transform:rotate(-90deg)}
.sessions.ajustable{max-height:260px;overflow-y:auto;scrollbar-width:thin}
.sessions.ajustable::-webkit-scrollbar{width:5px}
.sessions.ajustable::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.sesasa{height:7px;margin:1px 10px 4px;border-radius:4px;cursor:ns-resize;position:relative}
.sesasa:hover:after,.sesasa:active:after{content:"";position:absolute;left:34%;right:34%;top:3px;
 height:2px;border-radius:2px;background:var(--border2)}
.side.mini .sesasa,.side.mini .grouphead .ghch{display:none}

/* ---- selector "desde mi boveda" ---- */
.bibmodal{position:fixed;inset:0;z-index:480;display:none;place-items:center;padding:26px;
 background:rgba(6,9,5,.76);backdrop-filter:blur(10px)}
.bibmodal.on{display:grid;animation:bibApar .16s ease}
@keyframes bibApar{from{opacity:0}to{opacity:1}}
.bibcaja{width:min(940px,100%);max-height:86vh;display:flex;flex-direction:column;
 border-radius:20px;background:var(--elev);border:1px solid var(--border2);
 box-shadow:0 34px 90px -28px rgba(0,0,0,.86);overflow:hidden}
.bibtop{display:flex;align-items:center;gap:12px;padding:15px 17px;border-bottom:1px solid var(--border)}
.bibtop b{font-family:var(--font);font-size:16px;font-weight:600;color:var(--text);white-space:nowrap}
.bibbusca{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);
 border-radius:10px;padding:8px 12px;color:var(--text);font-family:inherit;font-size:13.5px;outline:0}
.bibbusca:focus{border-color:color-mix(in srgb,var(--verde-cocuyo) 45%,transparent)}
.bibx{width:32px;height:32px;border-radius:9px;border:0;background:none;color:var(--muted);
 cursor:pointer;display:grid;place-items:center}
.bibx:hover{background:var(--surface2);color:var(--text)}
.bibpests{display:flex;flex-wrap:wrap;gap:5px;padding:11px 17px 0}
/* «Meses recientes» y los meses caben sin cortarse, como el mes de Creaciones (180px). */
#bibMes{flex:0 0 auto;max-width:180px;margin-left:auto;color:var(--text)}
.bibmodal [hidden]{display:none!important}
.bibpest{padding:7px 13px;border-radius:9px;border:1px solid transparent;background:none;
 color:var(--muted);font-family:inherit;font-size:13px;cursor:pointer;transition:.14s}
.bibpest:hover{color:var(--text);background:var(--surface)}
.bibpest.on{background:var(--surface3);color:var(--text);border-color:var(--border2)}
.bibrejilla{flex:1;overflow-y:auto;display:grid;gap:10px;padding:14px 17px;
 grid-template-columns:repeat(auto-fill,minmax(132px,1fr));grid-auto-rows:max-content;align-content:start}
/* 28-sep-2026: piezas cuadradas e iguales. Antes cada una tomaba su formato
   (9:16, 1:1, 21:9…) y la rejilla, sin alto propio, las encogía y montaba. */
.bibpieza{position:relative;padding:0;border:1px solid var(--border);border-radius:13px;
 overflow:hidden;background:var(--surface);cursor:pointer;aspect-ratio:1/1;align-self:start;min-width:0;transition:.14s}
.bibpieza img,.bibpieza video{width:100%;height:100%;object-fit:cover;display:block}
.bibpieza .bibaudio{width:100%;height:100%;display:grid;place-items:center;color:var(--lima);
 background:linear-gradient(145deg,color-mix(in srgb,var(--verde-cocuyo) 13%,transparent),color-mix(in srgb,var(--surface) 85%,transparent))}
.bibpieza .bibaudio svg{width:30%;height:30%;min-width:30px;min-height:30px}
.bibpieza:hover{border-color:var(--border2);transform:translateY(-1px)}
.bibpieza.on{border-color:var(--lima);box-shadow:0 0 0 2px var(--lima)}
.bibmarca{position:absolute;top:7px;left:7px;width:24px;height:24px;border-radius:7px;
 display:grid;place-items:center;background:color-mix(in srgb,var(--negro-abismo) 66%,transparent);backdrop-filter:blur(5px);
 color:var(--text);opacity:0;transition:.14s}
.bibpieza:hover .bibmarca{opacity:1}
.bibpieza.on .bibmarca{opacity:1;background:var(--lima);color:var(--tinta-sobre-verde)}
.bibvideo{position:absolute;top:7px;right:7px;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
 background:color-mix(in srgb,var(--negro-abismo) 66%,transparent);backdrop-filter:blur(5px);color:var(--text);pointer-events:none}
.bibpie{position:absolute;left:0;right:0;bottom:0;padding:18px 9px 7px;font-size:11.5px;font-weight:500;
 color:var(--text);text-align:left;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--negro-abismo) 85%,transparent));
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 1-oct-2026: lo que el modelo no admite se ve, atenuado y rotulado; la nota
   de la pestaña explica qué modelos sí lo admiten. */
.bibpieza.bibno img,.bibpieza.bibno video,.bibpieza.bibno .bibaudio{opacity:.4;filter:grayscale(.6)}
.bibno-txt{position:absolute;top:7px;left:36px;padding:3px 7px;border-radius:7px;font-size:10.5px;font-weight:600;
 background:color-mix(in srgb,var(--negro-abismo) 72%,transparent);color:var(--dim);pointer-events:none}
.bibnota{grid-column:1/-1;margin:0;padding:9px 12px;border:1px solid var(--border);border-radius:10px;
 font-size:12.5px;line-height:1.5;color:var(--dim);background:var(--surface)}
.bibvacio{grid-column:1/-1;display:grid;place-items:center;gap:12px;padding:56px 20px;
 color:var(--dim);text-align:center}
.bibvacio .ic{width:34px;height:34px;opacity:.5}
.bibvacio p{max-width:280px;font-size:13.5px;line-height:1.6}
.bibpieta{display:flex;align-items:center;gap:12px;padding:13px 17px;border-top:1px solid var(--border)}
.bibcuenta{font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.bibusar{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:9px 17px;
 border-radius:11px;border:0;background:var(--gradlima);color:var(--tinta-sobre-verde);font-family:inherit;
 font-size:13.5px;font-weight:600;cursor:pointer;transition:.14s}
.bibusar:disabled{opacity:.42;cursor:not-allowed}
.bibusar:not(:disabled):hover{filter:brightness(1.07)}


@media(max-width:640px){
 .bibmodal{padding:0}
 .bibcaja{max-height:100vh;height:100vh;border-radius:0;border:0}
 .bibrejilla{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
 .bibtop b{display:none}
}

/* ---- la marca, como en la portada (P0.2) ----
   COCUYO con las dos O encendidas: el MISMO dibujo que .wordmark en
   tokens.css (letra de cartel Fraunces, peso 800, tracking .08em, glow
   medio en las O). Al lado, la claqueta: "Estudio" como rótulo de plató,
   en mono y versalitas, con el borde de escarcha de la casa. En la barra
   plegada (.side.mini) se esconden los dos <span> y queda solo el insecto. */
.brand{gap:9px;font-size:15px}
.brand .wordmark{font-family:var(--fuente-display);font-weight:800;letter-spacing:.08em;font-size:17px;
 line-height:1;color:var(--blanco-luz);font-optical-sizing:auto}
.brand .o-viva{font-style:normal;color:var(--verde-cocuyo);text-shadow:var(--glow-medio)}
.brand .claqueta{display:inline-flex;align-items:center;height:18px;padding:0 6px;
 border:1px solid var(--escarcha-borde);border-radius:4px;
 font-family:var(--fuente-mono);font-size:9px;font-weight:600;letter-spacing:.12em;
 text-transform:uppercase;line-height:1;color:var(--gris-humo);white-space:nowrap}

/* logos de los proveedores */
.mrcbox{display:inline-grid;place-items:center;width:26px;height:26px;flex:0 0 26px;
 border-radius:8px;background:var(--surface2);border:1px solid var(--border);color:var(--verde-cocuyo)}
.mrcbox .mrc{width:15px;height:15px}
.mrow .mrcbox,.gi .mrcbox{width:28px;height:28px;flex:0 0 28px}
.pill .mrcbox{width:20px;height:20px;flex:0 0 20px;border:0;background:none}
.pill .mrcbox .mrc{width:14px;height:14px}


/* ---- comprar creditos ---- */
.paysaldo{display:flex;align-items:baseline;gap:6px;padding:10px 13px;margin-bottom:13px;
 border-radius:11px;background:var(--surface);border:1px solid var(--border);font-size:13px;color:var(--muted)}
.paysaldo b{font-size:17px;color:var(--lima);font-variant-numeric:tabular-nums}
.paysaldo:empty{display:none}
.paypack .ppico{width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;place-items:center;
 background:color-mix(in srgb,var(--verde-cocuyo) 13%,transparent);color:var(--lima)}
.paypack .ppsub{font-size:12px;color:var(--muted);margin-top:1px}
/* Cuantos creditos da el paquete: es el dato que hacia falta para
   decidir y no se ensenaba (dueno, 28-ago-2026). */
.paypack .ppcred{font-size:12.5px;font-weight:700;color:var(--lima);margin-top:2px}
/* UNO destacado, no los tres. */
.paypack-destacado{border-color:color-mix(in srgb,var(--verde-cocuyo) 50%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--verde-cocuyo) 18%,transparent), 0 10px 26px color-mix(in srgb,var(--verde-cocuyo) 10%,transparent)}
.paypack-destacado::after{content:"Recomendado";position:absolute;top:-9px;right:14px;
  background:var(--lima);color:var(--tinta-sobre-verde);font-size:10px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.paypack{position:relative}
.payplan{margin:2px 0 6px}
.payplan .pptit{font-size:14px;font-weight:700}
.payplan .ppsub2{font-size:12px;color:var(--muted);margin:2px 0 10px;line-height:1.5}
.payplan .ppbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.payplan .ppplan{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:11px 12px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);text-align:left;
  transition:border-color .18s ease,background .18s ease}
.payplan .ppplan:hover{border-color:color-mix(in srgb,var(--verde-cocuyo) 55%,transparent);background:color-mix(in srgb,var(--verde-cocuyo) 7%,transparent)}
.payplan .ppplan b{font-size:14px}
.payplan .ppplan span{font-size:11.5px;color:var(--muted)}
.payplan .ppplan[disabled]{opacity:.55}
.payplan .pplinea{display:flex;align-items:center;gap:10px;margin:14px 0 4px;
  font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.payplan .pplinea::before,.payplan .pplinea::after{content:"";flex:1;height:1px;background:var(--border)}
.paypack.ocupado{opacity:.55;pointer-events:none}
.paypack .pp{margin-left:auto;font-weight:700;font-size:15px;color:var(--text)}

/* el logo de verdad de Cocuyo, no el dibujo provisional */
.cocuyologo{width:24px;height:24px;border-radius:7px;flex:0 0 24px;display:block;
 object-fit:contain;background:transparent}
.brand .cocuyologo{width:23px;height:23px;flex:0 0 23px}

/* ---- historial por dias ---- */
#genwrap.sin-nada .histbar{display:none}
.histbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
 padding:0 0 14px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.histpest{display:flex;gap:4px}
.histp{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:10px;
 border:1px solid transparent;background:none;color:var(--muted);font-family:inherit;
 font-size:13.5px;cursor:pointer;transition:.14s}
.histp.on{background:var(--surface2);color:var(--text);border-color:var(--border)}
.histctrl{display:flex;align-items:center;gap:9px;margin-left:auto}
.histbar{justify-content:flex-end}
.histico{display:grid;place-items:center;color:var(--dim)}
.histico.chico .ic{width:13px;height:13px}
.histico.grande .ic{width:17px;height:17px}
.histzoom{-webkit-appearance:none;appearance:none;width:96px;height:4px;border-radius:3px;
 background:var(--border2);outline:0;cursor:pointer}
.histzoom::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
 background:var(--lima);border:2px solid var(--bg);cursor:grab}
.histzoom::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--lima);
 border:2px solid var(--bg)}
.histvista{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--surface2);
 border:1px solid var(--border)}
.histvista button{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:0;
 border-radius:7px;background:none;color:var(--muted);font-family:inherit;font-size:12.5px;cursor:pointer}
.histvista button.on{background:var(--surface3);color:var(--text)}

.hist-dia{display:flex;align-items:baseline;gap:11px;padding:26px 0 12px}
.hist-dia span{font-family:var(--font);font-size:15px;font-weight:600;color:var(--text)}
.hist-dia i{font-style:normal;font-size:12px;color:var(--dim)}
.hist-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--hist-min,240px)),1fr));
 gap:14px;align-items:start}
#genout{display:block!important}

/* vista de lista */

/* lazo de seleccion */
.lazo{position:absolute;z-index:200;pointer-events:none;border:1px solid var(--lima);
 background:color-mix(in srgb,var(--verde-cocuyo) 12%,transparent);border-radius:4px}

@media(max-width:640px){
  .histbar{gap:8px;padding-bottom:11px}
  .histctrl{width:100%;margin-left:0}
  .histzoom{flex:1;width:auto}
  .histvista button span{display:none}
  .hist-dia{padding:20px 0 10px}
  .hist-dia span{font-size:17px}
}

/* la marca del panel: Cocuyo + que aqui se crea */
.marcaicono{place-items:center;width:19px;height:19px;margin-left:5px;
 border-radius:6px;background:color-mix(in srgb,var(--verde-cocuyo) 14%,transparent);color:var(--lima);flex:0 0 19px}
.side.mini .marcaicono{display:none}


/* ---- visor de detalles ---- */
.visor{position:fixed;inset:0;z-index:520;display:none;background:color-mix(in srgb,var(--negro-abismo) 94%,transparent);backdrop-filter:blur(6px)}
.visor.on{display:block;animation:vsApar .16s ease}
@keyframes vsApar{from{opacity:0}to{opacity:1}}
.vs-caja{display:grid;grid-template-columns:1fr 384px;height:100%}
.vs-media{position:relative;display:grid;place-items:center;padding:22px;min-width:0}
.vs-media video,.vs-media img{max-width:100%;max-height:calc(100vh - 44px);border-radius:14px;display:block;background:var(--panel)}
.vs-tiras{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:7px;
 padding:6px;border-radius:12px;background:color-mix(in srgb,var(--negro-abismo) 70%,transparent);backdrop-filter:blur(10px)}
.vs-tira{width:48px;height:36px;border-radius:8px;overflow:hidden;border:1px solid transparent;
 background:var(--surface2);cursor:pointer;padding:0;color:var(--muted2);font-size:12px;display:grid;place-items:center}
.vs-tira img{width:100%;height:100%;object-fit:cover}
.vs-tira.on{border-color:var(--lima)}
.vs-panel{border-left:1px solid var(--border);background:var(--panel);overflow-y:auto;display:flex;flex-direction:column}
.vs-top{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--border)}
.vs-avatar{width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:grid;place-items:center;
 background:color-mix(in srgb,var(--verde-cocuyo) 14%,transparent);color:var(--lima)}
.vs-top b{display:block;font-size:14px;color:var(--text);font-weight:500}
.vs-top small{font-size:12px;color:var(--dim)}
.vs-x{margin-left:auto;width:32px;height:32px;border-radius:9px;border:0;background:none;
 color:var(--muted);cursor:pointer;display:grid;place-items:center}
.vs-x:hover{background:var(--surface2);color:var(--text)}
.vs-sec{padding:16px 18px;border-bottom:1px solid var(--border)}
.vs-h{display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.1em;color:var(--dim);margin-bottom:11px}
.vs-h span{flex:1}
.vs-copiar{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;
 border:1px solid var(--border2);background:var(--surface2);color:var(--muted2);
 font-family:inherit;font-size:11.5px;letter-spacing:0;cursor:pointer}
.vs-copiar:hover{background:var(--surface3);color:var(--text)}
.vs-copiar.hecho{color:var(--lima);border-color:color-mix(in srgb,var(--verde-cocuyo) 40%,transparent)}
.vs-refs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.vs-refs img{width:52px;height:52px;border-radius:9px;object-fit:cover;border:1px solid var(--border2)}
.vs-prompt{font-size:13.5px;line-height:1.68;color:var(--muted2);white-space:pre-wrap;word-break:break-word}
.vs-prompt.corto{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.vs-vertodo{display:inline-flex;align-items:center;gap:4px;margin-top:9px;padding:0;border:0;
 background:none;color:var(--lima);font-family:inherit;font-size:12.5px;cursor:pointer}
.vs-ficha{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;margin:0;font-size:13px}
.vs-ficha dt{color:var(--dim)}
.vs-ficha dd{margin:0;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.vs-pie{margin-top:auto;padding:16px 18px;display:flex;flex-direction:column;gap:9px}
.vs-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;
 border-radius:11px;border:1px solid var(--border2);background:var(--surface2);color:var(--muted2);
 font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:.14s}
.vs-b:hover{background:var(--surface3);color:var(--text)}
.vs-b.pri{background:var(--gradlima);color:var(--tinta-sobre-verde);border-color:transparent;font-weight:600}
.vs-b.pri:hover{filter:brightness(1.07)}
.vs-mini{display:flex;gap:7px}
.vs-i{flex:1;display:grid;place-items:center;height:40px;border-radius:10px;border:1px solid var(--border);
 background:var(--surface);color:var(--muted);cursor:pointer;text-decoration:none}
.vs-i:hover{background:var(--surface2);color:var(--text)}
@media(max-width:900px){
  .vs-caja{grid-template-columns:1fr;grid-template-rows:minmax(38vh,44vh) 1fr}
  .vs-panel{border-left:0;border-top:1px solid var(--border)}
  .vs-media{padding:12px}
  .vs-media video,.vs-media img{max-height:100%}
}

/* mientras se arrastra el lazo, el texto no se selecciona */
body.lazoactivo,body.lazoactivo *{
 -webkit-user-select:none!important;user-select:none!important;cursor:crosshair!important}
body.lazoactivo ::selection{background:transparent}
#genout .hist-rejilla{cursor:default}

/* ---- tarjeta limpia: solo la miniatura ---- */
.jobcard.limpia{padding:0;background:none;border:0;box-shadow:none;overflow:visible}
.jmarco{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:var(--ar,16/9);
 background:var(--panel);border:1px solid var(--border);transition:.16s;cursor:pointer}
.jobcard.limpia:hover .jmarco{border-color:var(--border2);transform:translateY(-2px);
 box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}
.jmarco img,.jmarco video{width:100%;height:100%;object-fit:cover;display:block}
.jn{position:absolute;left:9px;bottom:9px;padding:2px 7px;border-radius:6px;font-size:11px;
 background:color-mix(in srgb,var(--negro-abismo) 70%,transparent);color:var(--text);backdrop-filter:blur(5px)}
.jfav,.jmas{position:absolute;width:28px;height:28px;border-radius:9px;border:0;cursor:pointer;
 display:grid;place-items:center;background:color-mix(in srgb,var(--negro-abismo) 60%,transparent);backdrop-filter:blur(6px);
 color:var(--text);opacity:0;transition:.14s}
.jfav{top:9px;right:9px}
.jmas{bottom:9px;right:9px}
.jobcard.limpia:hover .jfav,.jobcard.limpia:hover .jmas{opacity:1}
.jfav:hover,.jmas:hover{background:color-mix(in srgb,var(--negro-abismo) 85%,transparent)}
.jfav.on{opacity:1;color:var(--ambar)}
.jfav.on .ic{fill:currentColor}
.jobcard.limpia .fsel{top:9px;left:9px}

.jobcard.cargando{padding:0}
.jcarga{display:grid;place-items:center;gap:9px;aspect-ratio:var(--ar,16/9);border-radius:14px;
 background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:12.5px}
.jobcard.fallo{padding:14px}

/* ---- menu de opciones ---- */
.tjmenu{position:fixed;z-index:540;min-width:216px;padding:6px;border-radius:14px;
 background:var(--elev);border:1px solid var(--border2);
 box-shadow:0 22px 60px -20px rgba(0,0,0,.85);display:none;flex-direction:column;gap:1px}
.tjmenu.on{display:flex;animation:tjApar .13s ease}
@keyframes tjApar{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tjop{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;
 border-radius:9px;background:none;color:var(--muted2);font-family:inherit;font-size:13.5px;
 cursor:pointer;text-align:left;transition:.12s}
.tjop:hover{background:var(--surface2);color:var(--text)}
.tjop.activo{color:var(--lima)}
.tjop.rojo{color:#FCA5A5}
.tjop.rojo:hover{background:rgba(185,28,28,.16)}
.tjop span{flex:1}
.tjfl{display:grid;place-items:center;color:var(--dim)}
.tjn{font-style:normal;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.tjsep{height:1px;margin:5px 8px;background:var(--border)}
.tjvacio{padding:11px;font-size:12.5px;color:var(--dim);text-align:center}
.tjsub{min-width:200px}
@media(max-width:640px){
 .tjmenu{min-width:0;left:10px!important;right:10px!important;width:auto}
 .jfav,.jmas{opacity:1}
}

/* ---- barra plegada: solo iconos ----
   Los rotulos van sueltos dentro del enlace, sin <span> que ocultar; se apagan
   por tamano de letra. Los iconos llevan medidas propias en px, no les afecta. */
.side.mini .brand,.side.mini .navlist a,.side.mini .libnav a,
.side.mini .grouphead,.side.mini .showmore,.side.mini .acct,
.side.mini .upg,.side.mini .sec a{font-size:0;letter-spacing:0}
.side.mini .navlist a .ic,.side.mini .libnav a .ic,
.side.mini .sec a .ic,.side.mini .showmore .ic{font-size:0}
.side.mini .brand .cocuyologo{display:block;margin:0 auto}
.side.mini .sec a .val,.side.mini .navlist a .pillnew{display:none}
.side.mini .sec a{justify-content:center;padding:9px 0}
.side.mini .top{gap:6px}
.side.mini .acct .av{margin:0 auto}

/* ---- lo que se ve mientras se genera ----
   El cocuyo de verdad lleva dos faros, no uno: dos puntos que respiran a la
   vez y sueltan anillos de luz. Con "prefiero menos movimiento" va despacio. */
.cocuyocarga{position:relative;display:inline-block;width:46px;height:26px;flex:0 0 46px;
 vertical-align:middle}
.cocuyocarga .faro{position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;
 border-radius:50%;background:#C6F55E;animation:ccyFaro 1.9s ease-in-out infinite}
.cocuyocarga .faro.iz{left:15px}
.cocuyocarga .faro.de{left:25px;animation-delay:.15s}
@keyframes ccyFaro{
 0%,100%{box-shadow:0 0 5px 1px color-mix(in srgb,var(--verde-cocuyo) 40%,transparent);transform:scale(.8);opacity:.6}
 50%    {box-shadow:0 0 14px 4px color-mix(in srgb,var(--verde-cocuyo) 85%,transparent);transform:scale(1.15);opacity:1}}
.cocuyocarga .aro{position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
 border-radius:50%;border:1px solid color-mix(in srgb,var(--verde-cocuyo) 50%,transparent);animation:ccyAro 2.4s ease-out infinite}
.cocuyocarga .aro.b{animation-delay:1.2s}
@keyframes ccyAro{0%{transform:scale(1);opacity:.6}100%{transform:scale(4.4);opacity:0}}


@media(prefers-reduced-motion:reduce){
 .cocuyocarga .faro{animation-duration:4.5s}
 .cocuyocarga .aro{animation-duration:5s}}

/* ---- chat de soporte: el mismo de cocuyo.ai ----
   Trae su propia burbuja flotante abajo a la derecha; en el estudio estorba,
   porque ya hay compositor ahi. La escondemos y la abre el boton de la barra. */
/* chat.js oculta la burbuja sólo cuando hay otro acceso visible a Ayuda. */

/* ---- el muro entra directo por el historial ----
   El titular y su frase no decian nada que no dijeran ya las creaciones. */
#pg-home #title,#pg-home .muro-sub{display:none}
#pg-home .wrap{padding-top:14px}
/* al lado de COCUYO no hace falta ningun adorno */
.marcaicono{display:none!important}

/* ---- musica: la tarjeta se escucha ---- */
.jaudio{display:flex;flex-direction:column;gap:13px;align-items:center;justify-content:center;height:100%;
 padding:14px;background:linear-gradient(160deg,var(--surface),var(--panel))}
.jaudio audio{width:100%;height:34px}
.jaudio .ic{width:26px;height:26px;color:var(--lima);opacity:.9}

.sunotxt{font-family:inherit;font-size:12.5px;min-width:150px;flex:1 1 150px;max-width:260px}
.sunotxt.corta{min-width:96px;flex:0 1 120px}
.sunotxt::placeholder{color:var(--dim)}
.sunotog.on{color:var(--lima);border-color:color-mix(in srgb,var(--verde-cocuyo) 38%,transparent)}

/* ---- la musica dentro de La Boveda ---- */
.bv-aud,.bv-audgrande{display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:12px;width:100%;height:100%;padding:16px;color:var(--lima);
 background:linear-gradient(160deg,var(--surface),var(--panel))}
.bv-aud audio{width:100%;height:34px}
.bv-audgrande{min-height:190px;gap:18px}
.bv-audgrande .ic{width:42px;height:42px}
.bv-audgrande audio{width:min(460px,88%);height:40px}


/* ---- las casillas de seleccion, sin depender del hover de cada tarjeta ----
   #genout no se destruye al repintar, sus hijos si. Colgando la casilla del
   hover del contenedor sobrevive a cualquier repintado. Y en cuanto hay algo
   seleccionado se quedan todas fijas, que es cuando mas falta hacen.        */
#genout:hover .fsel,.libcanvas:hover .fsel{opacity:.5}
#genout .jobcard:hover .fsel,.libcanvas .bv-tar:hover .fsel{opacity:1}
body.fselmodo .fsel{opacity:1}
body.fselmodo .jobcard:hover .fsel{opacity:1}

/* Los faros y el icono del boton se pintan CON el verde, no sobre el:
   en claro quedarian lima sobre crema, invisibles. Van con el verde tinta. */

/* el subtitulo va sobre el tinte de la cabecera, no sobre el blanco:
   con --muted se quedaba en 3.62, por debajo del minimo. */

/* ---- controles del visor ----
   Van flotando sobre el medio, abajo: a la izquierda lo que cambia segun el
   tipo (zoom en imagen, reproduccion en video) y a la derecha, siempre, el
   boton de pantalla completa de verdad. */
.vctl{position:absolute;left:0;right:0;bottom:0;z-index:8;
 display:flex;align-items:center;gap:12px;flex-wrap:wrap;
 padding:12px 14px calc(12px + env(safe-area-inset-bottom));
 background:linear-gradient(to top,color-mix(in srgb,var(--negro-abismo) 88%,transparent),color-mix(in srgb,var(--negro-abismo) 55%,transparent) 60%,transparent);
 pointer-events:none}
.vctl>*,.vctl input,.vctl button{pointer-events:auto}
.vctl-izq{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.vctl-der{margin-left:auto;display:flex;align-items:center;gap:9px}
.vctl-b{display:inline-flex;align-items:center;justify-content:center;gap:6px;
 min-width:34px;height:34px;padding:0 9px;border-radius:10px;cursor:pointer;
 background:color-mix(in srgb,var(--surface) 72%,transparent);border:1px solid rgba(255,255,255,.13);color:var(--text);
 font-family:inherit;font-size:12.5px;font-weight:600;backdrop-filter:blur(8px);transition:.13s}
.vctl-b:hover{background:color-mix(in srgb,var(--surface) 90%,transparent);border-color:color-mix(in srgb,var(--verde-cocuyo) 40%,transparent);color:var(--text)}
.vctl-b.grande{min-width:40px;height:40px}
.vctl-b b{font-variant-numeric:tabular-nums}
.vctl-pct{min-width:46px;font-size:12.5px;color:var(--text);font-variant-numeric:tabular-nums;
 text-shadow:0 1px 3px rgba(0,0,0,.8)}
.vctl-son{display:flex;align-items:center;gap:7px}
.vctl input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;
 background:rgba(255,255,255,.28);outline:0;cursor:pointer}
.vctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;
 border-radius:50%;background:var(--lima);border:0;cursor:pointer}
.vctl input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;
 background:var(--lima);border:0;cursor:pointer}
.vctl-zoom{width:130px}
.vctl-vol{width:84px}
.vctl-avance{flex:1 1 100%;width:100%;margin:0 0 2px}
/* con la imagen ampliada hay que poder moverse por ella */
.vctl-zoomable{overflow:auto}
.vctl-zoomable img{margin:auto}
/* el propio elemento en pantalla completa del navegador */
.vs-media:fullscreen,.bv-vmedia:fullscreen{background:#000;padding:0}
.vs-media:fullscreen img,.vs-media:fullscreen video,
.bv-vmedia:fullscreen img,.bv-vmedia:fullscreen video{max-width:100vw;max-height:100vh}

@media(max-width:760px){
  .bv-vbox{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .bv-vinfo{border-left:0;border-top:1px solid var(--border);max-height:38vh}
  .vctl-zoom{width:96px}
  .vctl-vol{width:64px}
}

/* el audio no tiene miniatura: dice lo que es y ya */
.bv-audrot{font-size:12.5px;font-weight:600;color:var(--muted2);letter-spacing:.01em}

/* ---- elegir la voz ---- */
.vz-card{display:flex;align-items:center;gap:10px;padding:5px 9px 5px 5px;border-radius:12px;
 background:var(--surface2);border:1px solid var(--border2);cursor:pointer;
 font-family:inherit;color:var(--text);transition:.13s;max-width:270px}
.vz-card:hover{border-color:var(--lima-line,color-mix(in srgb,var(--verde-cocuyo) 45%,transparent));background:var(--surface3)}
.vz-foto{position:relative;display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;
 border-radius:9px;overflow:hidden;
 background:linear-gradient(145deg,hsl(var(--h) 72% 58%),hsl(calc(var(--h) + 42) 68% 44%))}
.vz-foto.chica{width:34px;height:34px;flex-basis:34px}
.vz-foto b{font-size:13px;font-weight:800;color:var(--tinta-sobre-verde);text-shadow:0 1px 2px rgba(255,255,255,.25)}
.vz-txt{display:flex;flex-direction:column;gap:1px;min-width:0;text-align:left}
.vz-txt b{font-size:12.5px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vz-txt small{font-size:11px;color:var(--muted);line-height:1.25;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.vz-cambia{margin-left:auto;font-size:11px;color:var(--dim);flex:0 0 auto}
.vz-play{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:10px;
 border:1px solid var(--border2);background:var(--surface2);color:var(--muted2);cursor:pointer;transition:.13s}
.vz-play:hover{color:var(--text);border-color:var(--lima-line,color-mix(in srgb,var(--verde-cocuyo) 45%,transparent))}
.vz-play.on{color:var(--lima);border-color:var(--lima)}
.vz-play.on .vz-t{display:none}
.vz-play.on .vz-p{display:block!important}
.vz-modal{position:fixed;inset:0;z-index:560;display:none;align-items:center;justify-content:center;
 padding:22px;background:color-mix(in srgb,var(--negro-abismo) 86%,transparent);backdrop-filter:blur(8px)}
.vz-modal.on{display:flex;animation:fadeIn .14s ease}
.vz-caja{display:flex;flex-direction:column;width:min(560px,100%);max-height:min(78vh,660px);
 border-radius:18px;overflow:hidden;background:var(--elev);border:1px solid var(--border2);
 box-shadow:0 34px 90px -24px rgba(0,0,0,.8)}
.vz-top{display:flex;align-items:center;gap:10px;padding:15px 16px;border-bottom:1px solid var(--border)}
.vz-top b{font-family:var(--display,inherit);font-size:15.5px}
.vz-n{font-size:11.5px;color:var(--dim);background:var(--surface3);padding:2px 8px;border-radius:999px}
.vz-x{margin-left:auto;width:32px;height:32px;border-radius:9px;border:0;background:none;
 color:var(--muted);cursor:pointer;font-size:15px}
.vz-x:hover{background:var(--surface2);color:var(--text)}
.vz-busca{display:flex;align-items:center;gap:9px;margin:12px 16px;padding:9px 12px;border-radius:11px;
 background:var(--surface3);border:1px solid var(--border);color:var(--dim)}
.vz-busca input{flex:1;min-width:0;border:0;background:none;outline:0;color:var(--text);
 font-family:inherit;font-size:13.5px}
.vz-lista{flex:1;overflow-y:auto;padding:0 10px 12px;display:flex;flex-direction:column;gap:2px}
.vz-fila{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:11px;cursor:pointer;
 transition:.12s}
.vz-fila:hover{background:var(--surface2)}
.vz-fila.on{background:color-mix(in srgb,var(--verde-cocuyo) 13%,transparent)}
.vz-fila.on .vz-txt b{color:var(--lima)}
.vz-fila .vz-play{margin-left:auto}
.vz-nada{padding:26px;text-align:center;color:var(--dim);font-size:13px}

/* ---- la vista de lista: para saber que se pidio ---- */
body.hist-lista .hist-rejilla{grid-template-columns:1fr!important;gap:11px}
.jobfila{display:flex;gap:14px;padding:13px;border-radius:14px;
 background:var(--surface);border:1px solid var(--border);align-items:flex-start}
.jobfila:hover{border-color:var(--border2)}
.jr-med{position:relative;flex:0 0 148px;width:148px;aspect-ratio:16/10;border-radius:10px;
 overflow:hidden;background:var(--panel);display:grid;place-items:center}
.jr-med img,.jr-med video{width:100%;height:100%;object-fit:cover;display:block}
.jr-espera,.jr-fallo,.jr-aud{display:grid;place-items:center;width:100%;height:100%;color:var(--muted)}
.jr-fallo{color:#FCA5A5}
.jr-aud{color:var(--lima);background:linear-gradient(160deg,var(--surface),var(--panel))}
.jr-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.jr-cab{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.jr-modelo{display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border-radius:8px;
 background:var(--surface3);font-size:12px;font-weight:700;color:var(--muted2)}
.jr-estado{font-size:11.5px;color:var(--dim);padding:3px 9px;border-radius:999px;background:var(--surface2)}
.jr-prompt{margin:0;font-size:13px;line-height:1.5;color:var(--muted2);
 display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap}
.jr-at{font-style:normal;font-weight:700;color:var(--lima);background:color-mix(in srgb,var(--verde-cocuyo) 14%,transparent);
 padding:0 4px;border-radius:5px}
.jr-err{margin:0;font-size:12.5px;color:#FCA5A5;line-height:1.45}
.jr-refs{display:flex;gap:6px;flex-wrap:wrap}
.jr-refs img,.jr-refvideo,.jr-refaudio{width:38px;height:38px;border-radius:8px;object-fit:cover;
 display:grid;place-items:center;background:var(--surface3);color:var(--muted);
 border:1px solid var(--border)}
.jr-chips{display:flex;gap:6px;flex-wrap:wrap}
.jr-chips span{font-size:11.5px;color:var(--muted);background:var(--surface3);
 padding:3px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.jr-acc{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.jobfila .jfav,.jobfila .jmas{position:static;opacity:1;background:var(--surface2);
 border:1px solid var(--border);color:var(--muted2)}
.jobfila .jfav:hover,.jobfila .jmas:hover{color:var(--text);border-color:var(--border2)}
.jobfila .fsel{top:9px;left:9px}

@media(max-width:640px){
  .jr-med{flex-basis:100%;}
}

/* ---- un modelo parado se ve parado ----
   Antes solo iba en gris, pero se podia pulsar igual. */
#mbody .mrow.locked{opacity:.5;cursor:not-allowed}
#mbody .mrow.locked:hover{background:none}
#mbody .mrow[aria-disabled="true"]{opacity:1}
#mbody .studio-model-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
#mbody .studio-model-summary .mhead{padding-inline:10px}
#mbody #modelRetry{padding:8px 10px;min-height:36px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font:500 11px/1.3 var(--font);cursor:pointer}
#mbody #modelRetry:disabled{color:var(--muted);cursor:wait}
#mbody .studio-model-state{margin-top:8px;color:var(--muted);font-size:11px}
#mbody .studio-model-notice{padding:10px;margin:4px 0 10px;border:1px solid var(--border);border-radius:8px;color:var(--muted2);font-size:12px;line-height:1.5}

/* ================= PANEL DE AUDIO =================
   En audio el compositor no es una barra al pie: es una columna a la
   izquierda, con el guion y los ajustes uno debajo de otro, y el historial
   a la derecha. Fuera de audio no cambia nada. */
body.modo-audio #mesa{left:var(--side);right:auto;top:0;bottom:0;
 padding:0;display:block;justify-content:flex-start}
body.modo-audio .mesa-in{width:100%;height:100%;border-radius:0;
 border:0;border-right:1px solid var(--border);
 display:flex;flex-direction:column;overflow-y:auto;
 box-shadow:none;}
body.modo-audio .mesa-top{flex:0 0 auto;margin:0}
body.modo-audio .mesa-top .modesw{width:100%}
body.modo-audio .mesa-top .modesw .inner{justify-content:space-between}
body.modo-audio #apps{display:none}
body.modo-audio .composer{max-width:none;margin:0;background:none;border:0;padding:0;
 display:flex;flex-direction:column;flex:1}
body.modo-audio #quickrow{display:none}
body.modo-audio .headicons{display:none}      /* manda el boton grande */
body.modo-audio .refgrid{display:none}
body.modo-audio #pg-home .wrap{padding-bottom:70px}
body.modo-audio #genwrap{margin-top:0!important}

/* el guion */
.ap-rot{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
 color:var(--muted);margin:2px 2px -4px}
body.modo-audio .ta{min-height:132px;max-height:230px;overflow-y:auto;
 background:var(--surface3);border:1px solid var(--border);border-radius:12px;
 padding:12px 13px;font-size:13.5px;line-height:1.55}
body.modo-audio .parambar{display:flex;flex-direction:column;align-items:stretch;
 gap:9px;flex-wrap:nowrap;overflow:visible;padding:0;border:0;background:none}

/* la voz, en grande */
.ap-voz{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
 min-height:132px;padding:13px;border-radius:15px;overflow:hidden;
 background:linear-gradient(150deg,hsl(var(--h) 74% 56%),hsl(calc(var(--h) + 46) 66% 34%))}
.ap-voz::after{content:'';position:absolute;inset:0;
 background:linear-gradient(to top,color-mix(in srgb,var(--negro-abismo) 72%,transparent),transparent 62%)}
.ap-voztxt{position:relative;z-index:2;display:flex;flex-direction:column;gap:2px;min-width:0}
.ap-voztxt b{font-size:15px;font-weight:800;color:var(--text);text-shadow:0 1px 6px rgba(0,0,0,.5)}
.ap-voztxt small{font-size:11.5px;color:rgba(255,255,255,.86);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 5px rgba(0,0,0,.5)}
.ap-vozcambia{position:absolute;top:10px;right:10px;z-index:3;display:inline-flex;
 align-items:center;gap:6px;padding:6px 10px;border-radius:9px;cursor:pointer;
 background:color-mix(in srgb,var(--negro-abismo) 60%,transparent);border:1px solid rgba(255,255,255,.22);color:var(--text);
 font-family:inherit;font-size:11.5px;font-weight:700;backdrop-filter:blur(6px)}
.ap-vozcambia:hover{background:color-mix(in srgb,var(--negro-abismo) 82%,transparent)}
.ap-vozplay{position:absolute;top:10px;left:10px;z-index:3;width:38px;height:38px;
 border-radius:50%;background:color-mix(in srgb,var(--negro-abismo) 60%,transparent);border:1px solid rgba(255,255,255,.22);
 color:var(--text);backdrop-filter:blur(6px)}
.ap-vozplay:hover{background:color-mix(in srgb,var(--negro-abismo) 82%,transparent);color:var(--text)}

/* una fila del panel */
.ap-fila{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;
 border-radius:12px;cursor:pointer;text-align:left;font-family:inherit;font-size:13px;
 background:var(--surface);border:1px solid var(--border);color:var(--muted2);transition:.13s}
.ap-fila:hover{border-color:var(--border2);color:var(--text)}
.ap-fila>span{flex:0 0 auto;color:var(--muted);font-size:12px}
.ap-fila>b{flex:1;min-width:0;text-align:right;font-weight:700;color:var(--text);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-car{font-style:normal;color:var(--dim);flex:0 0 auto}
.ap-fila .tile,.ap-fila svg.tile{flex:0 0 auto}
/* interruptor */
.ap-fila.sw>span{flex:1;color:var(--muted2);font-size:13px}
.ap-sw{position:relative;flex:0 0 34px;width:34px;height:20px;border-radius:999px;
 background:var(--surface3);border:1px solid var(--border2);transition:.15s}
.ap-sw::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;
 border-radius:50%;background:var(--muted);transition:.15s}
.ap-fila.sw.on{border-color:var(--lima-line,color-mix(in srgb,var(--verde-cocuyo) 50%,transparent))}
.ap-fila.sw.on .ap-sw{background:var(--lima);border-color:var(--lima)}
.ap-fila.sw.on .ap-sw::after{left:16px;background:var(--tinta-sobre-verde)}

/* un campo con su rotulo */
.ap-campo{display:flex;flex-direction:column;gap:6px}
.ap-campo>span{display:flex;align-items:center;justify-content:space-between;
 font-size:11.5px;color:var(--muted);letter-spacing:.03em}
.ap-campo>span i{font-style:normal;color:var(--muted2);font-variant-numeric:tabular-nums}
.ap-campo input[type=text],.ap-campo input:not([type]){width:100%}
.ap-campo input{width:100%;padding:10px 12px;border-radius:11px;
 background:var(--surface3);border:1px solid var(--border);color:var(--text);
 font-family:inherit;font-size:13px;outline:0}
.ap-campo input:focus{border-color:var(--lima-line,color-mix(in srgb,var(--verde-cocuyo) 50%,transparent))}
.ap-campo input::placeholder{color:var(--muted)}
.ap-campo.rango input[type=range],.ap-av input[type=range]{
 -webkit-appearance:none;appearance:none;height:4px;padding:0;border:0;border-radius:3px;
 background:var(--border2);cursor:pointer}
.ap-campo.rango input[type=range]::-webkit-slider-thumb,
.ap-av input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;
 border-radius:50%;background:var(--lima);border:0;cursor:pointer}
.ap-nota{font-size:11.5px;color:var(--dim);padding:0 3px}
.ap-nota.pasa{color:var(--peligro)}

.ap-idioma{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:12px;
 background:var(--surface);border:1px solid var(--border);color:var(--muted2);font-size:13px}
.ap-idioma>span{flex:1;color:var(--muted);font-size:12px}
.ap-idioma select{max-width:60%;padding:5px 8px;border-radius:8px;font:inherit;font-size:13px;
 background:var(--surface3);color:var(--text);border:1px solid var(--border2)}
.ap-idioma select:focus-visible{outline:2px solid var(--lima-line,color-mix(in srgb,var(--verde-cocuyo) 50%,transparent));outline-offset:1px}

/* ajustes avanzados */
.ap-avwrap{display:flex;flex-direction:column}
.ap-avbody{display:none;flex-direction:column;gap:12px;padding:12px 3px 4px}
.ap-avwrap.on .ap-avbody{display:flex}
.ap-avwrap.on .ap-car{transform:rotate(90deg)}
.ap-av{display:flex;flex-direction:column;gap:6px;cursor:pointer}
.ap-av>span{display:flex;align-items:center;justify-content:space-between;
 font-size:12px;color:var(--muted2)}
.ap-av>span i{font-style:normal;color:var(--dim);font-variant-numeric:tabular-nums}
.ap-reset{align-self:flex-start;padding:6px 10px;border-radius:9px;cursor:pointer;
 background:none;border:1px solid var(--border);color:var(--muted);
 font-family:inherit;font-size:11.5px}
.ap-reset:hover{color:var(--text);border-color:var(--border2)}

/* generar */
.ap-gen{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
 margin-top:auto;padding:14px;border:0;border-radius:14px;cursor:pointer;
 background:var(--gradlima);color:var(--tinta-sobre-verde);font-family:inherit;font-size:14.5px;
 font-weight:800;letter-spacing:.01em;transition:.13s}
.ap-gen:hover{filter:brightness(1.06)}
.ap-gen:active{transform:scale(.99)}
.ap-gen b{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}

@media(max-width:900px){
  body.modo-audio #pg-home .wrap{padding-left:440px}
}
@media(max-width:760px){
  /* hoja fija abajo, como el compositor del resto de modos */
  body.modo-audio #mesa{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;
    display:flex;justify-content:center;padding:0 10px 10px}
  body.modo-audio .mesa-in{width:100%;height:auto;max-height:54vh;overflow-y:auto;
    border:1px solid color-mix(in srgb,var(--verde-cocuyo) 15%,transparent);border-radius:20px;padding:12px 13px 12px;
    background:color-mix(in srgb,var(--negro-abismo) 94%,transparent);backdrop-filter:blur(22px);
    box-shadow:0 -14px 60px rgba(0,0,0,.65)}
  body.modo-audio #pg-home .wrap{padding-left:16px;padding-right:16px;padding-bottom:470px}
  body.modo-audio .ta{min-height:84px;max-height:120px}
  body.modo-audio .ap-voz{min-height:104px}
  /* generar siempre a la vista, aunque la hoja se desplace por dentro */
  body.modo-audio .ap-gen{position:sticky;bottom:0;margin-top:8px}
}


/* el conmutador de modos pedia 381px y la columna da 330: se aprieta */
body.modo-audio .mesa-top .modesw .inner{width:100%;gap:2px;padding:3px}
body.modo-audio .mesa-top .modesw button{flex:1 1 0;min-width:0;
 justify-content:center}
body.modo-audio .mesa-top .modesw button .ic{width:15px;height:15px;flex-basis:15px}

/* ---- Mis creaciones: todo cuadrado ----
   Con cada pieza en su proporcion la rejilla quedaba a saltos. En cuadrado
   las filas casan y se lee de un vistazo. La proporcion real sigue en la ficha. */
#pg-library .bv-marco{aspect-ratio:1/1}
#pg-library .bv-med{width:100%;height:100%;object-fit:cover}
#pg-library .bv-aud{aspect-ratio:1/1}
/* la lista en movil: la miniatura, a lo ancho */
@media(max-width:640px){
  .jobfila{flex-wrap:wrap;gap:11px}
  .jr-med{flex:1 1 100%!important;width:100%!important;max-width:none;aspect-ratio:16/9}
  .jr-cuerpo{flex:1 1 100%}
  .jr-acc{flex-direction:row;align-self:flex-start}
}

/* ---- el audio en el historial: fila con onda ---- */
body.modo-audio .hist-rejilla{grid-template-columns:1fr!important;gap:9px}
.fila-aud{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:14px;
 background:var(--surface);border:1px solid var(--border);transition:.13s;cursor:default}
.fila-aud:hover{border-color:var(--border2)}
.fa-foto{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:11px;
 background:linear-gradient(145deg,hsl(var(--h) 74% 58%),hsl(calc(var(--h) + 44) 66% 40%))}
.fa-foto b{font-size:15px;font-weight:800;color:var(--tinta-sobre-verde)}
.fa-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:0 0 168px;max-width:168px}
.fa-txt b{font-size:13px;font-weight:700;color:var(--text);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fa-txt small{font-size:11.5px;color:var(--muted);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fa-play{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:50%;
 border:1px solid var(--border2);background:var(--surface2);color:var(--muted2);cursor:pointer;transition:.13s}
.fa-play:hover{color:var(--text);border-color:var(--lima-line,color-mix(in srgb,var(--verde-cocuyo) 50%,transparent))}
.fa-play.on{background:var(--lima);border-color:var(--lima);color:var(--tinta-sobre-verde)}
.fa-onda{flex:1;min-width:60px;height:44px;cursor:pointer;position:relative}
.fa-onda canvas{width:100%;height:100%;display:block}
.fa-onda.vacia{background:repeating-linear-gradient(90deg,var(--border) 0 2px,transparent 2px 6px);
 opacity:.5;border-radius:4px;height:26px;cursor:default}
.fa-tiempo{flex:0 0 auto;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums;min-width:34px}
.fa-modelo{flex:0 0 auto;font-size:11.5px;color:var(--muted);padding:4px 9px;border-radius:8px;
 background:var(--surface3);white-space:nowrap}
.fa-acc{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.fila-aud .jfav,.fila-aud .jmas,.fa-b{position:static;opacity:1;width:30px;height:30px;border-radius:9px;
 display:grid;place-items:center;background:none;border:1px solid transparent;color:var(--muted);cursor:pointer}
.fila-aud .jfav:hover,.fila-aud .jmas:hover,.fa-b:hover{background:var(--surface2);color:var(--text)}
.fila-aud .jfav.on{color:var(--ambar)}
.fila-aud .fsel{top:9px;left:9px}
.fila-aud.pendiente{opacity:.75}


/* ---- cuando un modo no tiene nada: el MONITOR del plató (P0.2) ----
   Sin creaciones, el muro enseña un monitor de rodaje apagado —marco
   fino, líneas de barrido casi invisibles, esquinas de encuadre— con la
   luz REC encendida FIJA (el cocuyo no parpadea: brilla constante). El
   plató está listo; falta rodar. El titular va en la letra de cartel. */
.hist-nada{position:relative;display:flex;flex-direction:column;justify-content:center;gap:8px;
 min-height:190px;padding:38px 28px 34px;margin-top:6px;
 border:1px solid var(--border);border-radius:14px;color:var(--muted);
 background:
  linear-gradient(180deg,color-mix(in srgb,var(--surface) 85%,transparent),transparent 72%),
  repeating-linear-gradient(0deg,transparent 0 3px,color-mix(in srgb,var(--blanco-luz) 2.5%,transparent) 3px 4px),
  var(--panel);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px color-mix(in srgb,var(--verde-cocuyo) 5%,transparent)}
/* esquinas de encuadre del visor */
.hist-nada::before{content:"";position:absolute;inset:10px;pointer-events:none;border-radius:6px;
 background:
  linear-gradient(var(--border2),var(--border2)) top left/14px 1px no-repeat,
  linear-gradient(var(--border2),var(--border2)) top left/1px 14px no-repeat,
  linear-gradient(var(--border2),var(--border2)) top right/14px 1px no-repeat,
  linear-gradient(var(--border2),var(--border2)) top right/1px 14px no-repeat,
  linear-gradient(var(--border2),var(--border2)) bottom left/14px 1px no-repeat,
  linear-gradient(var(--border2),var(--border2)) bottom left/1px 14px no-repeat,
  linear-gradient(var(--border2),var(--border2)) bottom right/14px 1px no-repeat,
  linear-gradient(var(--border2),var(--border2)) bottom right/1px 14px no-repeat}
/* la luz REC: punto lima fijo con su glow + rótulo mono */
.hist-nada::after{content:"REC";position:absolute;top:16px;right:22px;line-height:1;
 font-family:var(--fuente-mono);font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--gris-humo)}
.hist-nada b{font-family:var(--fuente-display);font-weight:400;font-size:22px;line-height:1.15;
 letter-spacing:0;color:var(--text);text-wrap:balance;font-optical-sizing:auto}
/* el punto de la luz REC (cuelga del titular, que siempre existe, y se
   coloca respecto al monitor, que es el que lleva position:relative) */
.hist-nada b::before{content:"";position:absolute;top:17px;right:58px;width:7px;height:7px;border-radius:50%;
 background:var(--verde-cocuyo);box-shadow:var(--glow-suave)}
.hist-nada span{font-size:13px;max-width:440px}
/* en móvil el botón ☰ flota arriba a la izquierda: el monitor baja para no chocar */
@media(max-width:900px){.hist-nada{margin-top:40px;min-height:170px;padding:34px 22px 30px}.hist-nada b{font-size:20px}}

@media(max-width:640px){
  .fa-txt{flex-basis:110px;max-width:110px}
  .fa-modelo,.fa-tiempo{display:none}
}

/* ---- lo que aun se esta generando no se toca ----
   Sin casilla de seleccion y sin puntero de "pulsame": no hay nada que abrir. */
.jobcard.encurso{cursor:default}
.jobcard.encurso .fsel{display:none}
.jobcard.encurso .jmarco{cursor:default}

/* ---- dialogo a varias voces ---- */
.ap-rot2{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
 color:var(--muted);margin:6px 2px 0}
.ap-rep{display:flex;flex-direction:column;gap:7px;padding:10px;border-radius:12px;
 background:var(--surface);border:1px solid var(--border)}
.ap-repcab{display:flex;align-items:center;gap:7px}
.ap-repvoz{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:4px 7px 4px 4px;
 border-radius:9px;border:1px solid var(--border2);background:var(--surface2);
 color:var(--text);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left}
.ap-repvoz:hover{border-color:var(--lima-line,color-mix(in srgb,var(--verde-cocuyo) 50%,transparent))}
.ap-repvoz>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-repfoto{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border-radius:7px;
 background:linear-gradient(145deg,hsl(var(--h) 74% 58%),hsl(calc(var(--h) + 44) 66% 40%))}
.ap-repfoto b{font-size:11px;font-weight:800;color:var(--tinta-sobre-verde)}
.ap-repoir{width:28px;height:28px;flex:0 0 28px;border-radius:8px}
.ap-repx{width:28px;height:28px;flex:0 0 28px;border-radius:8px;border:1px solid transparent;
 background:none;color:var(--dim);cursor:pointer;font-size:13px}
.ap-repx:hover{background:rgba(185,28,28,.14);color:#FCA5A5}
.ap-reptxt{width:100%;resize:vertical;min-height:52px;padding:9px 11px;border-radius:10px;
 background:var(--surface3);border:1px solid var(--border);color:var(--text);
 font-family:inherit;font-size:13px;line-height:1.5;outline:0}
.ap-reptxt:focus{border-color:var(--lima-line,color-mix(in srgb,var(--verde-cocuyo) 50%,transparent))}
.ap-repmas{align-self:flex-start;padding:8px 12px;border-radius:10px;cursor:pointer;
 background:none;border:1px dashed var(--border2);color:var(--muted);
 font-family:inherit;font-size:12.5px}
.ap-repmas:hover{color:var(--text);border-color:var(--lima-line,color-mix(in srgb,var(--verde-cocuyo) 50%,transparent))}

/* ================= AIRE Y LETRA =================
   Una sola familia (Geist), como hace Apple: los titulares no cambian de
   letra, solo de peso y de apretado. Y la barra respira. */
body{font-size:15px;line-height:1.55;letter-spacing:-0.006em}
.mbox b,.vs-info b{letter-spacing:-0.021em} /* los titulares serif llevan su propio tracking (bloque CALMA) */
h1,.title{font-weight:700}
.navlist a,.sec a,.mi,.grouphead,.upgbtn,.acct{letter-spacing:-0.008em}

/* la barra: mas aire entre cosas y margenes mas amables */
.side{padding:16px 12px}
.side .top{margin-bottom:20px}
.navlist{display:flex;flex-direction:column;gap:3px}
.navlist a{padding:10px 12px;border-radius:10px;font-weight:500;font-size:14px}
.grouphead{padding:22px 12px 9px;font-size:11px;letter-spacing:.085em;
 text-transform:uppercase;color:var(--dim);font-weight:600}
.grouphead.ghtools{padding-top:26px}
.side .foot{padding-top:18px;gap:10px}
.acct{padding:9px 10px;border-radius:12px}
.upgbtn{padding:10px;border-radius:11px;font-size:13.5px}

/* lo que aun no esta hecho se ve, pero se sabe que no toca todavia */
.navlist a.pronto{color:var(--dim);cursor:default}
.navlist a.pronto:hover{background:none}
.navlist a.pronto .ic{opacity:.5}
.navlist a.pronto::after{content:'Pronto';margin-left:auto;font-size:10px;
 letter-spacing:.05em;text-transform:uppercase;color:var(--dim);
 background:var(--surface2);padding:2px 7px;border-radius:999px;flex:0 0 auto}

.side.mini .navlist a.pronto::after{display:none}


/* ---- sesiones: el proyecto en el que estas ---- */
.sessions{display:flex;flex-direction:column;gap:2px}
.sessions .item{border-radius:10px;cursor:pointer;transition:.13s}
.sessions .item:hover{background:var(--surface)}
.sessions .item.on{background:color-mix(in srgb,var(--verde-cocuyo) 13%,transparent);color:var(--lima)}
.sessions .item.on .sq{background:var(--lima);color:var(--tinta-sobre-verde);font-weight:700}
.sessions .item .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sessions .item .sesn{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}


/* ---- menciones con @ ----
   Sale por encima del compositor, no dentro: el area de texto es pequena y
   un desplegable ahi dentro tapa justo lo que estas escribiendo. */
.mn-panel{position:fixed;z-index:600;width:324px;max-height:296px;overflow-y:auto;
 display:none;flex-direction:column;gap:1px;padding:6px;border-radius:14px;
 background:var(--elev);border:1px solid var(--border2);
 box-shadow:0 26px 64px -22px rgba(0,0,0,.85)}
.mn-panel.on{display:flex;animation:fadeIn .12s ease}
.mn-fila{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;cursor:pointer}
.mn-fila:hover,.mn-fila.on{background:var(--surface2)}
.mn-fila img,.mn-ico{width:34px;height:34px;flex:0 0 34px;border-radius:8px;object-fit:cover;
 display:grid;place-items:center;background:var(--surface3);color:var(--muted)}
.mn-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.mn-txt b{font-size:12.5px;font-weight:700;color:var(--lima)}
.mn-txt small{font-size:11px;color:var(--muted);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-ya{flex:0 0 auto;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
 color:var(--dim);background:var(--surface3);padding:2px 7px;border-radius:999px}
.mn-nada{padding:18px 12px;font-size:12.5px;color:var(--dim);line-height:1.5;text-align:center}


/* ============================================================
   REMATE DE LA CASA (31-ago-2026) — lo que el Estudio no tenia
   y el resto de cocuyo.ai si (espejo de tokens.css).
   ============================================================ */

/* Cada pagina se ENCIENDE al llegar (tokens.css:879). */
@media(prefers-reduced-motion:no-preference){
  body{animation:pagina-enciende 160ms ease-out}
  @keyframes pagina-enciende{from{opacity:0}}
}

/* Menos movimiento: los cinco bucles infinitos que se escapaban de los
   nueve frenos ya existentes (WCAG 2.3.3). */
@media(prefers-reduced-motion:reduce){
  .cmphalf.soft,.cmphalf.sharp,.typew,.herocard .r2 .divider{animation:none}
  .bv-esq,[class*="bv-sh"]{animation:none}
  .agpensando i{animation:none;opacity:.6}
}

/* Foco que se habia perdido: .ap-campo input lleva outline:0 y .bv-sel
   pisa al anillo global por especificidad. Se les devuelve. */
.ap-campo input:focus-visible,.bv-sel:focus-visible{
  outline:2px solid var(--lima);outline-offset:2px}

/* Familias sin :hover: una respuesta comun de superficie. */
.segbtn:hover,.modesw button:hover,.apptabs button:hover,
.pick .seg button:hover,.selpill:hover{background:var(--surface3)}

/* Dianas tactiles: en pantalla tactil los controles minusculos crecen
   hasta ser pulsables (la casa pide 48px; aqui 44 por la densidad del
   compositor). En escritorio no cambia nada. */
@media(pointer:coarse){
  .roundbtn{width:44px;height:44px}
  .headicons .roundbtn{min-width:44px}
  .sendround{width:44px;height:44px}
  .iconbtn{width:44px;height:44px}
  .mclose,.railctrl button,.bv-b,body.studio-workbench .bv-fav{min-width:44px;min-height:44px}
  .jfav,.jmas{min-width:44px;min-height:44px}
}

/* Titulares que no dejan viudas; parrafos que no parten feo. */
h1,h2,h3,.title,.bv-vacio h3{text-wrap:balance}
p{text-wrap:pretty}

/* Scrollbar tambien en Firefox (el claro ya la tenia; el oscuro no). */
html{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}

/* ============================================================
   MODO LIGERO para navegadores DENTRO de apps (Instagram, FB,
   TikTok...). estudio-1.js marca <html data-webview-app> antes del
   primer pintado. Sus webviews se atragantan con backdrop-filter y
   animaciones infinitas (mismo martillo que tokens.css:933).
   El Estudio es publico y se abrira desde bios: esto NO es opcional.
   ============================================================ */
html[data-webview-app] *,
html[data-webview-app] *::before,
html[data-webview-app] *::after{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  animation-duration:.001s!important;animation-delay:0s!important;
  animation-iteration-count:1!important;transition-duration:.001s!important;
  scroll-behavior:auto!important}
html[data-webview-app] .fx-aurora,
html[data-webview-app] .fx-fireflies,
html[data-webview-app] body::after{display:none!important}
html[data-webview-app] .mesa-in{background:#0B0B0B!important}
html[data-webview-app] .side,
html[data-webview-app] .mbox,
html[data-webview-app] #fselbar,
html[data-webview-app] .fsel-prog{background:var(--panel)!important}

.acc-creaciones-texto{display:grid;gap:4px;min-width:0}
.acc-creaciones-texto small{font-size:11px;font-weight:400;line-height:1.5;color:var(--gris-humo);white-space:normal;font-variant-numeric:tabular-nums}
/* 1-oct-2026: el mes de Creaciones está a la vista en la barra (antes, dentro
   de Filtros). En escritorios estrechos la barra ya no cabía y empujaba la
   página de lado: ahora baja a una segunda fila. «html» delante solo sube la
   prioridad sobre la hoja propia de Creaciones, que se carga después. */
html body.studio-workbench:not(#f) #pg-library .bva-barra{flex-wrap:wrap;row-gap:8px}
html body.studio-workbench:not(#f) #pg-library .bva-mes .bva-select{max-width:180px}
/* Móvil: el mes ocupa su propia fila bajo los botones (si compartiera fila con
   el orden, los dos se cortarían: «Recient…», «Meses…»). */
@media (max-width:900px){
 html body.studio-workbench:not(#f) #pg-library .bva-mes{order:1;flex:1 1 100%}
 html body.studio-workbench:not(#f) #pg-library .bva-mes .bva-select{max-width:none}
}

/* cocuyo-css: assets/css/estudio-compositor.css */
/* Compositores del Estudio avanzado — 5-sep-2026.
   Orden de trabajo: referencias, descripcion, ajustes y Generar.
   Usa los tokens del Estudio. Audio conserva su panel profesional propio.
   --mesa-h sigue midiendose con el ResizeObserver existente. */
#mesa:has(.compositor-visual) .mesa-in{
  width:min(960px,100%);padding:12px 16px 14px;border-radius:20px;
  background:var(--surface);border-color:var(--border2);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 16px 56px color-mix(in srgb,var(--negro-abismo) 65%,transparent);
}
#mesa:has(.compositor-visual) .mesa-in::before,
#mesa:has(.compositor-visual) .mesa-in::after{display:none}
#mesa:has(.compositor-visual) .mesa-top{
  gap:8px 12px;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--border);
}
#mesa:has(.compositor-visual) .modesw .inner{
  padding:3px;background:var(--bg);border:1px solid var(--border);border-radius:12px;
}
#mesa:has(.compositor-visual) .modesw button{
  min-height:38px;padding:8px 14px;gap:7px;border-radius:9px;font-weight:550;
}
#mesa:has(.compositor-visual) .modesw button.active{
  background:var(--surface3);color:var(--text);box-shadow:none;
}
#mesa:has(.compositor-visual) .modesw button.active .ic{color:var(--lima)}
#mesa:has(.compositor-visual) .appbtn{
  min-height:34px;padding:6px 10px;background:transparent;border-color:transparent;
  color:var(--muted2);font-size:12px;font-weight:450;
}
#mesa:has(.compositor-visual) .appbtn:hover{background:var(--surface2);border-color:var(--border)}

.mesa-in .compositor-visual{
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;
  padding:0;min-width:0;border-radius:12px;
}
.compositor-visual #refgrid,
.compositor-visual #imageRefControls{grid-column:1/-1;grid-row:1}
.compositor-visual #attrow{grid-column:1/-1;grid-row:2}
.compositor-visual #ta{grid-column:1/-1;grid-row:3}
.compositor-visual #parambar{grid-column:1;grid-row:4}
.compositor-visual #headicons{grid-column:2;grid-row:4}
.compositor-visual #refgrid{
  flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;overflow:visible;
}
.compositor-visual .refbox{
  width:auto;min-height:42px;height:auto;flex-direction:row;gap:8px;
  padding:10px 12px;border:1px dashed var(--border2);border-radius:10px;
  background:var(--bg);color:var(--muted2);font-size:12px;font-weight:500;
}
.compositor-visual .refbox .ic{width:17px;height:17px;flex-basis:17px;color:var(--lima)}
.compositor-visual .refbox:hover{border-color:var(--lima);color:var(--text)}
.refbox .refbox-label{display:flex;flex-direction:column;gap:4px;text-align:left}
.refbox .refbox-label small{font-size:11px;font-weight:400;color:var(--muted2);line-height:1.35}
.compositor-visual .image-ref-controls{gap:8px 12px;margin:0 0 12px}
.compositor-visual .image-ref-add{
  min-height:44px;padding:10px 12px;gap:8px;background:var(--bg);border-radius:10px;
}
.compositor-visual .image-ref-add>.ic{color:var(--lima)}
.compositor-visual .image-ref-add b{
  padding:3px 7px;min-width:35px;background:var(--surface3);color:var(--muted2);
  font-size:11px;font-variant-numeric:tabular-nums;text-align:center;
}
.compositor-visual .image-ref-hint{font-size:12px;color:var(--muted);line-height:1.45}
.compositor-visual .refpop{
  border:1px solid var(--border2);border-radius:14px;background:var(--surface);
}
.compositor-visual .refpop button{
  min-height:46px;gap:10px;padding:11px 12px;border-radius:9px;font-size:13px;
}
.compositor-visual .refpop button>.ic{color:var(--lima)}
.compositor-visual .refpop p{color:var(--muted2);line-height:1.5}

/* Una tira de miniaturas, aunque el modelo admita 16. Su propio scroll
   horizontal no convierte la mesa en varias filas ni afecta al prompt. */
.compositor-visual #attrow{
  flex-wrap:nowrap!important;gap:8px!important;min-width:0;max-width:100%;
  overflow-x:auto;overflow-y:hidden;padding:2px 0 7px;margin-bottom:8px!important;
  scrollbar-width:thin;scrollbar-color:var(--border2) transparent;
}
.compositor-visual .attchip{
  flex:0 0 80px;width:80px;height:80px;border-radius:12px;border-color:var(--border2);
}
.compositor-visual .attchip .x{
  top:3px;right:3px;width:26px;height:26px;border-radius:8px;
  background:color-mix(in srgb,var(--negro-abismo) 88%,transparent);
}
.compositor-visual .attchip .x:hover{background:var(--peligro);color:var(--tinta-sobre-verde)}
.compositor-visual .attrol,.compositor-visual .attrolfijo{min-height:22px;font-size:10px;padding:4px}
.compositor-visual .attcuenta{flex:0 0 auto;white-space:nowrap;color:var(--muted2)}

/* El editor conserva contenteditable y su gestion de pegado/menciones.
   Solo su contenido crece y se desplaza; el boton queda fuera de ese scroll. */
.compositor-visual #ta{
  min-width:0;min-height:80px;max-height:min(230px,26dvh);overflow-y:auto;
  padding:10px 2px 14px;margin:0 0 10px;font-size:15px;line-height:1.6;
  overflow-wrap:anywhere;scrollbar-width:thin;border-bottom:1px solid var(--border);
}
.compositor-visual #ta:focus-visible{outline:0;border-bottom-color:var(--lima)}
.compositor-visual #ta:empty::before{color:var(--muted)}
.compositor-visual #parambar{
  min-width:0;align-items:center;align-content:end;flex-wrap:wrap;gap:6px;
  padding:0;font-size:12px;
}
.compositor-visual #parambar>.lbl{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.compositor-visual .param{
  min-height:40px;max-width:100%;gap:7px;padding:9px 10px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface2);font-size:12px;font-weight:500;
}
.compositor-visual .param[data-pop="model"]{background:var(--bg);border-color:var(--border2);font-weight:600}
.compositor-visual .param[data-pop="model"]>span:first-of-type{
  min-width:0;overflow:hidden;text-overflow:ellipsis;
}
.compositor-visual .param:hover,.compositor-visual .param.open{
  background:var(--surface3);border-color:var(--border2);box-shadow:none;
}
.compositor-visual .param-caption{color:var(--muted2);font-weight:450}
.compositor-visual #parambar .cost{
  min-height:40px;margin-left:auto;padding:8px 2px 8px 8px;gap:5px;
  color:var(--muted2);font-size:12px;
}
.compositor-visual .cost b{font-size:14px;font-weight:650;color:var(--text)}
.compositor-visual .cost-caption{color:var(--muted);font-size:11px}
.compositor-visual #omniLimits{padding:3px 0 0;max-width:100%;overflow-wrap:anywhere}
.compositor-visual #headicons{
  position:static;align-self:start;display:flex;align-items:center;justify-content:flex-end;gap:0;
}
.compositor-visual #headicons .roundbtn{
  width:auto;min-width:124px;min-height:42px;height:auto;padding:11px 17px;
  border-radius:11px;background:var(--lima);color:var(--tinta-sobre-verde);
  font-size:13px;font-weight:700;gap:8px;box-shadow:none;transform:none;
}
.compositor-visual #headicons .roundbtn .rlbl{display:inline}
.compositor-visual #headicons .roundbtn:hover{background:var(--lima-clara);box-shadow:none;transform:none}
.compositor-visual #headicons .roundbtn:disabled{opacity:.5;cursor:wait}
.compositor-visual :is(button,select,[tabindex]):focus-visible{
  outline:2px solid var(--lima);outline-offset:3px;
}
.compositor-visual .pop{max-width:calc(100vw - 32px)}
.compositor-visual .pop .opt{min-height:40px;font-weight:500}
.compositor-visual .pop .opt.sel{background:var(--lima-suave);color:var(--text)}

@media(max-width:640px){
  #mesa:has(.compositor-visual) .mesa-in{
    padding:10px 12px 12px;border-radius:18px;max-height:70vh;max-height:70dvh;
    overscroll-behavior-y:contain;
  }
  #mesa:has(.compositor-visual) .mesa-top{gap:7px;margin-bottom:10px;padding-bottom:10px}
  #mesa:has(.compositor-visual) .modesw button{min-height:40px;padding:8px 11px;font-size:12px}
  .mesa-in .compositor-visual{grid-template-columns:minmax(0,1fr);column-gap:0}
  .compositor-visual #parambar{grid-column:1/-1;gap:6px}
  .compositor-visual #headicons{
    grid-column:1/-1;grid-row:5;position:sticky;bottom:-12px;z-index:16;
    margin:10px -12px -12px;padding:10px 12px 12px;background:var(--surface);
    border-top:1px solid var(--border);
  }
  .compositor-visual #headicons .roundbtn{width:100%;min-height:46px;font-size:14px}
  .compositor-visual .image-ref-hint{flex-basis:auto;font-size:11px}
  .compositor-visual #refgrid{gap:6px;margin-bottom:10px}
  .compositor-visual .refbox{min-height:40px;padding:9px 10px;font-size:11px}
  .compositor-visual .attchip{flex-basis:72px;width:72px;height:72px}
  .compositor-visual #ta{min-height:68px;max-height:20dvh;font-size:14px;padding:8px 1px 12px}
  .compositor-visual .param{min-height:42px;padding:9px;font-size:12px}
  .compositor-visual .param-caption{font-size:11px}
  .compositor-visual #parambar .cost{padding-left:4px}
  .compositor-visual .pop .opt{min-height:44px}
  /* Los menus salen del scroll de la mesa: PC/galeria y duracion siguen
     siendo alcanzables aunque las referencias hayan aumentado su altura.
     La mesa opaca no necesita un filtro que capture position:fixed. */
  .compositor-visual .pop,.compositor-visual .refpop{
    position:fixed;left:16px;right:16px;top:auto;bottom:calc(80px + env(safe-area-inset-bottom));
    width:auto;min-width:0;max-width:none;max-height:55vh;max-height:55dvh;
    overflow-y:auto;overscroll-behavior-y:contain;transform:none;z-index:80;
    text-align:left;
  }
  .compositor-visual .pop .ph{font-size:11px;letter-spacing:.04em;line-height:1.5}
}
@media(max-width:380px){
  .compositor-visual .cost-caption{display:none}
  .compositor-visual .param{gap:5px}
  .compositor-visual .image-ref-hint{flex-basis:100%}
}

/* Audio avanzado: voz, guion, modelo, ajustes y precio en una columna.
   Los campos de musica conservan su logica; esta hoja no habilita modelos.
   En escritorio los resultados siguen al lado; en movil se reserva la
   altura real de la mesa para que ninguna creacion quede tapada. */
body.modo-audio{--audio-panel:clamp(350px,30vw,424px)}
body.modo-audio #mesa{width:var(--audio-panel)}
body.modo-audio #pg-home .wrap{padding-left:calc(var(--audio-panel) + 24px)}
body.modo-audio .mesa-in{
  gap:16px;padding:16px 18px 18px;background:var(--surface);border-color:var(--border2);
  -webkit-backdrop-filter:none;backdrop-filter:none;scrollbar-width:thin;overscroll-behavior-y:contain;
}
body.modo-audio .mesa-in::before,body.modo-audio .mesa-in::after{display:none}
body.modo-audio .mesa-top{padding-bottom:14px;border-bottom:1px solid var(--border);background:var(--surface)}
body.modo-audio .mesa-top .modesw .inner{background:var(--bg);border-radius:12px;border-color:var(--border)}
body.modo-audio .mesa-top .modesw button{min-height:42px;padding:9px 7px;font-size:12px;font-weight:550;gap:7px}
body.modo-audio .mesa-top .modesw button.active{background:var(--surface3);color:var(--text);box-shadow:none}
body.modo-audio .composer{gap:12px;min-width:0;flex-shrink:0}
body.modo-audio .ap-voz{
  min-height:136px;flex-shrink:0;padding:14px;border:1px solid var(--border2);border-radius:14px;
  background:linear-gradient(125deg,var(--surface2),var(--bg));
}
body.modo-audio .ap-voz::after{display:none}
body.modo-audio .ap-voztxt{gap:3px;padding-top:36px}
body.modo-audio .ap-vozlabel{font-size:10px;font-weight:550;color:var(--lima);letter-spacing:.04em}
body.modo-audio .ap-voztxt b{font-size:18px;font-weight:650;letter-spacing:-.02em;text-shadow:none}
body.modo-audio .ap-voztxt small{font-size:12px;color:var(--muted2);line-height:1.45;text-shadow:none;white-space:normal}
body.modo-audio .ap-vozplay{
  top:12px;left:12px;width:38px;height:38px;display:grid;place-items:center;
  background:var(--lima-suave);border:1px solid var(--border2);color:var(--lima);backdrop-filter:none;
}
body.modo-audio .ap-vozcambia{
  min-height:38px;top:12px;right:12px;padding:9px 12px;border-radius:10px;
  background:var(--surface2);border-color:var(--border2);font-size:12px;font-weight:500;backdrop-filter:none;
}
body.modo-audio .ap-vozcambia:hover,body.modo-audio .ap-vozplay:hover{background:var(--surface3);color:var(--text)}
body.modo-audio .ap-rot,body.modo-audio .ap-rot2{
  margin:4px 1px -4px;color:var(--muted2);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;
}
body.modo-audio #ta{
  min-height:144px;max-height:min(260px,32dvh);padding:13px 14px;line-height:1.65;
  background:var(--bg);border:1px solid var(--border2);border-radius:12px;font-size:14px;
  overflow-wrap:anywhere;scrollbar-width:thin;
}
body.modo-audio #ta:focus-visible{outline:2px solid var(--lima);outline-offset:2px}
body.modo-audio #parambar{gap:12px;min-width:0}
body.modo-audio .ap-fila,body.modo-audio .ap-idioma{
  min-height:48px;padding:12px;border-radius:11px;border-color:var(--border);background:var(--bg);
}
body.modo-audio .ap-fila>b{font-size:12px;font-weight:600}
body.modo-audio .ap-fila>span,body.modo-audio .ap-idioma>span{color:var(--muted2);font-size:12px}
body.modo-audio .ap-fila:hover{background:var(--surface2);border-color:var(--border2)}
body.modo-audio .ap-idioma select{
  min-height:36px;min-width:135px;max-width:65%;padding:7px 10px;border-radius:9px;background:var(--surface2);font-size:12px;
}
body.modo-audio .ap-nota{padding:0 2px;font-size:11px;line-height:1.6;color:var(--muted)}
body.modo-audio .ap-nota.pasa{color:var(--peligro)}
body.modo-audio .ap-campo{gap:7px}
body.modo-audio .ap-campo>span{font-size:12px;color:var(--muted2);letter-spacing:0}
body.modo-audio .ap-campo input:not([type=range]){
  min-height:46px;padding:12px;background:var(--bg);border-color:var(--border2);font-size:13px;
}
/* .sw tambien es un interruptor generico de 34x19. La fila de audio
   necesita su propia altura y solo dibuja el interruptor hijo .ap-sw. */
body.modo-audio .ap-fila.sw{width:100%;height:auto;flex:0 0 auto;margin:0;min-height:48px}
body.modo-audio .ap-fila.sw::after{display:none}
body.modo-audio .ap-fila.sw.on{background:var(--lima-suave)}
body.modo-audio .ap-avwrap{padding-top:3px;border-top:1px solid var(--border)}
body.modo-audio .ap-avwrap>.ap-fila{margin-top:8px;background:transparent;border-color:transparent}
body.modo-audio .ap-avwrap.on>.ap-fila{background:var(--surface2);border-color:var(--border)}
body.modo-audio .ap-avbody{gap:18px;padding:16px 12px 10px}
body.modo-audio .ap-av{gap:10px}
body.modo-audio .ap-av>span{font-size:12px}
body.modo-audio .ap-av>span i{color:var(--text);font-size:12px}
body.modo-audio :is(.ap-av,.ap-campo.rango) input[type=range]{height:6px;margin:8px 0;accent-color:var(--lima)}
body.modo-audio :is(.ap-av,.ap-campo.rango) input[type=range]::-webkit-slider-thumb{width:18px;height:18px}
body.modo-audio :is(.ap-av,.ap-campo.rango) input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border:0;border-radius:50%;background:var(--lima);
}
body.modo-audio .ap-reset{min-height:38px;padding:9px 12px;font-size:12px}
body.modo-audio .ap-rep{padding:12px;gap:10px;border-color:var(--border2);background:var(--bg)}
body.modo-audio .ap-reptxt{min-height:76px;font-size:13px;line-height:1.6;background:var(--surface2)}
body.modo-audio :is(.ap-repoir,.ap-repx){min-width:36px;min-height:36px}
body.modo-audio .ap-repmas{min-height:42px;border-style:dashed;font-size:12px}
body.modo-audio .ap-gen{
  min-height:50px;position:sticky;bottom:0;z-index:8;gap:12px;margin-top:8px;padding:14px;
  border-radius:12px;background:var(--lima);color:var(--tinta-sobre-verde);box-shadow:none;
  font-size:14px;font-weight:700;letter-spacing:0;
}
body.modo-audio .ap-gen:hover{background:var(--lima-clara);filter:none}
body.modo-audio .ap-gen b{
  padding-left:12px;border-left:1px solid color-mix(in srgb,var(--tinta-sobre-verde) 25%,transparent);gap:5px;
}
body.modo-audio .ap-gen b>.ic{display:none}
body.modo-audio .ap-gen-unidad{font-size:12px;font-weight:500}
body.modo-audio .composer :is(button,select,input,textarea):focus-visible{outline:2px solid var(--lima);outline-offset:3px}
@media(max-width:900px){
  body.modo-audio #mesa{
    left:0;right:0;top:auto;bottom:0;width:auto;padding:0 8px calc(8px + env(safe-area-inset-bottom));
    display:flex;justify-content:center;
  }
  body.modo-audio .mesa-in{
    width:min(600px,100%);height:auto;max-height:72vh;max-height:72dvh;padding:12px 14px 14px;
    border:1px solid var(--border2);border-radius:18px;background:var(--surface);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  body.modo-audio #pg-home .wrap{padding:22px 16px calc(var(--mesa-h,460px) + 40px)}
  body.modo-audio .mesa-top{padding-bottom:10px}
  body.modo-audio .composer{gap:10px}
  body.modo-audio .ap-voz{min-height:130px}
  body.modo-audio #ta{min-height:106px;max-height:24dvh;font-size:14px}
  body.modo-audio .ap-gen{bottom:0;min-height:48px}
  body.modo-audio .ap-vozcambia,body.modo-audio .ap-vozplay{min-height:42px}
}
/* El Estudio no importa tokens.css; un enlace administrativo oculto
   debe seguir oculto aunque la navegación aplique display:flex. */
a[data-acceso-admin][hidden] { display: none !important; }

/* Video · Inicio / Final (5-oct-2026): dos huecos lado a lado, «Primer
   fotograma» y «Último fotograma». Vacíos reutilizan la caja de referencia
   (.ref-add-compact) con un + grande; llenos enseñan la miniatura, su nombre
   y un botón para quitarla. El marcado sale de huecosFotogramas (estudio-3.js). */
#mesa #refgrid .ref-frame-slots{display:flex;flex:1 0 100%;gap:8px;min-width:0}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray #refgrid .ref-orb.ref-frame-mas{width:38px;height:38px}
body.studio-workbench[data-studio-mode="video"]:not(.experiencia-facil):not(.modo-audio) #mesa #imageReferenceTray #refgrid .ref-orb.ref-frame-mas svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
body.studio-workbench:not(.experiencia-facil):not(.modo-audio)[data-studio-mode="video"] #mesa #refgrid .refwrap-compact.ref-frame-lleno{position:relative}
#mesa #refgrid .ref-frame-ver{
  position:relative;display:flex;align-items:flex-end;justify-content:flex-start;width:100%;height:84px;margin:0;padding:0;
  border:1px solid var(--border2);border-radius:12px;overflow:hidden;background:var(--surface2);color:var(--text);
  font:500 11px/1.3 var(--font);text-align:left;cursor:zoom-in;
}
#mesa #refgrid span.ref-frame-ver{align-items:center;justify-content:center;flex-direction:column;gap:7px;font-size:13px;cursor:default}
#mesa #refgrid .ref-frame-ver img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#mesa #refgrid button.ref-frame-ver .ref-add-label{
  position:relative;z-index:1;max-width:100%;padding:4px 8px;border-radius:0 8px 0 0;
  background:color-mix(in srgb,var(--bg) 82%,transparent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#mesa #refgrid .ref-frame-quitar{
  position:absolute;top:5px;right:5px;z-index:2;display:grid;place-items:center;width:28px;height:28px;padding:0;
  border:0;border-radius:8px;background:color-mix(in srgb,var(--negro-abismo) 88%,transparent);color:var(--text);cursor:pointer;
}
#mesa #refgrid .ref-frame-quitar svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
#mesa #refgrid .ref-frame-quitar:hover{background:var(--peligro);color:var(--tinta-sobre-verde)}
#mesa #refgrid button.ref-frame-ver:hover{border-color:var(--studio-accent)}
#mesa #refgrid :is(.ref-frame-ver,.ref-frame-quitar):focus-visible{outline:2px solid var(--studio-accent);outline-offset:2px}


/* cocuyo-css: assets/css/estudio-workspace.css */
/* Estudio avanzado · 5-sep-2026. Shell, editor y resultados como un espacio
   de trabajo. Los modelos, el monedero y las generaciones siguen intactos.
   Referencias: jerarquia de Artlist y mesa de creacion de Higgsfield. */
body.studio-workbench{
  --side:196px;--studio-editor:350px;
  background:var(--bg);overflow-x:clip;
}
body.studio-workbench::after,body.studio-workbench .fx-aurora,body.studio-workbench .fx-fireflies{display:none}
body.studio-workbench .main{overflow:visible;min-width:0}
body.studio-workbench .side{
  height:100dvh;padding:27px 14px 16px;background:var(--bg);border-right:1px solid var(--border);
}
body.studio-workbench .side>.top{padding:0 6px 32px}
body.studio-workbench .brand{gap:7px;flex-wrap:wrap;letter-spacing:-.04em}
body.studio-workbench .brand .cocuyologo{display:none}
body.studio-workbench .brand .wordmark{font-size:22px;font-weight:700}
body.studio-workbench .brand .claqueta{font-size:10px;padding:3px 5px;letter-spacing:0}
.studio-nav-caption{padding:0 12px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}
body.studio-workbench .side>.navlist{gap:5px}
body.studio-workbench .navlist a{
  min-height:44px;padding:11px 12px;gap:11px;font-size:13px;font-weight:450;border-radius:10px;color:var(--muted2);
}
body.studio-workbench .navlist a.active{background:var(--surface2);color:var(--text);box-shadow:none;font-weight:600}
body.studio-workbench .navlist a.active>.ic{color:var(--lima)}
body.studio-workbench .navlist a:hover{background:var(--surface)}
body.studio-workbench #toolnav{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
body.studio-workbench .side .grouphead{padding:26px 12px 10px;font-size:10px;color:var(--muted)}
body.studio-workbench .side .sessions .item{min-height:40px;padding:9px 10px;font-size:12px;border-radius:9px}
body.studio-workbench .side .sessions .sq{width:24px;height:24px;background:transparent;color:var(--muted)}
body.studio-workbench .side .sessions .item.on{background:var(--surface);color:var(--text)}
body.studio-workbench .side .foot{padding-top:18px;gap:12px}
body.studio-workbench .upgbtn{min-height:38px;font-size:11px;border-color:var(--border2);color:var(--muted2);background:transparent}
body.studio-workbench .acct{min-height:50px;background:var(--surface);padding:10px;border-radius:11px}
body.studio-workbench .acct .av{background:var(--surface3);color:var(--lima);font-weight:650}
body.studio-workbench .acct .cr{font-size:12px}
body.studio-workbench .acct .cr .ic{color:var(--lima);stroke:currentColor!important}

/* Cuenta e iconos: jerarquía del perfil de Higgsfield + agrupación del
   User Profile Dropdown Menu de shadcnspace (21st.dev, 24857). */
body.studio-workbench .side>.navlist a{min-height:52px;gap:12px;padding:8px 10px;font-weight:550}
body.studio-workbench .side>.navlist a>.ic{box-sizing:content-box;width:19px;height:19px;padding:8px;border-radius:10px;stroke-width:1.75;background:var(--surface);border:1px solid var(--border);color:var(--muted2);flex:none}
body.studio-workbench .side>.navlist a.active>.ic{background:color-mix(in srgb,var(--lima) 12%,var(--surface));border-color:color-mix(in srgb,var(--lima) 26%,var(--border));color:var(--lima)}
body.studio-workbench .side>.navlist a:hover>.ic{border-color:var(--border2);color:var(--text)}
body.studio-workbench .acct{width:100%;text-align:left;gap:10px;min-height:64px;border:1px solid var(--border);color:var(--text);cursor:pointer;box-shadow:none}
body.studio-workbench .acct:hover,body.studio-workbench .acct[aria-expanded=true]{background:var(--surface2);border-color:var(--border2)}
body.studio-workbench .acct .av{width:34px;height:34px;flex:none;border-radius:10px;border:1px solid var(--border2);font-size:14px}
.acct-identidad{display:grid;gap:4px;min-width:0;flex:1}
.acct-identidad strong{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.studio-workbench .acct .cr{margin:0;display:flex;gap:4px;align-items:center;color:var(--muted2);font-size:11px}
.acct-chevron{width:14px;height:14px;color:var(--muted);flex:none}
body.studio-workbench .accmenu{width:292px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 100px);overflow:auto;bottom:88px;border-radius:18px;background:var(--elev);border-color:var(--border2);padding:8px;box-shadow:var(--sombra-3)}
.acc-identidad{display:flex;gap:12px;align-items:center;padding:12px 10px 17px}
.acc-identidad>div{min-width:0;flex:1}.acc-identidad strong{font-size:13px;font-weight:600}
.acc-avatar{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid var(--border2);border-radius:12px;background:var(--surface2);color:var(--lima)}
.acc-avatar .ic{width:21px;height:21px}
body.studio-workbench .accmenu .em{padding:4px 0 0;border:0;font-size:11px;overflow-wrap:anywhere;color:var(--muted)}
body.studio-workbench .accmenu .card{margin:0 2px 12px;padding:14px 12px;background:var(--surface);border-radius:12px;gap:10px;cursor:default}
body.studio-workbench .accmenu .card>.ic{width:22px;height:22px;color:var(--lima);flex:none}
body.studio-workbench .accmenu .card b{font-size:16px;font-weight:650;letter-spacing:-.03em}
body.studio-workbench .accmenu .card small{font-size:11px;margin-top:4px}
#accRecargar{margin-left:auto;display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--lima);color:var(--tinta-sobre-verde)}
#accRecargar:hover{background:var(--lima-clara)}
body.studio-workbench .accmenu .sec{padding:7px 0}
body.studio-workbench .accmenu .mi{min-height:42px;padding:10px 12px;font-size:12px;gap:12px;border-radius:9px}
body.studio-workbench .accmenu .mi>.ic{width:18px;height:18px;color:var(--muted);stroke-width:1.75;flex:none}
body.studio-workbench .accmenu .mi:hover>.ic{color:var(--lima)}
body.studio-workbench .acct:focus-visible,body.studio-workbench .accmenu :is(a,button):focus-visible{outline:2px solid var(--lima);outline-offset:2px}
body.studio-workbench #submenu{left:314px!important;max-width:min(230px,calc(100vw - 24px))}
@media(max-width:600px){body.studio-workbench #submenu{left:24px!important;bottom:104px;width:268px;z-index:91}}

.studio-topbar{
  position:sticky;top:0;z-index:45;display:flex;align-items:center;justify-content:space-between;
  min-height:72px;padding:14px 32px;background:var(--bg);border-bottom:1px solid var(--border);
}
.studio-topbar-title{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600}
.studio-topbar-title>span:last-child{display:flex;align-items:center;gap:10px}
.studio-topbar-title b{font-size:10px;font-weight:500;padding:4px 7px;border:1px solid var(--border2);border-radius:5px;color:var(--muted2)}
.studio-two-lights{display:flex;gap:4px}
.studio-two-lights i{width:5px;height:13px;background:var(--lima);border-radius:3px;transform:rotate(18deg)}
.studio-cine-link{display:flex;align-items:center;gap:8px;color:var(--muted2);font-size:12px;padding:9px 0}
.studio-cine-link:hover{color:var(--lima)}
body.studio-workbench #pg-home>.studio-wrap{
  padding:30px 32px 64px;max-width:1512px;margin:0 auto;
}
.studio-workhead{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.studio-eyebrow{color:var(--muted);font-size:10px;line-height:1.5;font-weight:550;letter-spacing:.09em;text-transform:uppercase}
body.studio-workbench #pg-home #title{
  display:block;
  margin:7px 0 7px;font-family:var(--font);font-size:clamp(24px,2.4vw,32px);line-height:1.2;font-weight:600;
  letter-spacing:-.035em;text-align:left;animation:none;
}
.studio-workhead p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.studio-jump{display:none;align-items:center;gap:8px;font-size:12px;white-space:nowrap}
.studio-workspace{display:grid;grid-template-columns:var(--studio-editor) minmax(0,1fr);gap:24px;align-items:start}
.studio-editor-slot{position:sticky;top:92px;min-width:0;scroll-margin-top:92px}
body.studio-workbench #mesa{
  position:static;inset:auto;display:block;width:100%;padding:0;pointer-events:auto;z-index:auto;
}
body.studio-workbench #mesa .mesa-in{
  display:block;width:100%;height:auto;max-height:calc(100dvh - 260px);overflow-y:auto;overflow-x:hidden;
  padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:17px;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;scrollbar-width:thin;
}
body.studio-workbench #mesa .mesa-in::before,body.studio-workbench #mesa .mesa-in::after{display:none}
.studio-editor-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.studio-editor-head>span:first-child{font-size:10px;letter-spacing:.09em;font-weight:650;color:var(--text)}
.studio-editor-badge{font-size:10px;font-weight:400;color:var(--muted)}
body.studio-workbench #mesa .mesa-top{display:block;margin:0 0 22px;padding:0;border:0;background:none}
body.studio-workbench #mesa .modesw{width:100%;margin:0}
body.studio-workbench #mesa .modesw .inner{
  display:flex;width:100%;padding:4px;gap:3px;background:var(--bg);border:1px solid var(--border);border-radius:11px;
}
body.studio-workbench #mesa .modesw button{
  justify-content:center;flex:1 1 0;min-width:0;min-height:39px;padding:9px 5px;gap:6px;font-size:12px;font-weight:500;
}
body.studio-workbench #mesa .modesw button .ic{width:15px;height:15px;flex-basis:15px}
body.studio-workbench #mesa .modesw button.active{background:var(--surface3);color:var(--text);box-shadow:none}
body.studio-workbench #mesa .modesw button.active .ic{color:var(--lima)}
body.studio-workbench #mesa .composer{
  display:flex;flex-direction:column;min-width:0;gap:0;padding:0;margin:0;background:none;border:0;box-shadow:none;
}
.studio-field-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;margin-bottom:9px}
.studio-field-heading b{font-weight:600;color:var(--muted2)}
.studio-field-heading>span{color:var(--muted);font-size:10px;font-weight:400}
body.studio-workbench #mesa .studio-reference-heading{order:1}
body.studio-workbench #mesa #imageRefControls,body.studio-workbench #mesa #refgrid{order:2}
body.studio-workbench #mesa #attrow{order:3}
body.studio-workbench #mesa .studio-prompt-heading{order:4;margin-top:5px}
body.studio-workbench #mesa #ta{order:5}
body.studio-workbench #mesa #parambar{order:6}
body.studio-workbench #mesa #headicons{order:7}
body.studio-workbench #mesa .image-ref-controls{display:flex;gap:9px;margin:0 0 18px}
body.studio-workbench #mesa .image-ref-add{
  width:100%;min-height:63px;justify-content:flex-start;gap:10px;padding:14px;background:var(--bg);
  border:1px dashed var(--border2);border-radius:11px;font-size:12px;
}
body.studio-workbench #mesa .image-ref-add>.ic{width:22px;height:22px;flex-basis:22px;color:var(--muted2)}
body.studio-workbench #mesa .image-ref-add b{margin-left:auto;background:var(--surface2);color:var(--lima);font-size:11px}
body.studio-workbench #mesa .image-ref-add:hover{border-color:var(--lima);background:var(--surface2)}
body.studio-workbench #mesa .image-ref-hint{font-size:10px;color:var(--muted);flex-basis:100%;padding-left:2px}
body.studio-workbench #mesa #refgrid{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px;overflow:visible}
body.studio-workbench #mesa #refgrid .refwrap{flex:1 1 44%;min-width:0}
body.studio-workbench #mesa #refgrid .refbox{
  justify-content:flex-start;width:100%;min-height:46px;gap:8px;padding:11px 10px;font-size:11px;background:var(--bg);
}
body.studio-workbench #mesa #attrow{max-width:100%;padding-bottom:10px;margin-bottom:12px!important}
body.studio-workbench #mesa .attchip{flex:0 0 72px;width:72px;height:72px;border-radius:10px}
body.studio-workbench #mesa #ta{
  min-height:164px;max-height:min(320px,36dvh);padding:13px 14px;margin:0 0 21px;
  border:1px solid var(--border2);border-radius:11px;background:var(--bg);font-size:13px;line-height:1.7;
  overflow-y:auto;overflow-wrap:anywhere;scrollbar-width:thin;
}
body.studio-workbench #mesa #ta:focus-visible{outline:2px solid var(--lima);outline-offset:2px;border-color:var(--border2)}
body.studio-workbench #mesa #ta:empty:before{color:var(--muted)}
body.studio-workbench #mesa #parambar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0}
body.studio-workbench #mesa #parambar>.lbl{
  position:static;clip-path:none;width:auto;height:auto;grid-column:1/-1;padding:0 0 2px;margin:0;font-size:10px;letter-spacing:.07em;
}
body.studio-workbench #mesa .param{display:flex;justify-content:flex-start;width:100%;min-height:44px;padding:10px;gap:7px;font-size:12px;border-color:var(--border)}
body.studio-workbench #mesa .param .car{margin-left:auto;flex-shrink:0}
body.studio-workbench #mesa #parambar>.param[data-pop="model"]{grid-column:1/-1;min-height:49px;background:var(--bg);border-color:var(--border2)}
body.studio-workbench #mesa .param[data-pop="model"]>.tile{width:21px;height:21px;flex-basis:21px;margin-right:2px}
body.studio-workbench #mesa #parambar>div{min-width:0}
body.studio-workbench #mesa .param-caption{font-size:11px}
body.studio-workbench #mesa #parambar .cost{
  display:flex;justify-content:flex-end;grid-column:1/-1;min-height:34px;padding:7px 2px 0;margin:3px 0 0;gap:5px;
}
body.studio-workbench #mesa .cost-caption{display:block;margin-right:auto;color:var(--muted2);font-size:11px}
body.studio-workbench #mesa .cost b{font-size:16px;font-weight:650}
body.studio-workbench #mesa #omniLimits{grid-column:1/-1;font-size:10px!important;line-height:1.6!important;padding:2px 0 0}
body.studio-workbench #mesa #headicons{
  position:sticky;bottom:-18px;z-index:3;display:flex;justify-content:stretch;margin:9px 0 0;padding:10px 0 12px;border:0;background:var(--surface);
}
body.studio-workbench #mesa #headicons .roundbtn{
  width:100%;min-height:48px;padding:13px 16px;border-radius:11px;box-shadow:none;background:var(--lima);font-size:13px;
}
body.studio-workbench #mesa #headicons .roundbtn:before{display:none}
body.studio-workbench #mesa #headicons .roundbtn:hover{background:var(--lima-clara)}
.studio-tools{margin-top:17px;padding-top:12px;border-top:1px solid var(--border)}
.studio-tools[hidden]{display:none}
.studio-tools summary{cursor:pointer;color:var(--muted);font-size:11px;line-height:1.5;padding:4px 2px}
body.studio-workbench #mesa .studio-tools #apps{gap:6px;flex-wrap:wrap;margin:12px 0 0;justify-content:flex-start}
body.studio-workbench #mesa .studio-tools .appbtn{border:1px solid var(--border);border-radius:8px;min-height:34px;padding:8px;font-size:10px}
body.studio-workbench #mesa .studio-tools .tagapp{display:none}

/* Audio usa la misma mesa, con su ficha y sus controles reales. */
body.studio-workbench.modo-audio #mesa .composer{display:flex;gap:11px}
body.studio-workbench.modo-audio #mesa .composer>*{order:initial}
body.studio-workbench.modo-audio #mesa #ta,body.studio-workbench.modo-audio #mesa #parambar{order:initial}
body.studio-workbench.modo-audio #mesa .studio-field-heading{display:none}
body.studio-workbench.modo-audio #mesa #attrow{display:none!important}
body.studio-workbench.modo-audio #mesa #parambar{display:flex;gap:10px}
body.studio-workbench.modo-audio #mesa #ta{min-height:146px;margin:0;max-height:28dvh}
body.studio-workbench.modo-audio #mesa .ap-voz{min-height:135px;border-color:var(--border);background:var(--bg)}
body.studio-workbench.modo-audio #mesa .ap-rot{font-size:11px;margin-top:8px}
body.studio-workbench.modo-audio #mesa .ap-fila,body.studio-workbench.modo-audio #mesa .ap-idioma{background:var(--bg);min-height:46px}
body.studio-workbench.modo-audio #mesa .ap-gen{position:static;margin-top:0;min-height:48px;border-radius:11px}

.studio-results{min-width:0;scroll-margin-top:96px}
.studio-results-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:51px;margin-bottom:14px}
.studio-results-head h2{display:flex;align-items:center;gap:9px;font-family:var(--font);font-size:15px;letter-spacing:-.02em;font-weight:600;margin:0}
[data-studio-count]{display:inline-grid;place-items:center;min-width:22px;min-height:20px;border-radius:5px;font-size:10px;font-weight:500;color:var(--muted2);background:var(--surface2);padding:1px 5px}
.studio-results-head p{margin:5px 0 0;font-size:11px;color:var(--muted)}
.studio-library-link{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 0;font-size:11px;font-weight:500;color:var(--muted2)}
.studio-library-link:hover{color:var(--lima)}
body.studio-workbench #genwrap{margin:0!important;max-width:none!important}
body.studio-workbench #genout{display:block;margin:0!important}
body.studio-workbench .histbar{margin:0 0 18px;padding:10px 0 13px;border-bottom:1px solid var(--border);background:none}
body.studio-workbench .hist-dia{position:static;padding:9px 0 14px;background:none;font-size:12px}
body.studio-workbench .hist-dia i{font-size:10px;color:var(--muted)}
body.studio-workbench .hist-rejilla{gap:16px;margin-bottom:24px}
body.studio-workbench .jobcard.limpia{overflow:hidden;border:1px solid var(--border);border-radius:13px;background:var(--surface)}
body.studio-workbench .jobcard.limpia:hover{border-color:var(--border2)}
body.studio-workbench .jobcard .jmarco{border-radius:0}
.studio-job-caption{padding:12px 13px 14px}
.studio-job-caption>span{display:block;color:var(--muted2);font-size:10px;font-weight:550}
.studio-job-caption p{margin:6px 0 0;color:var(--muted);font-size:11px;line-height:1.5;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
body.studio-workbench .jr-reserva{margin:8px 0 0;color:var(--muted2);font-size:12px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
body.studio-workbench .fila-aud{border-radius:13px;padding:14px;flex-wrap:wrap;gap:10px}
body.studio-workbench .fa-txt{flex:1 1 140px;max-width:none}
body.studio-workbench .fa-onda{min-width:90px}
body.studio-workbench .fa-modelo{font-size:10px;margin-left:auto}
body.studio-workbench .fa-play{width:40px;height:40px;flex-basis:40px}
body.studio-workbench .fa-foto{background:var(--surface3);color:var(--lima)}
body.studio-workbench .fa-foto b{color:var(--lima)}

.studio-empty{overflow:hidden;border:1px solid var(--border);border-radius:17px;background:var(--surface)}
.studio-empty-preview{position:relative;min-height:300px;aspect-ratio:1.95;overflow:hidden;background:var(--bg)}
.studio-empty-art{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center}
.studio-empty-preview::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--negro-abismo) 20%,transparent),transparent 30%,color-mix(in srgb,var(--negro-abismo) 78%,transparent))}
.studio-preview-label{position:absolute;top:20px;left:24px;z-index:1;color:var(--blanco-luz);font-size:10px;padding:5px 8px;border:1px solid color-mix(in srgb,var(--blanco-luz) 30%,transparent);border-radius:5px;background:color-mix(in srgb,var(--negro-abismo) 48%,transparent)}
.studio-preview-caption{position:absolute;z-index:1;left:28px;bottom:26px;color:var(--blanco-luz)}
.studio-preview-caption>span{display:block;font-size:9px;font-weight:500;letter-spacing:.14em;margin-bottom:11px}
.studio-preview-caption>b{display:block;font-family:var(--display);font-size:clamp(32px,3.5vw,54px);font-weight:500;line-height:.98;letter-spacing:-.035em}
.studio-empty-copy{padding:27px 28px 25px}
.studio-empty-copy h3{font-family:var(--font);font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.03em;margin:0 0 10px}
.studio-empty-copy p{max-width:440px;font-size:12px;line-height:1.8;color:var(--muted);margin:0 0 20px}
.studio-start{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:42px;padding:12px 15px;background:var(--lima);color:var(--tinta-sobre-verde);border-radius:9px;font-size:12px;font-weight:600}
.studio-start:hover{background:var(--lima-clara)}
.studio-workflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:18px 24px;gap:10px;border-top:1px solid var(--border);background:var(--bg)}
.studio-workflow>span{display:flex;align-items:center;gap:8px;min-width:0}
.studio-workflow i{font-family:var(--fuente-mono);font-size:9px;font-style:normal;color:var(--lima);font-weight:500}
.studio-workflow b{color:var(--muted);font-size:10px;font-weight:450;line-height:1.5}
.studio-audio-art{position:absolute;inset:0;background:radial-gradient(ellipse at 78% 30%,var(--acento-fondo),var(--bg) 74%)}
.studio-audio-disc{position:absolute;width:210px;height:210px;right:14%;top:8%;border:1px solid var(--border2);border-radius:50%;box-shadow:0 0 0 28px color-mix(in srgb,var(--border) 30%,transparent),0 0 0 58px color-mix(in srgb,var(--border) 18%,transparent)}
.studio-audio-disc::before{content:'';position:absolute;inset:22px;border:1px solid var(--border2);border-radius:50%}
.studio-audio-disc i{position:absolute;width:9px;height:9px;left:calc(50% - 14px);top:calc(50% - 5px);background:var(--lima);border-radius:50%;box-shadow:var(--glow-suave)}
.studio-audio-disc i+i{left:calc(50% + 6px)}
.studio-audio-bars{position:absolute;right:6%;bottom:16%;display:flex;align-items:center;gap:5px;height:120px}
.studio-audio-bars i{width:4px;height:var(--bar);border-radius:4px;background:var(--lima);opacity:.65}

/* El selector permanece uno por modelo; ahora se leen nombre, proposito y
   especificaciones en ese orden, sin esconder limites largos como Omni. */
body.studio-workbench #modal{padding:40px 22px;background:color-mix(in srgb,var(--negro-abismo) 78%,transparent);backdrop-filter:blur(8px)}
body.studio-workbench #modal .mbox{width:min(800px,100%);max-height:calc(100dvh - 80px);border-radius:19px;background:var(--surface);border-color:var(--border2)}
.studio-model-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:26px 25px 15px}
.studio-model-head h2{font-family:var(--font);font-size:24px;letter-spacing:-.04em;font-weight:600;margin:5px 0 0}
.studio-model-note{font-size:10px;color:var(--muted)}
body.studio-workbench #modal .mtop{border:0;padding:0 24px 17px;gap:10px}
body.studio-workbench #modal .msearch{min-height:45px;background:var(--bg);border-radius:10px;border-color:var(--border2)}
body.studio-workbench #modal .mclose{width:42px;height:42px;border:1px solid var(--border);border-radius:10px}
body.studio-workbench #modal .mbody{padding:0 18px 22px}
body.studio-workbench #modal .mhead{padding:12px 8px;font-size:9px;letter-spacing:.08em;color:var(--muted)}
body.studio-workbench #modal .mrow{gap:14px;margin:0 0 8px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--bg);outline-offset:2px}
body.studio-workbench #modal .mrow:hover{border-color:var(--border2);background:var(--surface2)}
body.studio-workbench #modal .mrow.sel{border-color:color-mix(in srgb,var(--lima) 55%,var(--border));background:var(--lima-suave)}
body.studio-workbench #modal .mrow .logo{width:38px;height:38px;flex-basis:38px;background:var(--surface2)}
body.studio-workbench #modal .mrow .tile{width:25px;height:25px}
body.studio-workbench #modal .mrow .nm{font-size:14px;font-weight:600}
body.studio-workbench #modal .mrow .ds{white-space:normal;font-size:11px;line-height:1.7;margin-top:7px;overflow:visible}
.studio-model-specs{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}
body.studio-workbench #modal .spec{padding:4px 7px;font-size:10px;font-weight:450;background:var(--surface2);color:var(--muted2);white-space:normal}
body.studio-workbench #modal .bdg{font-size:9px;font-weight:550;background:var(--surface3);color:var(--muted2);padding:3px 6px}
body.studio-workbench #modal .radio{width:18px;height:18px;flex-basis:18px;margin-top:1px}
.studio-model-empty{padding:24px 10px;color:var(--muted);font-size:13px}
body.studio-workbench :is(.studio-start,.studio-jump,.studio-library-link,.studio-cine-link,.studio-tools summary,.mrow):focus-visible{outline:2px solid var(--lima);outline-offset:3px}

/* Los menus se posicionan junto a su control y usan la capa superior nativa
   si esta disponible, sin sacarlos del DOM ni perder sus manejadores. */
body.studio-workbench #mesa .studio-floating{
  position:fixed;inset:auto;margin:0;transform:none;min-width:0;overflow-y:auto;overscroll-behavior:contain;
  padding:9px;border:1px solid var(--border2);border-radius:13px;background:var(--surface);color:var(--text);
  box-shadow:0 18px 48px color-mix(in srgb,var(--negro-abismo) 65%,transparent);text-align:left;z-index:90;
}
body.studio-workbench #mesa .studio-floating .ph{font-size:10px;letter-spacing:.035em;line-height:1.5;color:var(--muted2);padding:10px}
body.studio-workbench #mesa .studio-floating .opt{min-height:42px;font-size:12px;gap:10px}
body.studio-workbench #mesa .studio-floating button{min-height:44px;font-size:12px;justify-content:flex-start}
body.studio-workbench #mesa .studio-floating .slidewrap{min-width:0;padding:8px}
body.studio-workbench #mesa .studio-floating::backdrop{background:transparent}

@media(min-width:1600px){body.studio-workbench{--studio-editor:378px}.studio-workspace{gap:30px}}
@media(min-width:1001px){
  body.studio-workbench #mesa #ta{min-height:120px;margin-bottom:14px}
  body.studio-workbench #mesa .mesa-top{margin-bottom:15px}
  body.studio-workbench #mesa #refgrid{margin-bottom:12px}
  body.studio-workbench #mesa #parambar{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.studio-workbench #mesa .param{padding:9px 7px;gap:5px;font-size:11px}
  body.studio-workbench.modo-audio #mesa .ap-gen{position:sticky;bottom:-18px;z-index:3;box-shadow:0 12px 0 12px var(--surface)}
}
@media(max-width:1190px){body.studio-workbench{--side:184px;--studio-editor:314px}.studio-topbar{padding-inline:24px}body.studio-workbench #pg-home>.studio-wrap{padding-inline:24px}.studio-workspace{gap:20px}body.studio-workbench #mesa .mesa-in{padding:15px}.studio-workflow{padding:16px}.studio-workflow>span{align-items:flex-start;gap:6px}.studio-empty-copy{padding:24px}.studio-empty-preview{min-height:290px}}
@media(max-width:1000px){
  .studio-workspace{grid-template-columns:minmax(0,1fr);gap:28px}
  .studio-editor-slot{position:static;max-width:none}
  body.studio-workbench #mesa .mesa-in{max-height:none;overflow:visible;padding:20px;border-radius:16px}
  body.studio-workbench #mesa #headicons{position:static;padding:0}
  body.studio-workbench #mesa #ta{min-height:126px;max-height:240px}
  body.studio-workbench #mesa #refgrid .refwrap{flex:0 1 auto}
  body.studio-workbench #mesa #parambar{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.studio-workbench #mesa #parambar>.param[data-pop="model"]{grid-column:1/-1}
  .studio-jump{display:flex}
  .studio-empty-preview{min-height:320px;aspect-ratio:1.9}
  body.studio-workbench.modo-audio #mesa .ap-voz{min-height:130px}
  body.studio-workbench.modo-audio #mesa #parambar{display:flex}
}
@media(max-width:900px){
  body.studio-workbench .side{width:196px;z-index:80}
  .studio-topbar{min-height:62px;padding:10px 20px}
  body.studio-workbench .studio-topbar .mobbtn{display:grid;position:static;width:32px;height:34px;margin-left:-5px}
  .studio-topbar-title{gap:9px}
  body.studio-workbench #pg-home>.studio-wrap{padding:25px 20px 46px}
  body.studio-workbench .studio-editor-slot,.studio-results{scroll-margin-top:78px}
}
@media(max-width:600px){
  .studio-topbar{padding:10px 16px}
  .studio-topbar-title{font-size:13px}.studio-topbar-title b{font-size:9px;padding:3px 5px}
  .studio-two-lights{display:none}.studio-cine-link{font-size:10px;gap:4px}
  body.studio-workbench #pg-home>.studio-wrap{padding:22px 14px 40px}
  .studio-workhead{align-items:flex-start;flex-direction:column;gap:13px;margin-bottom:18px}
  body.studio-workbench #pg-home #title{font-size:27px;margin-top:6px}
  .studio-workhead p{font-size:12px;max-width:290px}
  .studio-jump{align-self:flex-end;min-height:32px;font-size:11px;margin-top:-2px}
  body.studio-workbench #mesa .mesa-in{padding:17px 15px;border-radius:14px}
  .studio-editor-head{margin-bottom:12px}.studio-editor-badge{font-size:9px}
  body.studio-workbench #mesa .mesa-top{margin-bottom:19px}
  body.studio-workbench #mesa #ta{min-height:140px;max-height:260px;font-size:14px}
  body.studio-workbench #mesa #refgrid .refwrap{flex:1 1 44%}
  body.studio-workbench #mesa #parambar{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.studio-workbench #mesa .param{min-height:45px}
  body.studio-workbench #mesa #headicons .roundbtn{min-height:49px;font-size:14px}
  .studio-results-head{margin-bottom:14px;gap:8px}.studio-results-head p{font-size:10px}.studio-library-link{font-size:10px;gap:5px}
  .studio-empty{border-radius:14px}.studio-empty-preview{min-height:266px;aspect-ratio:1.2}
  .studio-preview-label{top:15px;left:18px;font-size:9px}
  .studio-preview-caption{left:20px;bottom:22px}.studio-preview-caption>b{font-size:42px}
  .studio-empty-copy{padding:22px 20px}.studio-empty-copy h3{font-size:18px}.studio-empty-copy p{font-size:12px}
  .studio-workflow{padding:16px 18px;gap:12px}.studio-workflow>span{flex-direction:column;gap:6px}.studio-workflow b{font-size:10px}
  .studio-audio-disc{right:8%;width:185px;height:185px}.studio-audio-bars{right:6%;opacity:.6}
  body.studio-workbench #modal{padding:12px}
  body.studio-workbench #modal .mbox{max-height:calc(100dvh - 24px);border-radius:15px}
  .studio-model-head{padding:21px 18px 16px}.studio-model-head h2{font-size:22px}.studio-model-note{display:none}
  body.studio-workbench #modal .mtop{padding:0 15px 12px}
  body.studio-workbench #modal .mbody{padding:0 10px 15px}
  body.studio-workbench #modal .mrow{gap:10px;padding:14px 12px}body.studio-workbench #modal .mrow .logo{width:29px;height:29px;flex-basis:29px}
  body.studio-workbench #modal .mrow .nm{font-size:13px}body.studio-workbench #modal .mrow .ds{font-size:11px}
  body.studio-workbench #modal .radio{width:15px;height:15px;flex-basis:15px}
}
@media(prefers-reduced-motion:reduce){body.studio-workbench .side{transition:none}}
/* Cola de creaciones (25-sep-2026): zona «aria-live» que anuncia a los
   lectores de pantalla cuándo una creación entra en cola, pasa al proveedor
   o se cancela. Invisible en pantalla, pero la leen los lectores. */
.cola-aviso-lector{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}


/* cocuyo-css: assets/css/estudio-componentes.css */
/* 21st.dev adaptado a HTML/CSS nativos de Cocuyo, 5-sep-2026.
   Modal Pricing · kokonutd · demo623; Action Button · Codehagen · demo1051.
   Procedencia y revisión: docs/COMPONENTES_ESTUDIO_21ST_2026-09-05.md.
   No modifica tamaños/posiciones del compositor, importes ni proveedores. */
body.studio-workbench #mesa #headicons .roundbtn,
body.studio-workbench.modo-audio #mesa .ap-gen{
  border:1px solid color-mix(in srgb,var(--lima-clara) 65%,var(--lima));
  background:linear-gradient(165deg,var(--lima-clara) -75%,var(--lima) 62%);
  color:var(--tinta-sobre-verde);font-weight:650;letter-spacing:-.015em;
  transition:filter .16s ease,border-color .16s ease;
}
body.studio-workbench #mesa #headicons .roundbtn{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--blanco-luz) 45%,transparent),inset 0 -2px 0 color-mix(in srgb,var(--verde-profundo) 20%,transparent)}
body.studio-workbench #mesa #headicons .roundbtn:hover:not(:disabled),
body.studio-workbench.modo-audio #mesa .ap-gen:hover:not(:disabled){filter:brightness(1.06);border-color:var(--lima-clara)}
body.studio-workbench #mesa #headicons .roundbtn:active:not(:disabled),
body.studio-workbench.modo-audio #mesa .ap-gen:active:not(:disabled){filter:brightness(.96)}
body.studio-workbench #mesa #headicons .roundbtn:disabled,
body.studio-workbench.modo-audio #mesa .ap-gen:disabled{filter:saturate(.65);cursor:wait}
body.studio-workbench .side .upgbtn{
  border:1px solid color-mix(in srgb,var(--lima) 35%,var(--border));
  background:linear-gradient(110deg,var(--acento-fondo),var(--surface));
  color:var(--lima-clara);font-weight:550;box-shadow:inset 0 1px 0 var(--border);
  transition:background .16s ease,border-color .16s ease;
}
body.studio-workbench .side .upgbtn:hover{border-color:var(--lima);background:var(--acento-fondo)}
body.studio-workbench #mesa :is(.param,.image-ref-add,.refbox){transition:background .16s ease,border-color .16s ease;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--blanco-luz) 3%,transparent)}
body.studio-workbench #mesa :is(.param,.image-ref-add,.refbox):active{background:var(--surface3)}
/* Un unico chevron y marcas legibles sobre superficies oscuras. */
body.studio-workbench .param .car::before,body.studio-workbench .param .car::after{content:none}
body.studio-workbench .param .car{width:13px;height:13px;font-size:0;line-height:1;opacity:.6;display:inline-grid;place-items:center}
body.studio-workbench .param .car .glifo{display:none}
body.studio-workbench .param .car::after{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
body.studio-workbench #mesa .param{background:var(--surface2)}
body.studio-workbench #mesa .param:hover,body.studio-workbench #mesa .param.open{background:var(--surface3);border-color:var(--muted)}
body.studio-workbench #mesa .param.open .car{transform:rotate(180deg)}

body.studio-workbench #mesa .studio-generate-cost{font-size:11px;white-space:nowrap;border-left:1px solid color-mix(in srgb,currentColor 25%,transparent);padding-left:9px;margin-left:2px;font-weight:600}
body.studio-workbench #toolnav{margin:0;gap:7px}
body.studio-workbench #toolnav a{display:flex;align-items:center;gap:12px;min-height:50px;border:1px solid transparent;border-radius:12px;padding:11px 13px;font-size:14px;font-weight:500;transition:background .18s ease,border-color .18s ease,color .18s ease}
body.studio-workbench #toolnav a>.ic{width:21px;height:21px;flex:0 0 21px}
body.studio-workbench #toolnav a:hover{background:var(--surface2);border-color:var(--border2)}
body.studio-workbench #toolnav a.active{color:var(--lima-clara);background:color-mix(in srgb,var(--lima) 9%,var(--surface));border-color:color-mix(in srgb,var(--lima) 27%,var(--border));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--lima) 8%,transparent)}
body.studio-workbench .studio-nav-arrow{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;margin-left:auto;opacity:0;transition:opacity .18s ease}
body.studio-workbench #toolnav a:is(.active,:hover) .studio-nav-arrow{opacity:1}
body.studio-workbench .studio-library-nav{border-top:1px solid var(--border);padding-top:17px;margin-top:18px}
body.studio-workbench #toolnav a:focus-visible{outline:2px solid var(--lima);outline-offset:3px}

body.studio-workbench #payModal{padding:24px;background:color-mix(in srgb,var(--negro-abismo) 83%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body.studio-workbench #payModal.on{align-items:center;justify-content:center}
body.studio-workbench #payModal .pay-dialog{
  display:block;width:min(510px,100%);max-height:calc(100dvh - 48px);margin:0;
  padding:27px 29px 23px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  border:1px solid var(--border2);border-radius:20px;background:var(--surface);
  box-shadow:0 24px 90px color-mix(in srgb,var(--negro-abismo) 80%,transparent),inset 0 1px 0 color-mix(in srgb,var(--blanco-luz) 8%,transparent);
}
body.studio-workbench #payModal .pay-header{display:flex;align-items:center;gap:9px;margin-bottom:18px}
body.studio-workbench #payModal .pay-header>span:not(.pay-emblema){font-size:9px;font-weight:550;letter-spacing:.11em;color:var(--muted)}
body.studio-workbench #payModal .pay-emblema{display:flex;gap:4px}
body.studio-workbench #payModal .pay-emblema i{display:block;width:5px;height:5px;border-radius:50%;background:var(--lima);box-shadow:var(--glow-suave)}
body.studio-workbench #payModal #payClose{margin-left:auto;width:31px;height:31px;min-width:31px;border:1px solid var(--border);border-radius:8px;color:var(--muted2);background:var(--surface2);font-size:13px}
body.studio-workbench #payModal #payClose:hover{color:var(--text);border-color:var(--border2)}
body.studio-workbench #payTitle{font-family:var(--font);font-size:29px;font-weight:550;letter-spacing:-.045em;line-height:1.15;margin:0 0 10px;color:var(--text)}
body.studio-workbench #payDescription{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 19px}
body.studio-workbench #payModal .paysaldo{display:flex;align-items:center;justify-content:space-between;margin:0 0 23px;padding:12px 14px;background:var(--bg);border:1px solid var(--border);border-radius:10px;font-size:11px;color:var(--muted2)}
body.studio-workbench #payModal .paysaldo:empty{display:none}
body.studio-workbench #payModal .paysaldo b{font-size:15px;font-weight:600;color:var(--text)}
body.studio-workbench #payModal .paysaldo small{font-size:10px;font-weight:450;color:var(--muted)}
body.studio-workbench #payPacks{border:0;padding:0;margin:0;min-width:0}
body.studio-workbench #payPacks legend{font-size:11px;font-weight:550;color:var(--muted2);padding:0;margin-bottom:11px}
body.studio-workbench #payPacksList{display:grid;gap:9px}
body.studio-workbench #payPacksList:empty{display:none}
body.studio-workbench #payModal .paypack{
  display:flex;align-items:center;gap:14px;position:relative;margin:0;padding:16px 17px;min-height:79px;
  border:1px solid var(--border2);border-radius:12px;background:var(--bg);cursor:pointer;
  transform:none;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--blanco-luz) 3%,transparent);
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
body.studio-workbench #payModal .paypack:hover{border-color:var(--muted);background:var(--surface2);transform:none}
body.studio-workbench #payModal .paypack input{
  position:absolute;opacity:0;width:1px;height:1px;padding:0;margin:0;clip-path:inset(50%);
}
body.studio-workbench #payModal .paypack:has(input:focus-visible){outline:2px solid var(--lima);outline-offset:3px}
body.studio-workbench #payModal .pay-radio{width:17px;height:17px;flex:0 0 17px;border:1px solid var(--border2);border-radius:50%;background:var(--surface2);display:grid;place-items:center}
body.studio-workbench #payModal .pay-radio:after{content:'';width:7px;height:7px;border-radius:50%;background:var(--tinta-sobre-verde);opacity:0;transform:scale(.5);transition:transform .16s ease,opacity .16s ease}
body.studio-workbench #payModal .paypack.seleccionado{border-color:var(--lima);background:color-mix(in srgb,var(--lima) 5%,var(--bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lima) 10%,transparent)}
body.studio-workbench #payModal .paypack.seleccionado .pay-radio{border-color:var(--lima);background:var(--lima)}
body.studio-workbench #payModal .paypack.seleccionado .pay-radio:after{opacity:1;transform:scale(1)}
body.studio-workbench #payModal .paypack:has(input:disabled){cursor:wait;opacity:.6}
body.studio-workbench #payModal .pay-pack-copy{display:flex;flex-direction:column;min-width:0;gap:5px}
body.studio-workbench #payModal .pay-pack-copy b{font-size:13px;font-weight:600;color:var(--text);line-height:1.25}
body.studio-workbench #payModal .ppcred{font-size:11px;font-weight:450;color:var(--muted2);margin:0}
body.studio-workbench #payModal .pp{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-left:auto;font-size:19px;font-weight:550;letter-spacing:-.03em;color:var(--text);white-space:nowrap}
body.studio-workbench #payModal .pp small{font-size:8px;letter-spacing:.065em;color:var(--muted);font-weight:450}
body.studio-workbench #payModal .pay-resumen{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:21px 0 18px;padding:17px 0 0;border-top:1px solid var(--border)}
body.studio-workbench #payModal .pay-resumen>div{display:flex;flex-direction:column;gap:7px}
body.studio-workbench #payModal .pay-resumen>div:last-child{align-items:flex-end;text-align:right}
body.studio-workbench #payModal .pay-resumen span{font-size:10px;color:var(--muted);font-weight:400}
body.studio-workbench #payCredits{font-size:13px;color:var(--text);font-weight:550}
body.studio-workbench #payTotal{font-size:25px;font-weight:550;line-height:1;letter-spacing:-.045em;color:var(--text)}
body.studio-workbench #payMsg{display:block;font-size:11px;line-height:1.7;color:var(--muted2);padding:11px 13px;margin:0 0 14px;border:1px solid var(--border);border-radius:9px;background:var(--bg)}
body.studio-workbench #payMsg:empty{display:none}
body.studio-workbench #payMsg[data-estado="error"]{border-color:color-mix(in srgb,var(--peligro) 40%,var(--border));color:var(--peligro);background:color-mix(in srgb,var(--peligro) 4%,var(--bg))}
body.studio-workbench #payMsg[data-estado="aviso"]{color:var(--text)}
body.studio-workbench #payRetry{font-size:11px;color:var(--lima);font-weight:550;text-decoration:underline;text-underline-offset:3px;margin:-3px 0 17px;min-height:32px}
body.studio-workbench #payRetry[hidden]{display:none}
body.studio-workbench #payContinue{
  display:flex;align-items:center;justify-content:center;gap:10px;position:relative;width:100%;min-height:49px;padding:13px 20px;
  border:1px solid color-mix(in srgb,var(--lima-clara) 65%,var(--lima));border-radius:10px;
  background:linear-gradient(165deg,var(--lima-clara) -75%,var(--lima) 62%);color:var(--tinta-sobre-verde);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--blanco-luz) 45%,transparent),inset 0 -2px 0 color-mix(in srgb,var(--verde-profundo) 20%,transparent);
  font-size:12px;font-weight:650;letter-spacing:-.01em;transition:filter .16s ease;
}
body.studio-workbench #payContinue:hover:not(:disabled){filter:brightness(1.06)}
body.studio-workbench #payContinue:active:not(:disabled){filter:brightness(.96)}
body.studio-workbench #payContinue:disabled{opacity:.45;cursor:not-allowed}
body.studio-workbench #payContinue[aria-busy="true"]{opacity:.8;cursor:wait;padding-left:42px}
body.studio-workbench #payContinue .pay-button-arrow{position:absolute;right:17px;transition:transform .16s ease}
body.studio-workbench #payContinue:hover:not(:disabled) .pay-button-arrow{transform:translateX(2px)}
body.studio-workbench #payContinue[aria-busy="true"] .pay-button-arrow{visibility:hidden}
body.studio-workbench #payContinue .pay-spinner{display:none;position:absolute;left:18px;width:16px;height:16px;border:2px solid color-mix(in srgb,var(--tinta-sobre-verde) 25%,transparent);border-top-color:var(--tinta-sobre-verde);border-radius:50%}
body.studio-workbench #payContinue[aria-busy="true"] .pay-spinner{display:block;animation:pay-cargando .8s linear infinite}
body.studio-workbench #payModal .pay-nota{display:flex;justify-content:center;align-items:center;gap:6px;font-size:12px;line-height:1.6;color:var(--muted);margin:13px 0 0}
body.studio-workbench #payModal .pay-nota svg{flex-shrink:0}
body.studio-workbench #payModal :is(button,input):focus-visible{outline:2px solid var(--lima);outline-offset:3px}
@keyframes pay-cargando{to{transform:rotate(360deg)}}
@media(max-width:600px){
  body.studio-workbench #payModal{padding:12px}
  body.studio-workbench #payModal .pay-dialog{max-height:calc(100dvh - 24px);padding:21px 21px 19px;border-radius:16px}
  body.studio-workbench #payModal .pay-header{margin-bottom:15px}
  body.studio-workbench #payTitle{font-size:27px}
  body.studio-workbench #payDescription{font-size:11px;margin-bottom:17px}
  body.studio-workbench #payModal .paysaldo{margin-bottom:19px}
  body.studio-workbench #payModal .paypack{min-height:76px;padding:14px;gap:11px}
  body.studio-workbench #payModal .pp{font-size:18px}
  body.studio-workbench #payModal .pay-resumen{margin-top:18px}
  body.studio-workbench #payContinue{min-height:48px}
}
@media(prefers-reduced-motion:reduce){
  body.studio-workbench #payModal .pay-spinner{animation:none!important}
  body.studio-workbench #payModal :is(.paypack,.pay-radio:after,.pay-button-arrow),
  body.studio-workbench #mesa :is(.roundbtn,.ap-gen,.param,.image-ref-add,.refbox){transition:none}
}

/* «Saltar al contenido» del Estudio (5-oct-2026). Mismo patrón que la clase
   homónima de tokens.css, que el Estudio no importa: fuera de la vista hasta
   recibir el foco del teclado; entonces aparece arriba a la izquierda. */
.saltar-contenido{position:absolute;left:12px;top:12px;z-index:10000;padding:8px 16px;border-radius:999px;background:var(--negro-elevado);border:1px solid var(--verde-cocuyo);color:var(--verde-cocuyo);text-decoration:none;box-shadow:var(--glow-suave);transform:translateY(-160%)}
.saltar-contenido:focus,.saltar-contenido:focus-visible{transform:none}


/* cocuyo-css: assets/css/estudio-facil.css */
/* Referencia de interacción: 21st.dev Segmented Control (23552).
   Implementación nativa, sin dependencias ni cambios en la autenticación. */
.studio-experience{display:flex;align-items:center;gap:3px;padding:4px;border:1px solid var(--border2);border-radius:12px;background:var(--surface)}
.studio-experience button{min-height:37px;padding:8px 15px;border-radius:8px;font-size:12px;color:var(--muted2);transition:background .16s,color .16s}
.studio-experience button[aria-pressed="true"]{background:var(--lima);color:var(--tinta-sobre-verde);font-weight:650}
.studio-experience button span{margin-left:5px;font-size:9px;opacity:.7}
.studio-experience button:focus-visible,.facil-panel :is(button,select,input):focus-visible,.facil-pin :is(button,input):focus-visible{outline:2px solid var(--lima);outline-offset:3px}
.facil-pin{width:min(420px,calc(100vw - 32px));padding:28px;border:1px solid var(--border2);border-radius:22px;background:var(--surface);color:var(--text);font-family:var(--font);box-shadow:0 25px 90px #0008}
.facil-pin::backdrop{background:#000a;backdrop-filter:blur(6px)}
.facil-pin h2{font-size:23px;letter-spacing:-.03em;margin:12px 0}
.facil-pin p{font-size:13px;line-height:1.6;color:var(--muted2)}
.facil-pin label{display:block;font-size:12px;color:var(--muted2);margin-top:22px}
.facil-pin input{display:block;box-sizing:border-box;width:100%;margin-top:9px;min-height:58px;background:var(--bg);border:1px solid var(--border2);border-radius:12px;color:var(--text);text-align:center;font:600 25px var(--font);letter-spacing:.5em;padding-left:.5em}
.facil-pin-actions{display:flex;gap:8px;margin-top:20px}
.facil-pin-actions button{flex:1;min-height:44px;border-radius:10px;background:var(--surface3);font-size:13px}
.facil-pin-actions button[type="submit"]{background:var(--lima);color:var(--tinta-sobre-verde);font-weight:650}
.facil-error{color:var(--peligro)!important;min-height:18px;margin:8px 0 0!important}
.facil-panel{padding:22px;margin-bottom:24px;border:1px solid var(--border2);border-radius:18px;background:var(--surface)}
.facil-panel[hidden]{display:none!important}
.facil-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.facil-heading h2{margin:0;font-size:22px;letter-spacing:-.03em}
.facil-heading p{font-size:13px;color:var(--muted2);margin:8px 0;line-height:1.6}
.facil-heading button,.facil-settings{font-size:11px;color:var(--muted);padding:8px 0;text-decoration:underline;text-underline-offset:4px}
.facil-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(240px,1.4fr);gap:24px;margin-top:17px}
.facil-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.facil-panel label{display:block;font-size:12px;color:var(--muted2)}
.facil-panel select,.facil-panel input{display:block;box-sizing:border-box;width:100%;min-width:0;margin-top:7px;min-height:44px;background:var(--bg);border:1px solid var(--border2);border-radius:9px;padding:10px 12px;color:var(--text);font:12px var(--font)}
.facil-hint{font-size:12px;line-height:1.6;color:var(--muted);margin:10px 0}
.facil-prepare{width:100%;min-height:43px;padding:11px 15px;margin-top:13px;border:1px solid color-mix(in srgb,var(--lima) 42%,var(--border));border-radius:10px;background:var(--acento-fondo);font-size:12px;font-weight:600;color:var(--lima)}
.facil-status{margin:10px 0 0;min-height:18px;font-size:12px;line-height:1.6;color:var(--muted2)}
body.experiencia-facil .studio-tools,body.experiencia-facil .modemore{display:none!important}
body.experiencia-facil:not(.facil-ajustes):not(.modo-audio) #mesa #parambar> :not(.cost):not([data-pop="model"]):not(#omniLimits){display:none}
body.experiencia-facil .studio-workhead{margin-bottom:17px}
body.experiencia-facil .studio-editor-badge{font-size:0}
body.experiencia-facil .studio-editor-badge:after{content:'Revisa y crea';font-size:10px}
.facil-settings{display:none}
.facil-resumen{display:none}
body.experiencia-facil .facil-resumen{display:block;order:6;margin:10px 0 0;font-size:11px;line-height:1.7;color:var(--muted2)}
body.experiencia-facil .facil-settings{display:block;margin:10px 0 0}
@media(max-width:700px){
 .studio-topbar{flex-wrap:wrap;gap:12px}
 .studio-experience{order:3;width:100%}.studio-experience button{flex:1}
 .facil-panel{padding:17px}.facil-grid{grid-template-columns:1fr;gap:12px}
 .facil-heading{align-items:flex-start}.facil-heading h2{font-size:21px}
 .facil-heading>button{max-width:88px;text-align:right;flex-shrink:0}
 .facil-fields{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.studio-experience button{transition:none}}


/* cocuyo-css: assets/css/estudio-avanzado.css */
/* Estado de cotización visible antes de generar, también al adjuntar primero. */
body.studio-workbench #mesa #refQuoteStatus{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 12px;border:1px solid var(--border2);border-radius:10px;font-size:12px;line-height:1.5;color:var(--muted2);background:var(--bg)}
body.studio-workbench #mesa #refQuoteStatus[hidden],body.studio-workbench #mesa #refQuoteStatus button[hidden]{display:none}
body.studio-workbench #mesa #refQuoteStatus button{min-height:40px;padding:6px 12px;border:1px solid var(--border2);border-radius:8px;background:var(--surface);color:var(--lima);font:inherit;cursor:pointer}
body.studio-workbench #mesa #refQuoteStatus button:focus-visible{outline:2px solid var(--lima);outline-offset:2px}

/* Estudio avanzado: resultados arriba y mesa ancha de imagen/video.
   Cargar despues de estudio-workspace.css. No mueve ni clona nodos.
   --mesa-h lo actualiza el ResizeObserver existente en estudio-4.js;
   la reserva inferior sigue la altura real de la mesa y sus referencias.
   Facil, Audio y pantallas de hasta 1000 px conservan su composicion. */
@media (min-width:1001px){
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]){
    --studio-dock-gap:18px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #pg-home>.studio-wrap{
    padding-top:22px;
    padding-bottom:calc(var(--mesa-h,350px) + var(--studio-dock-gap) + 32px);
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) .studio-workspace{
    display:block;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) .studio-editor-slot{
    position:static;
    min-height:0;
    scroll-margin-bottom:calc(var(--mesa-h,350px) + 32px);
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) .studio-workhead{
    margin-bottom:13px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #pg-home #title{
    font-size:25px;
    margin-block:5px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) .studio-results{
    width:100%;
    scroll-margin-bottom:calc(var(--mesa-h,350px) + 32px);
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) .studio-results-head{
    margin-bottom:12px;
  }
  /* El aviso antiguo flotaba a 96 px y podia cubrir los ajustes. */
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #genstatus{
    position:static;
    inset:auto;
    transform:none;
    max-width:none;
    margin:0 0 14px;
    box-shadow:none;
    z-index:auto;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa{
    position:fixed;
    inset:auto 0 var(--studio-dock-gap) var(--side);
    z-index:50;
    display:flex;
    justify-content:center;
    width:auto;
    padding:0 24px;
    pointer-events:none;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .mesa-in{
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:10px;
    width:min(1100px,100%);
    max-height:min(420px,calc(100dvh - 150px));
    padding:13px 15px 14px;
    overflow:visible;
    pointer-events:auto;
    border-color:var(--border2);
    border-radius:18px;
    background:var(--surface);
    box-shadow:0 14px 50px color-mix(in srgb,var(--negro-abismo) 60%,transparent);
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .studio-editor-head{
    display:none;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .mesa-top{
    display:none;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .modesw{
    width:fit-content;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .modesw .inner{
    width:auto;
    padding:3px;
    border-radius:9px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .modesw button{
    flex:0 0 auto;
    min-height:31px;
    padding:6px 14px;
    font-size:12px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .composer{
    display:grid;
    grid-template-columns:minmax(0,1fr) 170px;
    grid-template-areas:"refs refs" "prompt prompt" "params generate";
    gap:10px 12px;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  /* El textbox conserva su nombre accesible. Las referencias conservan
     etiquetas, contador y limite reales sin repetir un titulo de seccion. */
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .studio-field-heading{
    display:none;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageRefControls{
    grid-area:refs;
    align-self:start;
    width:236px;
    margin:0;
    gap:5px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #addImageRefs{
    min-height:45px;
    padding:10px 11px;
    gap:8px;
    border-radius:9px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #addImageRefs>.ic{
    width:18px;
    height:18px;
    flex-basis:18px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #imageRefHint{
    padding:0 2px;
    line-height:1.5;
    font-size:10px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #refgrid{
    grid-area:refs;
    align-self:start;
    width:360px;
    margin:0;
    gap:6px;
    overflow:visible;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #refgrid .refwrap{
    flex:1 1 44%;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #refgrid .refbox{
    flex-direction:row;
    min-height:35px;
    height:auto;
    padding:8px 10px;
    gap:7px;
    font-size:11px;
    border-radius:9px;
    text-align:left;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #refgrid .refbox .ic{
    width:16px;
    height:16px;
    flex:0 0 16px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #attrow{
    grid-area:refs;
    align-self:center;
    min-width:0;
    max-width:none;
    margin:0 0 0 376px!important;
    padding:2px 2px 5px;
    flex-wrap:nowrap!important;
    gap:7px!important;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
    overscroll-behavior-x:contain;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]).modo-imagen #mesa #attrow{
    margin-left:252px!important;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .attchip{
    flex:0 0 68px;
    width:68px;
    height:68px;
    border-radius:9px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .attchip .x{
    width:23px;
    height:23px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .attcuenta{
    flex:0 0 auto;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #ta{
    grid-area:prompt;
    min-height:70px;
    max-height:105px;
    margin:0;
    padding:11px 13px;
    border-radius:10px;
    font-size:14px;
    line-height:1.6;
    scroll-margin-block:12px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #parambar{
    grid-area:params;
    position:sticky;
    bottom:0;
    z-index:3;
    /* render() conserva display:grid inline; aqui solo cambia su disposicion. */
    display:flex!important;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    min-width:0;
    padding:5px 0 0;
    background:var(--surface);
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #parambar>.lbl{
    display:none;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #parambar>.param[data-pop="model"]{
    flex:0 1 auto;
    width:auto;
    min-width:165px;
    max-width:100%;
    min-height:40px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .param{
    width:auto;
    min-height:40px;
    padding:9px 10px;
    gap:7px;
    font-size:12px;
    border-radius:9px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .param[data-pop="model"]>span:not(.car){
    overflow-wrap:anywhere;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #parambar .cost{
    display:none;
    margin:0 0 0 auto;
    padding:8px 3px;
    min-height:40px;
    gap:5px;
    white-space:nowrap;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .cost-caption{
    margin:0 2px 0 0;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .cost b{
    font-size:14px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #omniLimits{
    flex:0 0 100%;
    padding:0 0 3px;
    overflow-wrap:anywhere;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #headicons{
    grid-area:generate;
    align-self:end;
    position:sticky;
    bottom:0;
    margin:0;
    padding:5px 0 0;
    background:var(--surface);
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa #headicons .roundbtn{
    min-height:45px;
    padding:12px 16px;
    border-radius:10px;
    font-size:13px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .studio-tools{
    margin:0;
    padding:6px 0 0;
    max-height:86px;
    overflow-y:auto;
    scrollbar-width:thin;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .studio-tools summary{
    padding:3px 2px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .studio-tools #apps{
    margin-top:7px;
  }
  /* Popover y su fallback fijo conservan sus reglas de estudio-workspace.
     No se aplica transform, filter, contain ni backdrop-filter a sus padres. */
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio) .studio-empty{
    display:grid;grid-template-columns:minmax(200px,.8fr) 1.2fr;max-width:900px;margin:0 auto;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio) .studio-empty-preview{
    min-height:150px;aspect-ratio:auto;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio) .studio-preview-label{top:12px;left:16px;font-size:11px}
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio) .studio-preview-caption{left:18px;bottom:18px}
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio) .studio-preview-caption>span{font-size:11px;margin-bottom:8px}
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio) .studio-preview-caption>b{font-size:32px}
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio) .studio-empty-copy{padding:22px 26px;align-self:center}
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio) .studio-empty-copy h3{font-size:18px}
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio) .studio-empty-copy p{display:none}
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio) .studio-empty .studio-workflow{display:none}
}

/* Una ventana de escritorio muy baja necesita flujo normal: todos los
   controles siguen al alcance, sin cubrir el lienzo con una mesa enorme. */
@media (min-width:1001px) and (max-height:640px){
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #pg-home>.studio-wrap{
    padding-bottom:32px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) .studio-workspace{
    display:flex;
    flex-direction:column-reverse;
    gap:24px;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) .studio-editor-slot{
    width:100%;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa{
    position:static;
    width:100%;
    padding:0;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .mesa-in{
    max-height:none;
  }
  body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #mesa .composer{
    overflow:visible;
  }
}

/* Móvil y tableta: el compositor va en el flujo y el botón Generar suele
   quedar abajo; el aviso flotante se muestra bajo la cabecera para no tapar
   Generar ni el coste mientras dura. */
@media (max-width:1000px){
  body.studio-workbench #genstatus{
    top:calc(76px + env(safe-area-inset-top,0px));
    bottom:auto;
  }
}


/* cocuyo-css: assets/css/estudio-herramientas.css */
/* Herramientas: acciones con icono y descripción inspiradas en Menu de
   coss.com / 21st.dev. Tokens de Cocuyo y controles nativos accesibles. */
.studio-topbar{z-index:65;gap:18px}
.studio-tools-legacy{display:none!important}
.studio-topbar-title{margin-right:auto}
.studio-tools-switch{position:static}
.studio-tools-trigger{display:flex;align-items:center;gap:9px;min-height:44px;padding:10px 15px;border:1px solid var(--border2);border-radius:12px;background:var(--surface);color:var(--text);font:600 13px var(--font);cursor:pointer;box-shadow:inset 0 1px 0 #ffffff08;transition:background .18s,border-color .18s}
.studio-tools-trigger>.ic:first-child{color:var(--lima)}
.studio-tools-trigger>.ic:last-child{width:14px;height:14px;transition:transform .18s}
.studio-tools-trigger:hover,.studio-tools-trigger[aria-expanded="true"]{background:var(--surface2);border-color:var(--lima)}
.studio-tools-trigger[aria-expanded="true"]>.ic:last-child{transform:rotate(180deg)}
.studio-tools-label{display:grid;gap:3px;min-width:0;text-align:left}
.studio-tools-label small{font-size:10px;font-weight:500;line-height:1.3;color:var(--muted)}
.studio-tools-label [hidden],.studio-tools-footer [hidden]{display:none!important}
.studio-tools-menu .studio-tools-group button[data-tool-state="proximamente"]{opacity:1;cursor:default;background:transparent;border-color:var(--border)}
.studio-tools-menu .studio-tools-group button[data-tool-state="proximamente"] b{color:var(--muted2)}
.studio-tools-menu .studio-tools-group button[data-tool-state="proximamente"] .studio-tool-arrow{display:none}
.studio-tools-menu .studio-tools-group button[data-tool-state="proximamente"] [data-tool-availability]{display:inline-flex;width:fit-content;padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface2);color:var(--muted2);font-size:11px;font-weight:500;line-height:1.3}
.studio-tools-menu{position:absolute;right:24px;top:calc(100% + 8px);width:min(650px,calc(100vw - var(--side) - 48px));max-height:calc(100dvh - 105px);overflow:auto;overscroll-behavior:contain;padding:21px;border:1px solid var(--border2);border-radius:20px;background:var(--surface);box-shadow:0 24px 80px #0009,inset 0 1px 0 #ffffff08;animation:studio-tools-in .16s ease-out;scrollbar-width:thin}
.studio-tools-menu[hidden],.studio-tool-guide[hidden]{display:none}
.studio-tools-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.studio-tools-heading h2{font:600 21px var(--font);letter-spacing:-.03em;margin:0 0 5px}
.studio-tools-heading p{font-size:12px;color:var(--muted2);margin:0}
.studio-tools-menu [data-tools-close],.studio-tool-guide [data-tool-close]{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:1px solid var(--border2);border-radius:50%;background:transparent;color:var(--muted2);cursor:pointer}
.studio-tools-menu [data-tools-list]{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;align-items:start}
.studio-tools-group:nth-child(2){grid-column:2;grid-row:1/span 2}
.studio-tools-group h3{margin:12px 10px 6px;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.studio-tools-group button{display:flex;align-items:flex-start;width:100%;gap:11px;min-height:96px;padding:13px 9px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--text);text-align:left;font:inherit;cursor:pointer;transition:background .16s,border-color .16s}
.studio-tools-group button:hover,.studio-tools-group button:focus-visible{background:var(--surface2);border-color:var(--border2)}
.studio-tool-icon{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border:1px solid var(--border2);border-radius:10px;color:var(--lima);background:var(--bg)}
.studio-tool-icon .ic{width:19px;height:19px}
.studio-tools-group button>span:nth-child(2){min-width:0;flex:1}
.studio-tools-group button b{display:block;font-size:13px;font-weight:600;line-height:1.45}
.studio-tools-group button small{display:block;margin-top:4px;font-size:11px;line-height:1.55;color:var(--muted2)}
.studio-tools-group button em{display:block;margin-top:8px;color:var(--muted);font-size:10px;line-height:1.5;font-style:normal}
.studio-tool-arrow{flex:0 0 13px;width:13px;height:13px;margin-top:6px;color:var(--muted);transition:transform .16s,color .16s}
.studio-tools-group button:hover .studio-tool-arrow{transform:translateX(2px);color:var(--lima)}
.studio-tools-group button[aria-disabled="true"] .studio-tool-icon{color:var(--muted)}
.studio-tools-group button[aria-disabled="true"] em{color:var(--muted2)}
.studio-tools-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:15px;padding-top:15px;border-top:1px solid var(--border);font-size:11px;color:var(--muted2)}
.studio-tools-footer p{margin:0;line-height:1.5}
.studio-tools-footer button{min-height:40px;flex-shrink:0;font:500 11px var(--font);color:var(--lima);background:transparent;cursor:pointer}
.studio-tools-menu [data-tools-status]{font-size:12px;line-height:1.6;color:var(--text);margin:0}
.studio-tools-menu [data-tools-status]:not(:empty){margin-top:12px;padding:12px;border-radius:10px;background:var(--bg);border:1px solid var(--border2)}
.studio-tool-guide{margin-bottom:22px;padding:20px 22px;border:1px solid var(--border2);border-radius:17px;background:linear-gradient(115deg,var(--acento-fondo),transparent 56%),var(--surface);scroll-margin-top:100px}
.studio-tool-guide-top{display:flex;align-items:center;gap:13px}
.studio-tool-guide-top>div{flex:1;min-width:0}
.studio-tool-guide h2{font-size:18px;line-height:1.3;font-weight:600;letter-spacing:-.02em;margin:0 0 5px}
.studio-tool-guide [data-tool-meta]{font-size:11px;color:var(--muted2)}
.studio-tool-guide [data-tool-help]{font-size:13px;line-height:1.65;max-width:780px;color:var(--muted2);margin:16px 0}
.studio-tool-guide ol{display:flex;flex-wrap:wrap;gap:10px 25px;padding:0;margin:0;list-style:none}
.studio-tool-guide li{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted2)}
.studio-tool-guide li span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--border2);color:var(--lima);font-size:10px}
.studio-tool-guide-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--border);padding-top:13px;margin-top:17px}
.studio-tool-guide [data-tool-status]{font-size:11px;line-height:1.5;color:var(--muted2);margin:0}
.studio-tool-guide [data-tool-write]{min-height:40px;padding:8px 13px;border:1px solid var(--border2);border-radius:9px;background:var(--surface2);color:var(--text);font:500 12px var(--font);cursor:pointer;flex-shrink:0}
.studio-tools-switch :is(button):focus-visible,.studio-tool-guide :is(button):focus-visible{outline:2px solid var(--lima);outline-offset:3px}
.studio-tool-guide:focus-visible{outline:2px solid var(--lima);outline-offset:3px}
body.experiencia-facil .studio-tools-switch,body.experiencia-facil .studio-tool-guide{display:none}
@keyframes studio-tools-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.studio-tools-menu{width:min(650px,calc(100vw - 32px));right:16px}}
@media(max-width:700px){
 .studio-topbar{display:grid;grid-template-columns:1fr auto;gap:9px 12px}
 .studio-topbar-title{grid-column:1;grid-row:1}
 .studio-tools-switch{grid-column:2;grid-row:1}
 .studio-topbar .studio-experience{grid-column:1;grid-row:2;order:initial;width:auto;justify-self:start}
 .studio-topbar .studio-experience button{padding:7px 13px;min-height:32px;font-size:11px}
 .studio-topbar .studio-cine-link{grid-column:2;grid-row:2;justify-self:end}
 .studio-tools-trigger{padding:9px 11px;font-size:12px;gap:7px}
 .studio-tools-menu{max-height:calc(100dvh - 145px);padding:17px}
 .studio-tools-menu [data-tools-list]{display:block}
 .studio-tools-group button{min-height:78px;padding:11px 8px}
 .studio-tools-group button em{margin-top:4px}
 .studio-tools-footer{align-items:flex-start;gap:10px}
 .studio-tools-footer p{max-width:170px}
 .studio-tool-guide{padding:17px;scroll-margin-top:138px}
 .studio-tool-guide h2{font-size:16px}
 .studio-tool-guide ol{gap:9px 14px}
 .studio-tool-guide-bottom{flex-wrap:wrap;gap:7px}
 body.experiencia-facil .studio-topbar .studio-cine-link{grid-row:1}
}
@media(prefers-reduced-motion:reduce){.studio-tools-menu{animation:none}.studio-tools-trigger,.studio-tools-trigger>.ic:last-child,.studio-tools-group button,.studio-tool-arrow{transition:none}}


/* cocuyo-css: assets/css/estudio-acabado.css */
/* Acabado del Estudio. Roles de color independientes del verde de marca:
   la lima sirve para botones; el acento de texto debe poder leerse en blanco.
   Selector compacto inspirado en TeamSwitcher de ruixen.ui / 21st.dev 8252.
   Biblioteca: filtros y fechas observados en Higgsfield Assets. */
.side button.brand{padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.side button.brand:focus-visible{outline:2px solid var(--studio-accent);outline-offset:6px;border-radius:4px}
.accmenu button.mi{width:100%;border:0;background:transparent;font-family:inherit;text-align:left;cursor:pointer}
.studio-settings{box-sizing:border-box;width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:28px;border:1px solid var(--border2);border-radius:24px;background:var(--panel);color:var(--text);box-shadow:var(--studio-shadow);overflow:auto}
.studio-settings:not([open]){display:none}
.studio-settings::backdrop{background:var(--studio-overlay);backdrop-filter:blur(5px)}
.studio-settings-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:26px}
.studio-settings h2{margin:0;font-size:25px;line-height:1.2;letter-spacing:-.035em}
.studio-settings p{margin:7px 0 0;color:var(--muted2);font-size:13px;line-height:1.5}
.studio-settings-heading .iconbtn{flex-shrink:0;width:36px;height:36px;background:var(--surface2);border:1px solid var(--border);border-radius:50%;color:var(--text)}
.studio-settings-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:22px 0;border-top:1px solid var(--border)}
.studio-settings h3{margin:0;font-size:15px;font-weight:600}
.studio-settings-row p{font-size:12px;margin-top:5px}
.studio-settings .cocuyo-idioma{min-height:44px;padding:0 12px;border-color:var(--border2);background:var(--surface);color:var(--text);font-size:13px}
.studio-settings .cocuyo-idioma select{min-height:42px;max-width:none}
.studio-settings .cocuyo-idioma option{background:var(--surface);color:var(--text)}
.studio-settings .studio-settings-note{padding-top:18px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
@media(max-width:480px){.studio-settings{padding:22px}.studio-settings-row>[data-idioma-slot]{width:100%}.studio-settings .cocuyo-idioma{display:flex}.studio-settings .cocuyo-idioma select{flex:1;min-width:0}.studio-settings-heading{margin-bottom:20px}}
@media(prefers-reduced-motion:no-preference){.studio-settings[open]{animation:studio-settings-appear .18s ease-out}@keyframes studio-settings-appear{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}}
:root{
 --studio-accent:var(--lima);--studio-active:var(--lima-suave);
 --studio-shadow:0 16px 48px #0007,0 2px 8px #0004;
 --studio-dock-shadow:0 12px 36px #0006,0 0 0 1px #ffffff05;
 --studio-overlay:rgb(0 0 0/.65);
}

body.studio-workbench .side{background:var(--panel);padding-top:24px}
body.studio-workbench .side>.top{padding-bottom:23px}
body.studio-workbench #toolnav{gap:7px}
body.studio-workbench #toolnav a{min-height:56px;border-radius:13px;font-size:14px}
body.studio-workbench #toolnav a.active{color:var(--text);background:var(--studio-active);border-color:var(--border2);box-shadow:inset 3px 0 0 var(--studio-accent)}
body.studio-workbench .side>.navlist a.active>.ic{color:var(--studio-accent);background:var(--surface);border-color:var(--border2)}
body.studio-workbench .side>.navlist a>.ic{border-radius:10px;stroke-width:1.6}
body.studio-workbench .studio-library-nav{padding-top:13px;margin-top:20px}
body.studio-workbench .side .upgbtn{background:var(--surface);color:var(--text);border:1px solid var(--border2);box-shadow:none;filter:none}
body.studio-workbench .side .upgbtn:hover{background:var(--studio-active);border-color:var(--studio-accent);color:var(--studio-accent)}
body.studio-workbench .upgbtn::before,body.studio-workbench .upgbtn::after{display:none}
body.studio-workbench .side .foot{gap:11px;padding-top:16px}
body.studio-workbench .acct .av,body.studio-workbench .acct .cr .ic,.acc-avatar,
body.studio-workbench .accmenu .card>.ic,body.studio-workbench .accmenu .mi:hover>.ic{color:var(--studio-accent)}
body.studio-workbench .accmenu,body.studio-workbench #submenu,
body.studio-workbench #mesa .studio-floating,.studio-tools-menu{box-shadow:var(--studio-shadow)}
body.studio-workbench .studio-topbar{background:var(--panel)}
.studio-topbar-title b{display:none}
.studio-tools-trigger>.ic:first-child,.studio-tools-footer button,.studio-tool-icon,
.studio-tools-group button:hover .studio-tool-arrow,.studio-tool-guide li span,
.studio-cine-link:hover{color:var(--studio-accent)}
.studio-tools-trigger:hover,.studio-tools-trigger[aria-expanded="true"]{border-color:var(--studio-accent)}
.studio-audio-art{background:radial-gradient(ellipse at 78% 30%,#132811,#050505 74%)}
.studio-audio-disc{border-color:#ffffff29;box-shadow:0 0 0 28px #ffffff08,0 0 0 58px #ffffff04}
.studio-audio-disc::before{border-color:#ffffff29}
body.studio-workbench.modo-audio .ap-vozlabel,body.studio-workbench.modo-audio .ap-vozplay,
body.studio-workbench #mesa .modesw button.active .ic,.studio-workflow i,
body.studio-workbench .fa-foto,body.studio-workbench .fa-foto b{color:var(--studio-accent)}
body.studio-workbench #mesa .mesa-in{box-shadow:var(--studio-dock-shadow)!important;border-color:var(--border2);border-radius:20px}
body.studio-workbench #mesa #ta{background:var(--bg)!important;color:var(--text);border-color:var(--border)!important;transition:border-color .16s,box-shadow .16s}
body.studio-workbench #mesa #ta:focus{outline:none;border-color:var(--studio-accent)!important;box-shadow:0 0 0 3px var(--studio-active)}
body.studio-workbench #mesa .param{background:var(--surface2);border:1px solid var(--border2);font-weight:500;box-shadow:inset 0 1px 0 #ffffff08}
body.studio-workbench #mesa .param:hover{background:var(--surface);border-color:var(--studio-accent)}
body.studio-workbench #mesa .param[data-pop="model"]{background:var(--surface);font-weight:650}
body.studio-workbench #mesa :is(#addImageRefs,.refbox){color:var(--text);background:var(--surface2);border:1px solid var(--border2);border-radius:10px}
body.studio-workbench #mesa :is(#addImageRefs,.refbox)>.ic{color:var(--studio-accent)}
body.studio-workbench #mesa .image-ref-add b{color:var(--studio-accent);background:var(--surface)}
body.studio-workbench #mesa :is(#addImageRefs,.refbox):hover{border-color:var(--studio-accent);background:var(--studio-active)}
body.studio-workbench #mesa #refQuoteStatus button,body.studio-workbench #payRetry{color:var(--studio-accent)}
body.studio-workbench #mesa #headicons .roundbtn{background:var(--lima);border:1px solid color-mix(in srgb,var(--verde-profundo) 25%,var(--lima));color:var(--tinta-sobre-verde);font-weight:650;box-shadow:inset 0 1px 0 #ffffff70,0 2px 5px #0001}
body.studio-workbench #mesa #headicons .roundbtn:hover:not(:disabled){background:var(--lima-clara);filter:none}
body.studio-workbench #modal,body.studio-workbench #payModal{background:var(--studio-overlay);backdrop-filter:blur(6px)}
body.studio-workbench #modal .mbox,body.studio-workbench #payModal .pay-dialog{box-shadow:var(--studio-shadow)}
body.studio-workbench #modal .mrow.sel{border-color:var(--studio-accent);background:var(--studio-active)}
body.studio-workbench #payModal .paypack.seleccionado{border-color:var(--studio-accent)}
.studio-results-head h2{letter-spacing:-.035em}
.studio-empty{border-color:var(--border);box-shadow:none}
.studio-session-switch{position:relative;margin-top:14px;min-width:0}
#studioSessionToggle{display:flex;align-items:center;gap:10px;width:100%;min-height:60px;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface);text-align:left}
#studioSessionToggle>span{display:grid;gap:5px;min-width:0;flex:1}
#studioSessionToggle small{font-size:10px;color:var(--muted);font-weight:450}
#studioSessionToggle strong{font-size:12px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#studioSessionToggle>.ic{color:var(--studio-accent);flex:none}
#studioSessionToggle>.ic:last-child{color:var(--muted)}
#studioSessionToggle:hover,#studioSessionToggle[aria-expanded="true"]{border-color:var(--studio-accent)}
#studioSessionPanel{position:fixed;inset:auto;margin:0;z-index:95;width:340px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow:auto;padding:13px;border:1px solid var(--border2);border-radius:17px;background:var(--surface);color:var(--text);box-shadow:var(--studio-shadow)}
#studioSessionPanel::backdrop{background:transparent}
#studioSessionPanel[hidden],#studioSessionEmpty[hidden]{display:none}
.studio-session-heading{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px 7px}
.studio-session-heading strong{font-size:16px;letter-spacing:-.025em}
#studioSessionClose{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--border);border-radius:10px;color:var(--muted2)}
.studio-session-search{display:flex;align-items:center;gap:9px;padding:0 12px;min-height:42px;margin-bottom:10px;border:1px solid var(--border2);border-radius:10px;background:var(--bg);color:var(--muted)}
.studio-session-search input{width:100%;min-width:0;padding:10px 0;background:transparent;color:var(--text);border:0;outline:none;font:12px var(--font)}
.studio-session-search:focus-within{outline:2px solid var(--studio-accent);outline-offset:2px}
body.studio-workbench .sessions{max-height:240px;overflow:auto;gap:4px}
body.studio-workbench .sessions .item[hidden]{display:none}
body.studio-workbench .sessions .item.ses{padding:5px;gap:3px;border:1px solid transparent;min-height:45px}
body.studio-workbench .sessions .item.ses.on{border-color:var(--border);background:var(--studio-active)}
.studio-session-pick{display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:7px 5px;text-align:left;color:var(--text);font-size:12px}
body.studio-workbench .sessions .sq{flex:none;color:var(--studio-accent)!important;background:transparent!important}
body.studio-workbench .sessions .sesx{opacity:1;flex:0 0 32px;width:32px;height:32px;border-radius:8px;color:var(--muted);border:1px solid transparent}
body.studio-workbench .sessions .sesx:hover{border-color:var(--border2);background:var(--surface2);color:var(--text)}
body.studio-workbench .sessions .sesn{color:var(--muted2);background:var(--surface);font-size:10px}
.studio-session-new{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:42px;margin-top:10px;border:1px solid var(--border2);border-radius:10px;background:var(--surface2);font-size:12px;font-weight:550}
.studio-session-new:hover{background:var(--studio-active);border-color:var(--studio-accent)}
#studioSessionEmpty{font-size:12px;line-height:1.6;padding:12px;color:var(--muted)}
/* Biblioteca: las acciones afectan a los archivos reales; ningún control decorativo. */
body.studio-workbench #pg-library{padding:26px 28px 60px;max-width:1500px;margin:auto}
body.studio-workbench #pg-library{overflow-anchor:none}
.studio-assets-heading{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.studio-assets-mark{display:grid;place-items:center;flex:none;width:46px;height:46px;border:1px solid var(--border2);border-radius:14px;color:var(--studio-accent);background:var(--surface)}
.studio-assets-heading h1{margin:0 0 5px;font:600 26px var(--font);letter-spacing:-.045em}
.studio-assets-heading p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
body.studio-workbench .bv-barra{position:relative;top:auto;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:15px;gap:10px;margin-bottom:8px}
.studio-assets-actions,.studio-assets-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%}
.studio-assets-filters{border-top:1px solid var(--border);padding-top:12px}
body.studio-workbench .bv-segs{background:var(--bg);border-color:var(--border);padding:3px}
body.studio-workbench .bv-seg{display:flex;align-items:center;gap:7px;min-height:37px;padding:7px 11px;font-size:12px;font-weight:500}
body.studio-workbench .bv-seg.on{background:var(--studio-active);color:var(--studio-accent);box-shadow:inset 0 0 0 1px var(--border2)}
.studio-assets-count{font-size:10px;min-width:18px;padding:2px 4px;background:var(--surface);border-radius:4px;text-align:center;color:var(--muted2)}
body.studio-workbench :is(.bv-accion,.bv-chip,.bv-sel,.bv-busca){min-height:40px;font:500 12px var(--font);border-color:var(--border2);border-radius:9px}
body.studio-workbench .bv-accion.viva{background:var(--lima);color:var(--tinta-sobre-verde)}
body.studio-workbench .bv-chip.on{background:var(--studio-active);color:var(--studio-accent);border-color:var(--studio-accent)}
body.studio-workbench .bv-busca{max-width:360px;margin-left:auto;background:var(--bg);font-weight:400}
body.studio-workbench .bv-cuenta{margin-left:auto;font-size:11px;color:var(--muted)}
body.studio-workbench .bv-dia{position:static;background:transparent;padding:24px 2px 13px;gap:10px}
body.studio-workbench .bv-dia span{font-size:15px;letter-spacing:-.02em}
body.studio-workbench .bv-dia i{font-size:11px;text-transform:none;letter-spacing:0}
body.studio-workbench .bv-rejilla{padding:0;gap:16px}
body.studio-workbench .bv-marco{border-radius:15px;background:var(--surface2);border-color:var(--border)}
.studio-asset-caption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 3px;color:var(--muted2);font-size:11px}
.studio-asset-caption>span{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-asset-caption small{font-size:10px;flex:none;color:var(--muted)}
body.studio-workbench .bv-b,body.studio-workbench .bv-fav{display:grid;place-items:center;width:34px;height:34px;border:1px solid #ffffff38;background:#10150ed9;color:#fff;border-radius:10px;text-shadow:none}
body.studio-workbench .bv-fav.on{color:var(--lima)}
body.studio-workbench .bv-tar:focus-within .bv-acc{opacity:1;transform:none}
body.studio-workbench .bv-tar:focus-within .bv-fav{opacity:1}
body.studio-workbench .bv-vacio{padding:58px 24px;max-width:520px}
body.studio-workbench .bv-icono{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 20px;background:var(--studio-active);border:1px solid var(--border2);border-radius:20px;color:var(--studio-accent)}
body.studio-workbench .bv-icono .ic{width:28px;height:28px}
body.studio-workbench .bv-vacio h3{font:600 22px var(--font);letter-spacing:-.04em}
body.studio-workbench .bv-cta{border-radius:10px;min-height:43px;background:var(--lima);color:var(--tinta-sobre-verde);font-size:12px}
body.studio-workbench :is(button,a,input,select,[tabindex]):focus-visible{outline:2px solid var(--studio-accent);outline-offset:3px}

@media(hover:none){body.studio-workbench .bv-acc,body.studio-workbench .bv-fav{opacity:1;transform:none}}
@media(min-width:1001px){
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio) .studio-eyebrow{display:none}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio) .studio-workhead{margin-bottom:10px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio) .studio-workhead p{font-size:12px}
}
@media(max-width:700px){
 body.studio-workbench #pg-library{padding:22px 14px 40px}
 .studio-assets-heading{align-items:flex-start;gap:11px}.studio-assets-heading h1{font-size:24px}
 .studio-assets-heading p{font-size:11px}.studio-assets-mark{width:41px;height:41px;border-radius:12px}
 body.studio-workbench .bv-barra{padding:11px;gap:11px}
 .studio-assets-actions{gap:7px}.studio-assets-filters{gap:7px}
 body.studio-workbench .bv-busca{flex:1 0 100%;max-width:none;margin:2px 0 0}
 body.studio-workbench .bv-segs{width:100%;justify-content:space-between}
 body.studio-workbench .bv-seg{font-size:11px;padding:7px;gap:5px}
 .studio-assets-count{font-size:9px;min-width:16px}
 body.studio-workbench .bv-seg .ic{width:14px;height:14px;flex-basis:14px}
 body.studio-workbench .bv-cuenta{font-size:10px}
 body.studio-workbench .bv-b,body.studio-workbench .bv-fav{width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce){body.studio-workbench #mesa #ta{transition:none}}

/* El lienzo pertenece a las creaciones. Las herramientas viven en su menú. */
body.studio-workbench:not(.experiencia-facil) .studio-workhead{flex-direction:row;align-items:center;gap:12px;margin-bottom:16px}
body.studio-workbench:not(.experiencia-facil) .studio-workhead :is(.studio-eyebrow,#studioModeHelp){display:none}
body.studio-workbench:not(.experiencia-facil) #pg-home #title{font-size:20px;line-height:1.3;margin:0}
body.studio-workbench:not(.experiencia-facil) .studio-jump{align-self:center;margin:0}
body.studio-workbench:not(.experiencia-facil) .histbar{padding:0 0 8px;margin:0 0 6px}
body.studio-workbench:not(.experiencia-facil) .hist-dia{padding:6px 0 10px}
.studio-results-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:240px;padding:32px 20px;text-align:center;color:var(--muted2)}
.studio-results-empty .studio-results-empty-icon{width:30px;height:30px;flex:none;stroke-width:1.25;color:var(--muted);margin-bottom:15px}
.studio-results-empty h3{margin:0;font:500 15px/1.5 var(--font);letter-spacing:-.02em;color:var(--muted2)}
.studio-results-empty p{max-width:360px;margin:8px 0 12px;font:400 12px/1.65 var(--font);color:var(--muted)}
.studio-results-empty button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 12px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--studio-accent);font:500 12px var(--font);cursor:pointer}
.studio-results-empty button:hover{border-color:var(--border2);background:var(--surface)}
@media(min-width:1001px){
 /* El modo ya está seleccionado en el lateral. Conservamos su h1 accesible. */
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) .studio-workhead{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio):is([data-studio-mode="image"],[data-studio-mode="video"]) #pg-home>.studio-wrap{padding-top:16px}
 body.studio-workbench:not(.experiencia-facil):not(.modo-audio) .studio-results-empty{min-height:clamp(190px,calc(100dvh - var(--mesa-h,350px) - 225px),560px)}
}
@media(max-width:600px){
 body.studio-workbench:not(.experiencia-facil) #pg-home #title{font-size:18px}
 body.studio-workbench:not(.experiencia-facil) .studio-jump{font-size:10px;gap:6px}
 .studio-results-empty{min-height:210px;padding:28px 12px}
}

/* Lista: cada zona tiene su columna; la miniatura nunca tapa el texto. */
body.studio-workbench .jobfila{display:grid;grid-template-columns:clamp(132px,16vw,180px) minmax(0,1fr) 40px;grid-template-areas:"media cuerpo acciones";align-items:start;gap:18px;padding:16px;border-radius:14px;background:var(--surface)}
body.studio-workbench .jobfila .jr-med{grid-area:media;width:100%;min-width:0;max-width:none;aspect-ratio:16/10;border-radius:10px}
body.studio-workbench .jobfila .jr-cuerpo{grid-area:cuerpo;min-width:0;gap:10px}
body.studio-workbench .jobfila .jr-cab{gap:8px}
body.studio-workbench .jobfila .jr-modelo{max-width:100%;padding:0;background:transparent;font-size:13px;font-weight:650;line-height:1.5;color:var(--text);overflow-wrap:anywhere}
body.studio-workbench .jobfila .jr-prompt{font-size:14px;line-height:1.65;color:var(--text);overflow-wrap:anywhere}
body.studio-workbench .jobfila .jr-at{font-weight:600;color:var(--studio-accent);background:var(--studio-active)}
body.studio-workbench .jobfila .jr-err{font-size:13px;line-height:1.6;color:var(--peligro);overflow-wrap:anywhere}
body.studio-workbench .jobfila .jr-fallo{color:var(--peligro)}
body.studio-workbench .jobfila .jr-estado{font-size:12px;color:var(--muted2)}
body.studio-workbench .jobfila .jr-chips span{font-size:12px;color:var(--muted2);background:var(--surface2);padding:4px 9px}
body.studio-workbench .jobfila .jr-acc{grid-area:acciones;flex-direction:column;gap:8px;align-self:start}
body.studio-workbench .jobfila :is(.jfav,.jmas){display:grid;place-items:center;width:40px;height:40px;border-radius:10px;transform:none;color:var(--muted2);background:var(--surface2);border:1px solid var(--border)}
body.studio-workbench .jobfila .jfav.on{color:var(--studio-accent);background:var(--studio-active);border-color:var(--border2)}
body.studio-workbench .jobfila :is(.jfav,.jmas):hover{color:var(--text);border-color:var(--border2)}
@media(max-width:640px){
 body.studio-workbench .jobfila{grid-template-columns:88px minmax(0,1fr);grid-template-areas:"media cuerpo" "acciones cuerpo";grid-template-rows:auto 1fr;gap:12px;padding:12px}
 body.studio-workbench .jobfila .jr-acc{flex-direction:row;gap:6px}
 body.studio-workbench .jobfila .jr-prompt{-webkit-line-clamp:6}
}

/* Aviso flotante fuera del editor (Creaciones, Proyectos): mismo acabado que
   el aviso del compositor. Encima de la barra inferior en móvil. */
.studio-toast{position:fixed;left:16px;right:16px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:400;width:fit-content;max-width:520px;margin-inline:auto;padding:12px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:13px;line-height:1.4;box-shadow:0 18px 40px -18px #000;text-align:center}
.studio-toast[hidden]{display:none}
@media(max-width:900px){.studio-toast{bottom:calc(var(--sm-bottom,64px) + 16px + env(safe-area-inset-bottom,0px))}}


/* cocuyo-css: assets/css/estudio-nivel.css */
/* Configuración inicial con tarjetas de elección. Referencia de jerarquía:
   Onboarding Card del catálogo 21st.dev; estilos nativos de Cocuyo. */
body.studio-workbench .side>.top{padding-bottom:16px}
body.studio-workbench .brand .wordmark{font-family:var(--font)}
body.studio-workbench .studio-library-nav a{white-space:nowrap;font-size:12px}
.studio-level-switch{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 12px;margin:0 0 8px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;color:var(--text);text-align:left;font:550 12px var(--font);cursor:pointer}
.studio-level-switch>.ic:first-child{width:17px;height:17px;color:var(--studio-accent)}
.studio-level-chevron{margin-left:auto;width:14px;height:14px;color:var(--muted2)}
.studio-level-switch:hover{background:var(--surface2);border-color:var(--studio-accent)}
.studio-level-switch[hidden]{display:none!important}
body.studio-workbench #toolnav{margin-top:0;padding-top:6px;border-top:0}
.side>.studio-tools-switch{margin:5px 0 4px}
.side .studio-tools-trigger{width:100%;min-height:52px;padding:8px 10px;gap:12px;border:0;border-radius:10px;background:transparent;box-shadow:none;color:var(--muted2);font-weight:550;text-align:left}
.side .studio-tools-trigger>.ic:first-child{box-sizing:content-box;flex:none;width:19px;height:19px;padding:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--muted2)}
.side .studio-tools-trigger>.ic:last-child{margin-left:auto}
.side .studio-tools-trigger:is(:hover,[aria-expanded="true"]){background:var(--surface);color:var(--text)}
.side .studio-tools-trigger[aria-expanded="true"]>.ic:first-child{color:var(--studio-accent);border-color:var(--studio-accent)}
body.studio-workbench>.studio-tools-menu{position:fixed;inset:24px auto auto calc(var(--side) + 12px);z-index:100;max-height:calc(100dvh - 48px);width:min(650px,calc(100vw - var(--side) - 36px))}
body.studio-workbench .studio-editor-slot{top:20px;scroll-margin-top:20px}
body.studio-workbench .studio-tool-guide{scroll-margin-top:20px}
.studio-mobile-menu{display:none!important}
.studio-level-dialog{width:min(660px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:32px;margin:auto;border:1px solid var(--border2);border-radius:24px;background:radial-gradient(ellipse at top left,var(--acento-fondo),transparent 65%),var(--surface);color:var(--text);font-family:var(--font);box-shadow:var(--sombra-3)}
.studio-level-dialog::backdrop{background:#000a;backdrop-filter:blur(8px)}
.studio-level-intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}
.studio-level-intro .studio-two-lights{display:inline-flex!important;gap:6px;padding:10px 5px}
.studio-level-intro .studio-two-lights i{width:8px;height:22px}
.studio-level-intro button{display:grid;place-items:center;width:40px;height:40px;margin-left:auto;border-radius:50%;border:1px solid var(--border2);background:var(--surface);color:var(--muted2);cursor:pointer}
.studio-level-dialog h2{margin:0;font:600 clamp(26px,4vw,34px)/1.12 var(--font);letter-spacing:-.04em}
.studio-level-dialog #studioLevelTitle:focus{outline:none!important;box-shadow:none}
.studio-level-dialog #studioLevelHelp{margin:12px 0 25px;font-size:14px;line-height:1.6;color:var(--muted2)}
.studio-level-dialog fieldset{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:0;border:0;min-width:0}
.studio-level-dialog legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.studio-level-option{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--border2);border-radius:16px;background:var(--bg);cursor:pointer;transition:border-color .15s,background .15s}
.studio-level-option input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.studio-level-option:has(input:checked){border-color:var(--studio-accent);background:var(--studio-active)}
.studio-level-option:has(input:focus-visible){outline:2px solid var(--studio-accent);outline-offset:3px}
.studio-level-option-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}
.studio-level-option-top>.ic{width:26px;height:26px;stroke-width:1.5;color:var(--studio-accent)}
.studio-level-check{width:18px;height:18px;border:1px solid var(--border2);border-radius:50%}
.studio-level-option:has(input:checked) .studio-level-check{border:5px solid var(--studio-accent);background:var(--bg)}
.studio-level-option strong{font-size:16px;font-weight:600;letter-spacing:-.025em}
.studio-level-option>span:not(.studio-level-option-top){font-size:12px;line-height:1.65;color:var(--muted2)}
.studio-level-option small{margin-top:auto;padding-top:8px;font-size:11px;font-weight:550;color:var(--studio-accent)}
.studio-level-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px}
.studio-level-footer p{max-width:235px;margin:0;font-size:12px;line-height:1.65;color:var(--muted2)}
.studio-level-footer button{flex-shrink:0;display:flex;align-items:center;gap:16px;min-height:46px;padding:12px 20px;border:0;border-radius:11px;background:var(--lima);color:var(--tinta-sobre-verde);font:600 13px var(--font);cursor:pointer}
.studio-level-dialog button:focus-visible{outline:2px solid var(--studio-accent);outline-offset:3px}
@media(max-width:900px){
 body.studio-workbench .studio-mobile-menu{display:grid!important;place-items:center;position:fixed;top:max(12px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));z-index:80;width:44px;height:44px;margin:0;background:var(--surface);border:1px solid var(--border2);border-radius:12px;color:var(--text);box-shadow:var(--sombra-1)}
 body.studio-workbench .main{padding-top:64px}
 body.studio-workbench>.studio-tools-menu{inset:64px 12px auto 12px;width:auto;max-height:calc(100dvh - 80px)}
 body.studio-workbench .studio-tool-guide{scroll-margin-top:72px}
}
@media(max-width:560px){
 .studio-level-dialog{padding:22px 18px;border-radius:20px}
 .studio-level-dialog #studioLevelHelp{margin-bottom:18px}
 .studio-level-dialog fieldset{grid-template-columns:1fr;gap:10px}
 .studio-level-option{padding:16px;gap:7px}.studio-level-option-top{margin-bottom:3px}
 .studio-level-option-top>.ic{width:22px;height:22px}
 .studio-level-option small{padding-top:1px}
 .studio-level-footer{flex-direction:column;gap:14px;align-items:stretch;margin-top:18px}
 .studio-level-footer p{max-width:none}.studio-level-footer button{justify-content:center}
}
@media(prefers-reduced-motion:no-preference){
 .studio-level-dialog[open]{animation:studio-nivel-entra .28s cubic-bezier(.2,.8,.2,1) both}
 .studio-level-dialog[open]::backdrop{animation:studio-nivel-velo .22s both}
 .studio-level-dialog[open] .studio-level-option{animation:studio-nivel-entra .34s .08s both;transition:border-color .18s,background .18s,transform .18s}
 .studio-level-dialog[open] .studio-level-option:nth-of-type(2){animation-delay:.14s}
 .studio-level-dialog[open] .studio-two-lights i{animation:studio-nivel-luz 1.4s ease-in-out 2}
 .studio-level-dialog[open] .studio-two-lights i:nth-child(2){animation-delay:.2s}
 .studio-level-option:hover{transform:translateY(-2px)}
 @keyframes studio-nivel-entra{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
 @keyframes studio-nivel-velo{from{opacity:0}to{opacity:1}}
 @keyframes studio-nivel-luz{50%{filter:brightness(1.2);box-shadow:0 0 15px var(--studio-accent)}}
}
@media(prefers-reduced-motion:reduce){.studio-level-option{transition:none}}


/* cocuyo-css: assets/css/estudio-movil.css */
/* Estudio móvil. Referencia observada: Higgsfield, 390 × 844, septiembre 2026.
   Conserva los nodos y los controles de generación; el escritorio no cambia. */
.sm-header,.sm-nav,.sm-hub-modes,.sm-hub-filters,.sm-panel-close,.sm-model-row{display:none}
.sm-create-dialog{box-sizing:border-box;inset:0;margin:auto;width:min(640px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px));overflow:auto;border:0;background:var(--bg);color:var(--text);font:400 14px var(--font)}
.sm-create-dialog::backdrop{background:var(--studio-overlay)}
.sm-create-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:38px;gap:20px}
.sm-create-heading>span{font-size:11px;letter-spacing:.13em;color:var(--muted2)}
.sm-create-heading button{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text)}
.sm-create-dialog h2{font:650 clamp(28px,7vw,36px)/1.12 var(--font);letter-spacing:-.045em;margin:0 0 14px;max-width:350px}
.sm-create-description{margin:0 0 30px;color:var(--muted2);font-size:14px;line-height:1.6}
.sm-create-choices{display:grid;gap:14px}
.sm-create-choice{display:flex;align-items:center;gap:16px;min-height:112px;width:100%;padding:14px;border:1px solid var(--border);border-radius:19px;background:var(--surface);color:var(--text);text-align:left;font-family:inherit;cursor:pointer}
.sm-create-choice>img,.sm-choice-art{width:76px;height:82px;object-fit:cover;border-radius:12px;flex:none;background:var(--surface2)}
.sm-choice-art{display:grid;place-items:center;color:var(--lima)}
.sm-choice-art>.ic{width:35px;height:35px}
.sm-create-choice>span:not(.sm-choice-art){display:grid;gap:8px;min-width:0}
.sm-create-choice b{font-size:16px;font-weight:600;line-height:1.2}
.sm-create-choice small{font-size:12px;line-height:1.5;color:var(--muted2)}
.sm-create-choice>.ic{width:17px;height:17px;margin-left:auto;flex:none;transform:rotate(-90deg);color:var(--muted)}
.sm-create-choice:hover{border-color:var(--lima)}
/* Hoja de modos: accesos de la navegación principal (Apps, útiles…). */
.sm-create-links{margin-top:28px}
.sm-create-links h3{margin:0 0 10px;color:var(--muted2);font:600 12px/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase}
.sm-create-links>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sm-create-link{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);font:500 14px/1.2 var(--font);text-decoration:none}
.sm-create-link .ic{width:18px;height:18px;flex:none;color:var(--muted2)}
.sm-create-link:hover{border-color:var(--lima)}
.sm-create-link:focus-visible{outline:2px solid var(--lima);outline-offset:2px}
.sm-create-dialog button:focus-visible{outline:2px solid var(--lima);outline-offset:3px}
@media(max-width:360px){.sm-create-dialog{padding-inline:16px}.sm-create-choice{gap:12px;padding:12px}.sm-create-choice>img,.sm-choice-art{width:58px;height:74px}.sm-create-choice b{font-size:15px}}
@media(max-width:900px){
 body.studio-workbench{--sm-top:60px;--sm-bottom:76px;--sm-cta:82px;--sm-gap:16px;--side:0px;min-height:100dvh;overflow-x:clip}
 body.studio-workbench .app{display:block;min-height:100dvh}
 body.studio-workbench .main{width:100%;margin:0;overflow:visible;padding-top:calc(var(--sm-top) + env(safe-area-inset-top,0px));padding-bottom:calc(var(--sm-bottom) + env(safe-area-inset-bottom,0px))}
 body.studio-workbench .main>.mobbtn{display:none!important}
 body.studio-workbench .side{position:fixed!important;inset:0 0 0 auto;width:min(320px,88vw)!important;height:100dvh;padding:20px 16px max(20px,env(safe-area-inset-bottom));z-index:160;transform:translateX(105%)!important;visibility:hidden;box-shadow:none;transition:transform .2s,visibility .2s}
 body.studio-workbench .side.open{transform:translateX(0)!important;visibility:visible;box-shadow:0 0 0 100vmax var(--studio-overlay)}
 body.studio-workbench .side>.top{padding:6px 4px 20px}
 body.studio-workbench .side #toolnav{margin-top:8px}
 body.studio-workbench .side .studio-session-switch{margin-bottom:16px}
 body.studio-workbench .side .foot{margin-top:auto}
 .sm-header{position:fixed;inset:0 0 auto;z-index:70;display:flex;align-items:center;gap:10px;height:calc(var(--sm-top) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 16px 0;background:var(--bg);border-bottom:1px solid var(--border)}
 .sm-brand{flex:none;display:block;font-size:18px;font-weight:750;letter-spacing:-.05em}
 .sm-brand .o-viva{color:var(--lima);font-style:normal}
 .sm-header button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border-radius:12px;font:600 12px var(--font)}
 .sm-header button.sm-brand{display:block;padding:0;font:750 18px var(--font);letter-spacing:-.05em}
 .sm-mode{min-width:0;margin-right:auto;padding:0 8px;color:var(--muted2)}
 .sm-mode span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sm-mode .ic{width:13px;height:13px;flex:none}
 .sm-close{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--text);background:var(--surface)}
 .sm-close .ic{width:18px;height:18px}
 .sm-nav{position:fixed;inset:auto 0 0;z-index:65;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:3px;min-height:calc(var(--sm-bottom) + env(safe-area-inset-bottom,0px));padding:7px max(8px,calc((100vw - 600px)/2)) calc(7px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--border)}
 .sm-nav a,.sm-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:54px;padding:3px 0;color:var(--muted);font:500 10px/1.15 var(--font);text-align:center;text-decoration:none;border-radius:12px}
 .sm-nav .ic{width:21px;height:21px;flex:none}
 .sm-nav [aria-current="page"]{color:var(--text)}
 .sm-nav [aria-current="page"]>.ic{color:var(--lima)}
 .sm-nav .sm-create{margin:0 4px;background:var(--lima);color:var(--tinta-sobre-verde);font-weight:650;border-radius:16px}
 .sm-create .ic{width:25px;height:25px}
 /* La insignia Beta del Agente va en la esquina: si cae debajo del texto,
    el botón crece a 73 px y sobresale de la barra inferior. */
 .sm-nav .sm-create{position:relative;gap:3px;min-height:48px}
 .sm-nav .sm-create .ic{width:21px;height:21px}
 .sm-nav .sm-create>.agente-beta{position:absolute;top:2px;right:2px;margin:0;padding:1px 3px;font-size:8px!important;line-height:1.1}
 /* Con Agente son seis botones: en teléfonos estrechos se compacta el texto
    para que ninguna etiqueta toque a la vecina. */
 /* A 320-370 px «Creaciones» (12 px) tocaba a «Precios»: texto algo menor. */
 @media(max-width:370px){body.studio-workbench .sm-nav span{font-size:10.5px!important}}
 @media(max-width:400px){
  html[data-agente-beta=si] .sm-nav{gap:1px;padding-inline:4px}
  html[data-agente-beta=si] .sm-nav span{font-size:10px!important}
  html[data-agente-beta=si] .sm-nav .sm-create{margin:0 2px}
 }
 @media(max-width:340px){html[data-agente-beta=si] .sm-nav span{font-size:9.5px!important}}
 body.studio-workbench:not(.experiencia-facil) #pg-home>.studio-wrap{padding:12px var(--sm-gap) 24px;max-width:640px;margin:auto}
 body.studio-workbench:not(.experiencia-facil) .studio-workhead{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:0;overflow:hidden;clip-path:inset(50%)}
 body.studio-workbench:not(.experiencia-facil) .studio-workhead button{display:none}
 body.studio-workbench:not(.experiencia-facil) #pg-home #title{font:600 18px/1.3 var(--font);letter-spacing:-.025em}
 body.studio-workbench .studio-jump{min-height:40px;padding:6px 9px;font-size:11px;border:1px solid var(--border);border-radius:10px;white-space:nowrap}
 body.studio-workbench:not(.experiencia-facil) .studio-workspace{display:block;align-items:stretch}
 body.studio-workbench:not(.experiencia-facil) .studio-editor-slot{position:static;width:100%;max-width:none;scroll-margin-top:80px}
 body.studio-workbench:not(.experiencia-facil) #mesa{position:static!important;inset:auto;width:100%;padding:0;margin:0;border:0;background:none;transform:none}
 body.studio-workbench:not(.experiencia-facil) #mesa .mesa-in{display:block;width:100%;padding:0;border:0;border-radius:0;max-height:none;overflow:visible;background:none;box-shadow:none!important;backdrop-filter:none}
 body.studio-workbench:not(.experiencia-facil) #mesa :is(.studio-editor-head,.mesa-top,.studio-field-heading){display:none}
 body.studio-workbench:not(.experiencia-facil) #mesa .composer{display:flex;flex-direction:column;gap:0;min-height:calc(100dvh - var(--sm-top) - var(--sm-bottom) - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));padding:0;border:0;overflow:visible;background:none}
 body.studio-workbench:not(.experiencia-facil) #mesa #imageRefControls{order:1;gap:0;margin:0 0 16px}
 body.studio-workbench:not(.experiencia-facil) #mesa #addImageRefs{width:100%;min-height:118px;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:18px 12px;background:var(--surface2);color:var(--muted2);border:1px dashed var(--border2);border-radius:17px;font-size:14px;font-weight:450}
 body.studio-workbench:not(.experiencia-facil) #mesa #addImageRefs>.ic{width:28px;height:28px;flex:none;color:var(--muted2)}
 body.studio-workbench:not(.experiencia-facil) #mesa #addImageRefs b{margin:0;font-size:11px;background:transparent;padding:0}
 body.studio-workbench:not(.experiencia-facil) #mesa .image-ref-hint{font-size:11px;margin-top:7px;line-height:1.5}
 body.studio-workbench:not(.experiencia-facil) #mesa #refgrid{order:1;gap:10px;display:flex;flex-wrap:wrap;margin:0 0 16px}
 body.studio-workbench:not(.experiencia-facil) #mesa #refgrid:empty{display:none}
 body.studio-workbench:not(.experiencia-facil) #mesa #refgrid .refwrap{flex:1 1 42%;min-width:0}
 body.studio-workbench:not(.experiencia-facil) #mesa #refgrid .refbox{width:100%;min-height:112px;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:18px 10px;background:var(--surface2);border:1px dashed var(--border2);border-radius:17px;color:var(--muted2);font-size:13px;text-align:center;white-space:normal}
 body.studio-workbench:not(.experiencia-facil) #mesa #refgrid .refbox>.ic{width:26px;height:26px;flex:none;color:var(--muted2)}
 body.studio-workbench:not(.experiencia-facil) #mesa #attrow{order:2;margin:0 0 12px!important;padding:0 0 5px}
 body.studio-workbench:not(.experiencia-facil) #mesa #ta{order:3;width:100%;min-height:146px;max-height:28dvh;padding:17px 16px;margin:0;background:var(--surface2)!important;border:1px solid var(--border)!important;border-bottom:0!important;border-radius:17px 17px 0 0;font-size:16px;line-height:1.6;box-shadow:none;scroll-margin-top:80px}
 body.studio-workbench:not(.experiencia-facil) #mesa #ta:focus{box-shadow:none;outline:0}
 body.studio-workbench:not(.experiencia-facil) #mesa #ta:focus-visible{outline:2px solid var(--studio-accent);outline-offset:2px}
 body.studio-workbench:not(.experiencia-facil) #mesa #parambar{order:4;display:flex!important;flex-wrap:wrap;align-items:center;gap:8px;padding:0 0 12px;margin:0;min-width:0}
 body.studio-workbench:not(.experiencia-facil) #mesa #parambar>.lbl{display:none}
 body.studio-workbench:not(.experiencia-facil) #mesa #parambar>.param[data-pop="model"]{display:flex;flex:0 0 100%;justify-content:flex-end;gap:8px;width:100%;margin:0 0 18px;padding:12px 16px;min-height:54px;border:1px solid var(--border);border-top:0;border-radius:0 0 17px 17px;background:var(--surface2);font-size:13px;box-shadow:none}
 body.studio-workbench:not(.experiencia-facil) #mesa #parambar>.param[data-pop="model"]::before{content:attr(data-sm-label);margin-right:auto;font-size:12px;font-weight:450;color:var(--muted)}
 body.studio-workbench:not(.experiencia-facil) #mesa #parambar>.param[data-pop="model"]>.tile{width:20px;height:20px;flex:none}
 body.studio-workbench:not(.experiencia-facil) #mesa #parambar .param{min-height:44px;width:auto;max-width:100%;padding:10px 13px;border:1px solid var(--border);border-radius:24px;background:var(--surface2);font-size:13px;box-shadow:none;gap:6px}
 body.studio-workbench:not(.experiencia-facil) #mesa .param .car{margin-left:3px}
 body.studio-workbench:not(.experiencia-facil) #mesa #parambar>.cost{width:100%;padding:4px 2px;margin:0;min-height:30px;font-size:12px}
 body.studio-workbench:not(.experiencia-facil) #mesa #omniLimits{flex:0 0 100%;font-size:11px!important;line-height:1.55!important}
 body.studio-workbench:not(.experiencia-facil) #mesa #refQuoteStatus{order:5;font-size:12px;line-height:1.5;margin:6px 0 14px;overflow-wrap:anywhere}
 body.studio-workbench:not(.experiencia-facil) #mesa #headicons{order:10;position:sticky;bottom:calc(var(--sm-bottom) + env(safe-area-inset-bottom,0px));z-index:40;display:flex;width:100%;padding:12px 0;margin-top:auto;background:var(--bg)}
 body.studio-workbench:not(.experiencia-facil)[data-studio-mode="image"] #mesa #headicons{position:static;inset:auto;z-index:auto}
 body.studio-workbench:not(.experiencia-facil) #mesa #headicons .roundbtn{display:flex;width:100%;min-height:52px;height:auto;justify-content:center;gap:9px;padding:14px 18px;font-size:15px;border-radius:13px;background:var(--lima);color:var(--tinta-sobre-verde);box-shadow:none}
 body.studio-workbench #mesa .studio-floating{max-width:calc(100vw - 24px);border-radius:17px;background:var(--surface2)}
 body.studio-workbench #mesa .studio-floating .opt{min-height:48px;font-size:14px}
 body.studio-workbench #mesa .studio-floating button{min-height:48px;font-size:14px}
 body.studio-workbench:not(.experiencia-facil) .studio-results{width:100%;min-width:0;margin-top:24px;padding-top:16px;border-top:1px solid var(--border);scroll-margin-top:76px}
 body.studio-workbench .histbar{flex-wrap:wrap;gap:10px}
 body.studio-workbench .histview{min-height:44px}
 body.studio-workbench .jobgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
 body.studio-workbench .jobcard{min-width:0;border-radius:14px}
 body.studio-workbench .jobfila{grid-template-columns:88px minmax(0,1fr);grid-template-areas:"media cuerpo" "acciones cuerpo";grid-template-rows:auto 1fr;gap:10px}
 body.studio-workbench .jobfila .jr-acc{flex-direction:row;gap:6px}
 body.studio-workbench .jobfila .jr-prompt{font-size:13px}
 body.studio-workbench #pg-library{padding:20px 16px 24px}
 body.studio-workbench .bv-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
 body.studio-workbench .bv-seg{min-height:44px}
 body.studio-workbench .bv-busca{font-size:16px}
 body.studio-workbench .bv-segs{overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
 body.studio-workbench .bv-seg{flex:none}
 /* Selectores y cuenta: panel inferior que cabe entre los bordes seguros. */
 body.studio-workbench #modal{align-items:flex-end;padding:0;background:var(--studio-overlay);z-index:200}
 body.studio-workbench #modal .mbox{width:100%;max-width:640px;max-height:calc(100dvh - 72px);margin:0 auto;border-radius:22px 22px 0 0;overflow:hidden;border:1px solid var(--border2);padding-bottom:env(safe-area-inset-bottom,0px)}
 body.studio-workbench #modal .studio-model-head{padding:22px 18px 16px}
 body.studio-workbench #modal .studio-model-head h2{font-size:20px}
 body.studio-workbench #modal .studio-model-head .studio-eyebrow{display:none}
 body.studio-workbench #modal .mtop{padding:0 16px 14px}
 body.studio-workbench #msearch{font-size:16px;min-height:46px}
 body.studio-workbench #modal .mbody{padding:0 10px 20px;overflow:auto}
 body.studio-workbench #modal .mrow{padding:15px 10px;min-height:72px;border:0;border-bottom:1px solid var(--border);border-radius:0;gap:12px}
 body.studio-workbench #modal .mrow .logo{width:38px;height:38px;flex:none;border-radius:11px}
 body.studio-workbench #modal .mrow .nm{font-size:14px}
 body.studio-workbench #modal .mrow .ds{font-size:12px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
 body.studio-workbench #modal .mrow .spec{font-size:9px;padding:2px 5px;line-height:1.5}
 body.studio-workbench #modal .mrow.sel{background:var(--studio-active);border-radius:12px}
 body.studio-workbench #modal .xclose{min-width:44px;min-height:44px}
 body.studio-workbench :is(#accmenu,#submenu){position:fixed!important;left:12px!important;right:12px;bottom:calc(var(--sm-bottom) + 10px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;max-height:calc(100dvh - 170px);z-index:190}
 body.studio-workbench #submenu{z-index:191}
 body.studio-workbench .accmenu :is(a,button).mi{min-height:46px;font-size:13px}
 body.studio-workbench .studio-settings{width:100%;max-width:640px;max-height:calc(100dvh - 30px);margin:auto auto 0;border-radius:22px 22px 0 0;padding-bottom:max(22px,env(safe-area-inset-bottom))}
 body.studio-workbench .studio-settings-heading .iconbtn{width:44px;height:44px}
 body.studio-workbench .studio-settings select{font-size:16px}
 body.studio-workbench #payModal{padding:0;align-items:flex-end;z-index:210}
 body.studio-workbench #payModal .pay-dialog{width:100%;max-height:calc(100dvh - 30px);border-radius:22px 22px 0 0;padding-bottom:max(20px,env(safe-area-inset-bottom))}
 body.studio-workbench :is(.bv-modal,.vz-modal,.libmodal){max-width:100vw}
 body.studio-workbench #vzModal{align-items:flex-end;padding:0}
 body.studio-workbench #vzModal .vz-caja{width:100%;max-width:640px;max-height:calc(100dvh - 72px);border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:none}
 body.studio-workbench #vzModal .vz-top{padding:16px}
 body.studio-workbench #vzModal .vz-top b{font:600 20px var(--font)}
 body.studio-workbench #vzModal .vz-x{width:44px;height:44px;flex:none}
 body.studio-workbench #vzModal .vz-busca{min-height:46px}
 body.studio-workbench #vzModal .vz-busca input{font-size:16px}
 body.studio-workbench #vzModal .vz-fila{min-height:64px}
 body.studio-workbench .jobfila .jr-med{width:100%}
 body.studio-workbench #bvVisor .bv-vtop .bv-b{min-width:44px;min-height:44px}
 /* El centro Crear usa los mismos flujos y la disponibilidad del servidor. */
 body.studio-workbench .studio-tools-menu{position:fixed!important;inset:0!important;z-index:180;width:100%!important;max-width:none;max-height:100dvh;padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(30px + env(safe-area-inset-bottom,0px));border:0;border-radius:0;background:var(--bg);box-shadow:none}
 .studio-tools-menu .studio-tools-heading{position:sticky;top:-20px;z-index:3;background:var(--bg);padding:4px 0 15px;margin:0}
 .studio-tools-menu .studio-tools-heading h2{font-size:25px}
 .studio-tools-menu .studio-tools-heading p{display:none}
 .sm-hub-filters{display:flex;gap:8px;overflow-x:auto;padding:0 0 20px;scrollbar-width:none}
 .sm-hub-filters button{min-height:40px;padding:10px 17px;border-radius:24px;font:500 13px var(--font);color:var(--muted2);white-space:nowrap}
 .sm-hub-filters button[aria-pressed="true"]{color:var(--bg);background:var(--text)}
 .sm-hub-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:22px}
 .sm-hub-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:0;gap:7px;text-align:left}
 .sm-hub-card[hidden]{display:none}
 .sm-hub-card>img,.sm-hub-art{width:100%;aspect-ratio:1.35;object-fit:cover;border-radius:15px;background:var(--surface2)}
 .sm-hub-card b{font-size:14px;font-weight:650;padding:3px 2px 0}
 .sm-hub-card small{font-size:12px;line-height:1.5;color:var(--muted);padding:0 2px}
 .sm-hub-art{display:grid;place-items:center;color:var(--lima);background:radial-gradient(ellipse at center,var(--studio-active),var(--surface2))}
 .sm-hub-art .ic{width:54px;height:54px}
 body.studio-workbench .studio-tools-menu [data-tools-list]{display:block}
 body.studio-workbench .studio-tools-group[hidden]{display:none}
 body.studio-workbench .studio-tools-group h3{margin:16px 0 8px}
 body.studio-workbench .studio-tools-group button{min-height:92px;padding:15px 12px;background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:10px}
 body.studio-workbench .studio-tools-group button b{font-size:14px}
 body.studio-workbench .studio-tools-group button small{font-size:12px}
 body.studio-workbench .studio-tools-group button em{font-size:11px}
 .sm-panel-close{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--surface2);margin-left:auto;flex:none}
 body.studio-workbench .studio-tool-guide{margin:4px 0 20px;padding:16px;scroll-margin-top:76px}
 /* Audio conserva voz, idioma, velocidad y ajustes avanzados. */
 body.studio-workbench.modo-audio #mesa .composer{min-height:0}
 body.studio-workbench.modo-audio #mesa #ta{order:initial;border-radius:16px;border:1px solid var(--border)!important;margin:10px 0 16px;min-height:150px}
 body.studio-workbench.modo-audio #mesa #parambar{order:initial;padding:0;gap:10px}
 body.studio-workbench.modo-audio #mesa #parambar>.param[data-pop="model"]{border:1px solid var(--border);border-radius:14px;margin:0 0 12px}
 body.studio-workbench.modo-audio #mesa .ap-voz{min-height:148px;border-radius:17px;margin-bottom:14px}
 body.studio-workbench.modo-audio #mesa .ap-fila{min-height:48px;font-size:13px}
 body.studio-workbench.modo-audio #mesa .ap-gen{position:sticky;bottom:calc(var(--sm-bottom) + env(safe-area-inset-bottom,0px));z-index:40;min-height:52px;border-radius:13px;margin-top:18px;font-size:15px}
 body.studio-workbench.modo-audio #mesa .ap-idioma select{font-size:16px;max-width:100%}
 body.studio-workbench.modo-audio #mesa #headicons{display:none}
 body.studio-workbench.sm-keyboard .sm-nav{display:none}
 body.studio-workbench.sm-keyboard #mesa #headicons,body.studio-workbench.sm-keyboard #mesa .ap-gen{position:static}
 body.studio-workbench.sm-panel-open{overflow:hidden}
 @media(max-width:359px){
  body.studio-workbench{--sm-gap:12px}
  .sm-header{padding-inline:12px;gap:4px}.sm-header button.sm-brand{font-size:16px}.sm-mode{font-size:11px!important;padding-inline:5px}
  body.studio-workbench:not(.experiencia-facil) #pg-home #title{font-size:16px}
  body.studio-workbench .studio-jump{font-size:10px;padding-inline:7px}
  .sm-nav a,.sm-nav button{font-size:9px}
 }
 @media(prefers-reduced-motion:reduce){body.studio-workbench .side{transition:none}}
}

/* Con una hoja a pantalla completa abierta (modelos, visor, biblioteca,
   recarga) la burbuja de Ayuda tapaba precios y botones de esa hoja. */
body.studio-workbench:has(#bvVisor.on,.modal.on,.bibmodal.on,.vz-modal.on) #cocuyo-chat-raiz .cchat-btn{display:none}
/* Al moverse con teclado o al llevar un campo a la vista, nada queda debajo
   de la cabecera ni de la barra inferior fijas. */
@media(max-width:900px){html:has(body.studio-workbench){scroll-padding-top:76px;scroll-padding-bottom:92px}}

/* =====================================================================
   COMPOSITOR MÓVIL «ESTILO HERRAMIENTA» (octubre 2026)
   Solo en móvil (900 px o menos) y solo mientras se crea: estudio-movil.js
   pone la clase body.sm-herramienta (no en Creaciones, ni en Explorar, ni en
   la experiencia fácil). El escritorio no cambia.
   Pauta de Imagen y Video, de arriba abajo:
     1. Cabecera de 48 px: marca COCUYO, «Crear imagen ⌄» (cambia de modo y
        lleva a Apps, Útiles, Conectores, Comunidad y Precios) y una X que
        vuelve a Explorar. La barra pública de arriba se oculta.
     2. Subida de referencias grande arriba.
     3. Una tarjeta con la descripción y la fila «Modelo».
     4. Ajustes en píldoras de 44 px pegados a un Generar grande, FIJO abajo,
        con el coste dentro, justo encima de la barra inferior de siempre
        (Proyectos · Apps · Creaciones · Precios · Cuenta). El hueco que ocupan
        lo mide estudio-movil.js (--sm-navh, --sm-generar y --sm-dock) para que
        nunca tapen nada. Con el teclado abierto, o con el teléfono apaisado,
        vuelven a su sitio dentro del formulario.
   Audio: solo cambia la cabecera; su formulario queda como estaba.
   Todas las reglas llevan «#pg-home #mesa» para ganar a las hojas que se
   cargan después sin tener que editarlas. Colores: solo tokens.
   ===================================================================== */
@media(max-width:900px){
 /* --- 1. Cabecera (los tres modos) ----------------------------------- */
 html body.studio-workbench.sm-herramienta{--sm-top:48px;--st-top:calc(48px + env(safe-area-inset-top,0px))}
 html body.studio-workbench.sm-herramienta .studio-public-nav{display:none!important}
 /* Misma familia que la cabecera pública (.f-cabecera): vidrio oscuro,
    línea fina abajo y el wordmark con las dos O encendidas. Respeta la zona
    segura de los lados (iPhone apaisado con isla o muesca). */
 html body.studio-workbench.sm-herramienta .sm-header{display:flex!important;align-items:center;gap:12px;height:calc(48px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 0 0;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(8px,env(safe-area-inset-right,0px));background:var(--f-vidrio);-webkit-backdrop-filter:var(--vidrio);backdrop-filter:var(--vidrio);border-bottom:0;box-shadow:0 1px 0 var(--f-linea)}
 /* Como Higgsfield (dueño, 6-oct-2026): en el compositor la cabecera no repite
    la marca; manda directamente la herramienta («Crear imagen ⌄», «Crear video ⌄»,
    «Crear audio ⌄»), que abre el cambio de modo. La X sigue volviendo a Explorar.
    El botón de la marca se queda en el DOM (accesibilidad y escritorio), oculto aquí. */
 html body.studio-workbench.sm-herramienta .sm-header button.sm-brand{display:none}
 html body.studio-workbench.sm-herramienta .sm-header .sm-mode{position:relative;min-width:0;min-height:44px;margin-inline-end:auto;padding:0;padding-inline:0 6px;font:650 17px/1.2 var(--fuente);letter-spacing:-.01em;color:var(--f-texto)}
 html body.studio-workbench.sm-herramienta .sm-header .sm-mode .ic{width:14px;height:14px;color:var(--f-texto-2)}
 /* La X: 44 × 44 de zona táctil (mínimo de accesibilidad). */
 html body.studio-workbench.sm-herramienta .sm-close{width:44px;height:44px;border-radius:var(--f-r-control);background:var(--f-sup-2);color:var(--f-texto)}
 html body.studio-workbench.sm-herramienta .sm-close:hover{background:var(--f-sup-3)}
 html body.studio-workbench.sm-herramienta .sm-header :is(button,a):focus-visible{outline:2px solid var(--f-lima);outline-offset:2px}
 html body.studio-workbench.sm-herramienta .main{padding-top:calc(48px + env(safe-area-inset-top,0px))}
 /* Aviso breve bajo la cabecera (borrador que no se pudo guardar). */
 html body.studio-workbench.sm-herramienta .sm-aviso:not([hidden]){position:fixed;top:calc(56px + env(safe-area-inset-top,0px));left:16px;right:16px;z-index:70;margin:0;padding:12px 14px;border:1px solid var(--f-linea-fuerte);border-radius:var(--f-r-control);background:var(--f-sup-2);color:var(--f-texto);font:500 14px/1.4 var(--fuente)}

 /* --- Imagen y Video: el resto de la pauta (Audio no cambia) ----------- */
 /* Al final de la página se reserva el alto de Generar + ajustes + barra
    inferior. En tabletas todo se centra a 640 px. */
 html body.studio-workbench.sm-herramienta:not(.modo-audio) .main{padding-bottom:0}
 html body.studio-workbench.sm-herramienta:not(.experiencia-facil):not(.modo-audio) #pg-home.page>.studio-wrap{max-width:640px;margin:0 auto;padding:16px 16px calc(var(--sm-dock,220px) + 24px)}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home .studio-workspace{display:flex!important;flex-direction:column;gap:16px}
 /* «Esperando para crear» y los resultados van debajo de la tarjeta. */
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #studioResults{order:2!important}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #studioResults:is(:has(.ej-waiting),:has(.studio-image-welcome)){margin:0;padding:0;border:0}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home .studio-results-empty.ej-waiting{min-height:clamp(120px,20dvh,200px)}

 /* Lienzo: sin la caja exterior del compositor. */
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa .mesa-in{padding:0;border:0;border-radius:0;background:none;box-shadow:none!important}
 /* El compositor (y con él Generar fijo) se pinta por encima de los
    resultados: si no, las luces de «Esperando para crear» asomaban encima. */
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa .mesa-in{position:relative;z-index:3}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa .composer{display:flex;flex-direction:column;gap:0;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none!important}

 /* --- 2. Subida grande arriba (Imagen) ------------------------------- */
 html body.studio-workbench.sm-herramienta #pg-home #mesa #imageReferenceTray{order:1;display:flex;flex-wrap:wrap;gap:8px;width:100%;margin:0 0 12px}
 html body.studio-workbench.sm-herramienta #pg-home #mesa #imageReferenceTray:not(:has(.attchip)) #imageRefControls{flex:1 1 100%;width:100%;margin:0}
 html body.studio-workbench.sm-herramienta #pg-home #mesa #imageReferenceTray:not(:has(.attchip)) #addImageRefs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:auto;min-height:120px;padding:18px 12px;border:1px dashed var(--f-linea-fuerte);border-radius:var(--f-r-tarjeta);background:var(--f-sup-1);color:var(--f-texto-2);font:500 14px/1.35 var(--fuente);box-shadow:none}
 html body.studio-workbench.sm-herramienta #pg-home #mesa #imageReferenceTray:not(:has(.attchip)) #imageRefIcons{width:44px;height:44px}
 /* El texto «Añadir referencias 0/16» vuelve a verse en la caja grande. */
 html body.studio-workbench.sm-herramienta #pg-home #mesa #imageReferenceTray:not(:has(.attchip)) :is(#imageRefLabel,#imageRefCount){position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;overflow:visible;clip-path:none;white-space:normal;background:none}
 html body.studio-workbench.sm-herramienta #pg-home #mesa #imageReferenceTray:not(:has(.attchip)) #imageRefCount{font-size:12px;font-weight:400;color:var(--f-texto-3)}
 /* Con miniaturas adjuntas, «+» pasa a ser un cuadrado más del mismo tamaño. */
 html body.studio-workbench.sm-herramienta #pg-home #mesa #imageReferenceTray:has(.attchip) #imageRefControls{flex:0 0 64px;width:64px}
 html body.studio-workbench.sm-herramienta #pg-home #mesa #imageReferenceTray:has(.attchip) #addImageRefs{width:64px;height:64px;min-height:64px;border-radius:12px}
 /* Video: fotogramas / referencias, también grandes. */
 html body.studio-workbench.sm-herramienta #pg-home #mesa #refgrid{order:1;width:100%;margin:0 0 12px}
 html body.studio-workbench.sm-herramienta #pg-home #mesa #refgrid .refbox{min-height:112px;border:1px dashed var(--f-linea-fuerte);border-radius:var(--f-r-tarjeta);background:var(--f-sup-1)}
 /* Pestañas «Inicio / Final · Referencias»: 44 px de zona táctil. */
 html body.studio-workbench.sm-herramienta #pg-home #mesa .ref-mode-switch button{min-height:44px}

 /* --- 3. Tarjeta: descripción + acciones + fila Modelo --------------- */
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #ta{order:3;width:100%;min-height:132px;max-height:32dvh;margin:0;padding:16px 16px 8px;background:var(--f-sup-2)!important;border:1px solid var(--f-linea-fuerte)!important;border-bottom:0!important;border-radius:var(--f-r-tarjeta) var(--f-r-tarjeta) 0 0;font-size:16px;line-height:1.5;box-shadow:none}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #promptLimit:not([hidden]){order:4;margin:0;padding:0 16px 6px;background:var(--f-sup-2);border-inline:1px solid var(--f-linea-fuerte)}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #studioComposerActions{order:5;margin:0;padding:0 16px;gap:0 20px;background:var(--f-sup-2);border-inline:1px solid var(--f-linea-fuerte)}
 /* «Ayuda con el prompt» y «Mis referencias»: texto sencillo, 44 px de alto
    para el dedo. */
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #studioComposerActions :is(.prompt-help-trigger,.ckit-entry){min-height:44px;padding-inline:0;background:none;border:0}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa .sm-model-row:not([hidden]){order:6;display:flex;align-items:center;gap:10px;width:100%;min-height:56px;margin:0;padding:8px 14px 8px 16px;border:1px solid var(--f-linea-fuerte);border-radius:0 0 var(--f-r-tarjeta) var(--f-r-tarjeta);background:var(--f-sup-2);box-shadow:inset 0 1px 0 var(--f-linea);color:var(--f-texto);font:500 14px/1.2 var(--fuente);text-align:left;cursor:pointer}
 html body.studio-workbench.sm-herramienta #pg-home #mesa .sm-model-label{margin-right:auto;color:var(--f-texto-3);font-size:13px}
 html body.studio-workbench.sm-herramienta #pg-home #mesa .sm-model-value{display:flex;align-items:center;gap:8px;min-width:0}
 html body.studio-workbench.sm-herramienta #pg-home #mesa .sm-model-value>span:not(.mrcbox){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 html body.studio-workbench.sm-herramienta #pg-home #mesa .sm-model-value .mrcbox{flex:none;width:22px;height:22px}
 html body.studio-workbench.sm-herramienta #pg-home #mesa .sm-model-row>.ic{flex:none;width:16px;height:16px;color:var(--f-texto-2)}
 html body.studio-workbench.sm-herramienta #pg-home #mesa .sm-model-row:focus-visible{outline:2px solid var(--f-lima);outline-offset:2px}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #refQuoteStatus{order:7;margin:10px 0 0}

 /* --- 4. Ajustes + Generar fijos abajo (Imagen y Video) -------------- */
 /* #parambar se queda solo con las píldoras: el modelo ya está en la
    tarjeta, y el coste va dentro de Generar. Generar va justo encima de la
    barra inferior (--sm-navh) y las píldoras justo encima de Generar. */
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #parambar{position:fixed;left:0;right:0;top:auto;bottom:var(--sm-generar,150px);z-index:41;order:9;display:flex!important;flex-wrap:wrap;align-items:center;gap:8px;max-height:34dvh;overflow-y:auto;margin:0;padding:12px max(16px,calc(50vw - 304px)) 0;background:linear-gradient(to bottom,transparent,var(--bg) 12px)}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #parambar>:is(.lbl,.cost,.param[data-pop="model"]){display:none!important}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #parambar>div{flex:0 0 auto;min-width:0}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #parambar>:is(span,p):not(.lbl):not(.cost){order:-1;flex:1 1 100%;margin:0;font-size:12px;line-height:1.4}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #parambar .param:not([data-pop="model"]){flex:none;width:auto;min-width:0;height:44px;min-height:44px;padding:0 14px;gap:6px;border:1px solid var(--f-linea-fuerte);border-radius:var(--f-r-pill);background:var(--f-sup-2);color:var(--f-texto);font:600 14px/1 var(--fuente);box-shadow:none}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #parambar .param:not([data-pop="model"]):is(:hover,.open){background:var(--f-sup-3)}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #parambar .param .param-caption{font-weight:450;color:var(--f-texto-2)}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #headicons{position:fixed;left:0;right:0;top:auto;bottom:var(--sm-navh,calc(var(--sm-bottom) + env(safe-area-inset-bottom,0px)));z-index:42;order:10;display:flex;width:auto;margin:0;padding:8px max(16px,calc(50vw - 304px)) 10px;border:0;background:var(--bg)}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #headicons .roundbtn{width:100%;min-height:56px;height:auto;margin:0;padding:12px 18px;gap:10px;border-radius:var(--f-r-tarjeta);background:var(--lima);color:var(--tinta-sobre-verde);font:650 16px/1.2 var(--fuente);box-shadow:none}

 /* --- Teclado abierto: Generar y ajustes vuelven al formulario -------- */
 html body.studio-workbench.sm-herramienta.sm-keyboard:not(.modo-audio) #pg-home #mesa :is(#parambar,#headicons){position:static!important;max-height:none;overflow:visible;box-shadow:none}
 html body.studio-workbench.sm-herramienta.sm-keyboard:not(.modo-audio) #pg-home #mesa #parambar{padding:12px 0 0;background:none}
 html body.studio-workbench.sm-herramienta.sm-keyboard:not(.modo-audio) #pg-home #mesa #headicons{width:100%;padding:8px 0 0;background:none}

 @media(max-width:359px){
  html body.studio-workbench.sm-herramienta .sm-header{gap:8px;padding-inline:max(12px,env(safe-area-inset-left,0px)) max(6px,env(safe-area-inset-right,0px))}
  html body.studio-workbench.sm-herramienta .sm-header .sm-mode{font-size:16px!important;padding-inline-start:0}
 }
 /* Teléfonos estrechos: las píldoras caben en una sola fila. */
 @media(max-width:370px){
  html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #parambar{gap:6px}
  html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #parambar .param:not([data-pop="model"]){padding:0 10px;gap:4px;font-size:13px}
  html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #parambar .param .param-caption{display:none}
 }
}
/* Teléfono apaisado o pantalla muy baja: no hay alto para fijar Generar y
   ajustes sin tapar el formulario. Vuelven a su sitio, como con el teclado. */
@media(max-width:900px) and (max-height:500px){
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa :is(#parambar,#headicons){position:static!important;max-height:none;overflow:visible;box-shadow:none}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #parambar{padding:12px 0 0;background:none}
 html body.studio-workbench.sm-herramienta:not(.modo-audio) #pg-home #mesa #headicons{width:100%;padding:8px 0 0;background:none}
 html body.studio-workbench.sm-herramienta:not(.modo-audio):not(.experiencia-facil) #pg-home.page>.studio-wrap{padding-bottom:calc(var(--sm-bottom) + env(safe-area-inset-bottom,0px) + 24px)}
}
/* La burbuja de Ayuda sube por encima de Generar y de los ajustes (solo
   cuando están fijos; apaisado y teclado conservan su sitio de siempre). */
@media(max-width:900px) and (min-height:501px){
 html body.studio-workbench.sm-herramienta:not(.modo-audio):not(.sm-keyboard) #cocuyo-chat-raiz .cchat-btn{bottom:calc(var(--sm-dock,220px) + 12px)}
}
/* Crear del teléfono, con el carrusel de Apps a la vista: sin la burbuja de
   Ayuda, como en Conectores y Creaciones. Con sesión tapaba la tarjeta de la
   derecha («Post de Instagram» quedaba «P… Ins» a 390 y 430, y también
   «Banner de YouTube» a 360 y 375). Vuelve si hay una respuesta nueva (su
   punto avisa), con resultados (sin carrusel, encima de los ajustes) y en
   las pantallas; la ayuda sigue en Comunidad («Chat de ayuda») y en la cuenta. */
@media(max-width:900px){
 html body.studio-workbench.hf-movil.hf-crear:not(.hf-con-resultados):not([data-hf-pantalla]) #cocuyo-chat-raiz:not(.cchat-hay-nuevo) .cchat-btn{display:none!important}
}
/* Selector de la biblioteca («Elegir de mis creaciones»), en el móvil
   (auditoría crear-08, oct-2026): el buscador a 16 px para que el iPhone no
   amplíe la página al tocarlo, y la × y las pestañas con 44 px de alto. */
@media(max-width:900px){
 body.studio-workbench .bibbusca{font-size:16px}
 body.studio-workbench .bibx{width:44px;height:44px}
 body.studio-workbench .bibpest{min-height:44px}
}

/* Hoja de modelos del móvil (dueño, 8-oct-2026): «Crear imagen ⌄» la abre.
   Medidas de la de Higgsfield: hoja desde abajo con asa, esquinas de 24 px,
   filas de 64 px, logo de 48 px (SVG, nítido a cualquier escala), nombre
   14 px/500 y descripción 14 px en gris. Letra: la nuestra (Geist). */
.sm-sheet{box-sizing:border-box;position:fixed;inset:auto 0 0;margin:0 auto;width:min(560px,100vw);max-width:100vw;height:min(92dvh,780px);max-height:92dvh;padding:0 0 env(safe-area-inset-bottom,0px);border:0;border-radius:24px 24px 0 0;background:#121212;color:#f7f7f8;font:400 14px/1.15 var(--font);flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased}
.sm-sheet[open]{display:flex;animation:sm-sheet-sube .26s cubic-bezier(.2,.8,.2,1)}
.sm-sheet::backdrop{background:rgba(0,0,0,.6)}
@keyframes sm-sheet-sube{from{transform:translateY(48px);opacity:.5}to{transform:none;opacity:1}}
.sm-sheet__asa{flex:none;width:36px;height:4px;margin:8px auto 0;border-radius:4px;background:#ffffff33}
.sm-sheet__cab{position:relative;flex:none;display:flex;align-items:center;justify-content:center;height:48px}
.sm-sheet__cab h2{margin:0;font:600 16px/24px var(--font);letter-spacing:-.01em;color:#f7f7f8}
.sm-sheet__cerrar{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:12px;background:#ffffff0f;color:#f7f7f8;cursor:pointer}
.sm-sheet__cerrar .ic{width:16px;height:16px}
.sm-sheet__buscar{flex:none;display:flex;align-items:center;gap:8px;height:40px;margin:4px 16px 4px;padding:0 12px;border-radius:12px;background:#ffffff0d;color:#828282}
.sm-sheet__buscar .ic{flex:none;width:16px;height:16px}
.sm-sheet__buscar input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:#fff;font:400 16px var(--font);outline:none}
.sm-sheet__buscar input::placeholder{color:#828282}
.sm-sheet__buscar input::-webkit-search-cancel-button{display:none}
.sm-sheet__lista{flex:1;overflow:auto;overscroll-behavior:contain;padding:0 8px 16px}
.sm-sheet__grupo h3{display:flex;align-items:center;gap:8px;margin:16px 8px 4px;font:600 14px/20px var(--font);color:#f7f7f8}
.sm-sheet__grupo h3 .ic{width:16px;height:16px;color:#a3a3a3}
.sm-sheet ul{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.sm-sheet__fila{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding-block:8px;padding-inline:8px 16px;border:0;border-radius:16px;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sm-sheet__fila:hover{background:#ffffff0a}
.sm-sheet__fila.is-sel{background:#ffffff12}
/* Contraste ≥ 4,5:1 sobre la fila marcada (#232323): #828282 daba 4,09 (auditoría v338). */
.sm-sheet__fila.is-sel .sm-sheet__txt small{color:#969696}
.sm-sheet__fila:focus-visible,.sm-sheet__cerrar:focus-visible{outline:2px solid var(--lima);outline-offset:-2px}
.sm-sheet__logo{flex:none;display:grid}
.sm-sheet__logo .mrcbox{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border-radius:12px}
.sm-sheet__logo .mrc{width:24px;height:24px}
.sm-sheet__txt{flex:1;display:grid;gap:4px;min-width:0}
.sm-sheet__nom{display:flex;align-items:center;gap:6px;min-width:0}
.sm-sheet__nom b{overflow:hidden;font-size:14px;font-weight:500;line-height:16px;color:#fff;white-space:nowrap;text-overflow:ellipsis}
.sm-sheet__chip{flex:none;padding:1px 5px;border-radius:5px;background:var(--lima);color:#111;font:700 9.5px/14px var(--font);letter-spacing:.02em;text-transform:uppercase}
.sm-sheet__chip[data-tipo="top"]{background:#2f6fed;color:#fff}
.sm-sheet__txt small{overflow:hidden;font-size:14px;line-height:16px;color:#828282;white-space:nowrap;text-overflow:ellipsis}
.sm-sheet__ok{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--lima);color:#111}
.sm-sheet__ok svg{width:12px;height:12px}
.sm-sheet__vacio{margin:4px 8px 8px;color:#828282;font-size:13px;line-height:1.4}
/* v340 (decisión 8): pestañas Imagen / Video / Audio, filtros «Todos /
   Mejores / Más económicos» (no en Audio), precio en cada fila y el hueco de
   los editores que vienen. Propiedades lógicas: en árabe y urdu, en espejo. */
.sm-sheet__tabs{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:4px 16px 6px;padding:3px;border-radius:12px;background:#ffffff0d}
.sm-sheet__tab{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:40px;padding:0 8px;border:0;border-radius:9px;background:transparent;color:var(--muted2);font:500 14px/1 var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sm-sheet__tab span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sm-sheet__tab .ic{flex:none;width:16px;height:16px}
.sm-sheet__tab[aria-selected="true"]{background:#ffffff1f;color:#fff}
.sm-sheet__filtros{flex:none;display:flex;gap:6px;margin:2px 16px 6px;overflow-x:auto;scrollbar-width:none}
.sm-sheet__filtros[hidden]{display:none}
.sm-sheet__filtro{flex:none;min-height:36px;padding:0 14px;border:1px solid #ffffff1f;border-radius:999px;background:transparent;color:var(--muted2);font:500 13px/1 var(--font);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sm-sheet__filtro[aria-checked="true"]{border-color:var(--lima);background:var(--lima-suave);color:#fff}
.sm-sheet__tab:focus-visible,.sm-sheet__filtro:focus-visible{outline:2px solid var(--lima);outline-offset:1px}
.sm-sheet__chip[data-tipo="gratis"]{border:1px solid var(--lima);background:transparent;color:var(--lima);line-height:12px}
/* TOP rosa, NEW azul y ECONÓMICO lima: los mismos colores que los menús. */
.sm-sheet__chip[data-tipo="best"]{background:var(--precio-rosa);color:#fff;font-style:italic}
.sm-sheet__chip[data-tipo="new"]{background:var(--precio-azul);color:#fff;font-style:italic}
.sm-sheet__chip[data-tipo="eco"]{background:var(--precio-lima);color:#111;font-style:italic}
.sm-sheet__txt small{font-size:12.5px;font-variant-numeric:tabular-nums}
.sm-sheet__precio{flex:none;display:grid;justify-items:end;gap:3px;max-width:128px;text-align:end;white-space:nowrap}
.sm-sheet__cr{font-size:13px;font-weight:600;line-height:16px;color:#fff;font-variant-numeric:tabular-nums}
.sm-sheet__cr.is-dinamico{font-size:11.5px;font-weight:400;line-height:14px;color:var(--muted2)}
.sm-sheet__precio small{font-size:11px;line-height:13px;color:var(--muted2);font-variant-numeric:tabular-nums;white-space:nowrap}
.sm-sheet__nota{margin:8px 8px 4px;color:var(--muted2);font-size:12px;line-height:1.4}
/* Cifras y ajustes siempre de izquierda a derecha (también en árabe y urdu). */
.sm-sheet__precio small,.sm-sheet__txt small [translate="no"]{direction:ltr;unicode-bidi:isolate}
/* Editores que vienen: sin enlace ni foco, «Próximamente» como texto gris. */
.sm-sheet__proximo{display:flex;align-items:center;gap:12px;min-height:64px;margin:10px 0 0;padding-block:8px;padding-inline:8px 16px;border-top:1px solid #ffffff14;color:var(--muted2)}
.sm-sheet__proximo .mrcbox{border:1px dashed #ffffff26}
.sm-sheet__proximo .mrcbox .ic{width:20px;height:20px}
.sm-sheet__proximo .sm-sheet__nom b{color:var(--muted2)}
@media(prefers-reduced-motion:reduce){.sm-sheet[open]{animation:none}}

/* ============ Estudio móvil estilo Higgsfield (dueño, 8-oct-2026) ============
   Clon fiel de la app nueva de Higgsfield; medidas tomadas de su web móvil.
   El módulo es assets/js/estudio-movil-hf.js. hf-movil = teléfono;
   hf-crear = cuadro de crear (imagen y video). */
.hf-menu,.hf-mejorar,.hf-hero,.hf-fila-cuadro,.hf-debajo,.hf-carrusel,.hf-minis{display:none}
@media(max-width:900px){
 html body.studio-workbench.hf-movil{--hf-lima:#d1fe17;--hf-brillo:#ffff14;--hf-labio:#829b19;--hf-gris:#898a8b;--hf-tarjeta:#1c1e21;--hf-lienzo:#0b0b0b;--st-top:calc(56px + env(safe-area-inset-top,0px))!important;--sm-top:var(--st-top)!important;--sm-navh:0px!important;--sm-dock:0px!important;--sm-generar:0px!important;background:#0b0b0b}
 /* Peso extra (:not(#hf)) frente a las reglas antiguas del compositor móvil. */
 /* Cabecera: ☰ a la izquierda y «Mejorar» a la derecha; nada más. */
 html body.studio-workbench.hf-movil .sm-header{display:flex!important;align-items:center;justify-content:space-between;gap:12px;height:var(--st-top);padding:env(safe-area-inset-top,0px) 9px 0 10px!important;border:0!important;background:#0b0b0b!important;box-shadow:none!important}
 html body.studio-workbench.hf-movil .sm-header>:not(.hf-menu):not(.hf-mejorar){display:none!important}
 html body.studio-workbench.hf-movil .hf-menu{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:#828282;cursor:pointer}
 html body.studio-workbench.hf-movil .hf-menu .ic{width:20px;height:20px}
 html body.studio-workbench.hf-movil .hf-mejorar{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:var(--hf-lima);color:#1a1a1a;font:500 12px/16px var(--font);text-decoration:none;white-space:nowrap}
 .hf-mejorar .ic{width:14px;height:14px}
 :is(.hf-menu,.hf-mejorar):focus-visible{outline:2px solid var(--hf-lima);outline-offset:2px}
 /* Sin barra de abajo en el Estudio: se navega con el menú lateral. */
 html body.studio-workbench.hf-movil .cy-barra{display:none!important}

 /* ---- Crear: logo, título y un solo cuadro, centrados; Apps abajo ---- */
 html body.studio-workbench.hf-crear:not(#hf):not(#hf) #mesa{display:flex;flex-direction:column;min-height:calc(100dvh - var(--st-top));margin:0!important;padding:0!important;background:transparent!important}
 html body.studio-workbench.hf-crear:not(#hf):not(#hf) #mesa .mesa-in{flex:1;display:flex;flex-direction:column;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
 html body.studio-workbench.hf-crear:not(#hf):not(#hf) #mesa .mesa-in::before,html body.studio-workbench.hf-crear:not(#hf):not(#hf) #mesa .mesa-in::after{display:none!important}
 html body.studio-workbench.hf-crear:not(#hf):not(#hf) #mesa :is(#parambar,#headicons,.sm-model-row,#refQuoteStatus){display:none!important}
 html body.studio-workbench.hf-crear:not(#hf):not(#hf) #mesa :is(#imageReferenceTray,#studioComposerActions){display:none!important}
 html body.studio-workbench.hf-crear:not(.hf-con-resultados) #studioResults{display:none!important}
 html body.studio-workbench.hf-crear .hf-hero{display:flex;flex-direction:column;align-items:center;gap:16px;margin:auto 16px 24px;text-align:center}
 /* h2 (el h1 es el de la cabecera): con el peso y el espaciado que tenía de h1, por encima de la regla general de h2 del Estudio */
 html body.studio-workbench.hf-crear:not(#hf) .hf-hero h2{margin:0;font:500 20px/24px var(--font);letter-spacing:-.025em;color:#fff}
 html body.studio-workbench.hf-crear:not(#hf):not(#hf) #mesa .composer{position:relative;display:flex!important;flex-direction:column;gap:0!important;min-height:100px;margin:0 16px!important;padding:12px 0 0!important;border:0!important;border-radius:24px!important;background:rgba(255,255,255,.1)!important;box-shadow:0 2px 8px rgba(0,0,0,.16)!important}
 html body.studio-workbench.hf-crear:not(#hf):not(#hf) #mesa #ta{order:1!important;min-height:24px!important;max-height:40dvh;overflow:auto;margin:0!important;padding:0 12px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#fff!important;font:400 16px/24px var(--font)!important}
 html body.studio-workbench.hf-crear:not(#hf):not(#hf) #mesa .hf-fila-cuadro{order:2!important;display:flex;align-items:center;gap:4px;padding:8px}
 .hf-redondo{position:relative;display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.05);color:#fff;cursor:pointer}
 .hf-redondo .ic{width:18px;height:18px}
 .hf-cuenta-refs{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--hf-lima);color:#111;font:600 10px/16px var(--font)}
 .hf-cuenta-refs[hidden]{display:none}
 .hf-chip-modelo{display:inline-flex;align-items:center;gap:6px;min-width:0;height:36px;padding:6px 8px 6px 12px;border:0;border-radius:999px;background:rgba(255,255,255,.05);color:#fff;font:500 14px/16px var(--font);cursor:pointer}
 .hf-chip-modelo__logo{display:grid;place-items:center;flex:none}
 .hf-chip-modelo__logo :is(.mrcbox,.tile){display:grid;place-items:center;width:16px!important;height:16px!important;flex:0 0 16px!important;padding:0!important;border:0!important;border-radius:4px!important;background:none!important;box-shadow:none!important}
 .hf-chip-modelo__logo .mrc{width:16px!important;height:16px!important}
 .hf-chip-modelo__txt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .hf-generar{display:inline-flex;align-items:center;gap:4px;flex:none;height:36px;margin-inline-start:auto;padding:0 12px 0 10px;border:0;border-radius:999px;background:var(--hf-lima);color:#000;font:500 16px/24px var(--font);cursor:pointer}
 .hf-generar .ic{width:16px;height:16px}
 .hf-generar:disabled{opacity:.45;cursor:default}
 .hf-generar.is-ocupado .ic{animation:hf-gira 1s linear infinite}
 @keyframes hf-gira{to{transform:rotate(360deg)}}
 :is(.hf-redondo,.hf-chip-modelo,.hf-generar,.hf-pildora,.hf-tarjeta):focus-visible{outline:2px solid var(--hf-lima);outline-offset:2px}
 html body.studio-workbench.hf-crear .hf-debajo{display:flex;justify-content:center;margin:32px 16px auto}
 .hf-pildora{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 14px;border:1px solid rgba(255,255,255,.05);border-radius:999px;background:rgba(35,35,35,.6);color:#fff;font:500 14px/18px var(--font);text-decoration:none}
 .hf-pildora .ic{width:16px;height:16px;color:#a3a3a3}
 .hf-pildora b{font-weight:500;color:var(--hf-lima)}
 /* Carrusel de Crear (como el de Higgsfield): 144×144 las dos Apps y 112×144
    los accesos (.hf-tarjeta--alta), encajando tarjeta a tarjeta; el nombre
    debajo, fuera de la imagen, y una etiqueta inclinada solo si hay dato.
    Llega a los bordes de la pantalla también en tableta (hasta 900 px, con la
    columna de 640 del Estudio y su margen de 16): --hf-sangria es lo que hay
    del borde de la columna al de la pantalla (16 en el teléfono), así la 1.ª
    tarjeta sigue alineada con la columna y la última no se corta en seco a
    media pantalla. */
 html body.studio-workbench.hf-crear .hf-carrusel{--hf-sangria:calc(16px + max(0px,(100vw - 640px) / 2));display:flex;align-items:flex-start;gap:10px;margin-inline:calc(var(--hf-sangria) * -1);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--hf-sangria) 16px;padding:24px 16px calc(20px + env(safe-area-inset-bottom,0px));padding-inline-start:var(--hf-sangria);scrollbar-width:none}
 .hf-carrusel::-webkit-scrollbar{display:none}
 /* Con una pantalla encima (Explorar, Apps…), el carrusel no se ve: sus vídeos se paran. */
 html body.studio-workbench.hf-movil[data-hf-pantalla] .hf-carrusel{display:none!important}
 .hf-tarjeta{flex:0 0 144px;display:grid;align-content:start;gap:12px;min-width:0;padding:0;border:0;background:none;color:#fff;text-align:start;font:400 14px/18px var(--font);scroll-snap-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent}
 .hf-tarjeta--alta{flex-basis:112px}
 .hf-tarjeta__img{position:relative;display:block;box-sizing:border-box;aspect-ratio:1;overflow:hidden;border:1px solid rgb(255 255 255/.05);border-radius:12px;background:var(--hf-tarjeta);transition:transform .2s cubic-bezier(.4,0,.2,1)}
 .hf-tarjeta--alta .hf-tarjeta__img{aspect-ratio:112/144}
 .hf-tarjeta:active .hf-tarjeta__img{transform:scale(.97)}
 .hf-tarjeta__img>:is(img,video){display:block;width:100%;height:100%;object-fit:cover}
 /* Etiqueta: TENDENCIA (lima), NUEVO (azul) o CONECTOR (rosa), inclinada como las de Higgsfield. */
 .hf-etiqueta{position:absolute;top:10px;inset-inline-start:7px;z-index:2;box-sizing:border-box;max-width:calc(100% - 14px);height:15px;padding:0 6px;overflow-x:clip;border-radius:2px;color:#fff;font:italic 800 11px/15px var(--font);letter-spacing:.01em;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;transform:skewX(-10.7deg)}
 [dir="rtl"] .hf-etiqueta{transform:skewX(10.7deg)}
 /* Vietnamita: Geist junta el circunflejo y el agudo de Ế/Ố en una sola rayita
    (en cualquier grosor, recta o no): letra del sistema, que los apila bien,
    recta (la etiqueta ya va inclinada) y con sitio arriba para los dos acentos. */
 :lang(vi) .hf-etiqueta{height:auto;font:normal 700 11px/18px system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif}
 /* Tailandés, hindi y bengalí: sus signos de arriba (y abajo) no caben en 15 px. */
 :is(:lang(th),:lang(hi),:lang(bn)) .hf-etiqueta{height:auto;line-height:20px}
 .hf-etiqueta--tendencia{background:var(--hf-lima);color:#1a1a1a}
 .hf-etiqueta--conector{background:radial-gradient(39% 137% at 52% 117%,rgb(238 69 150) 0%,rgb(214 24 110) 100%)}
 /* En ChatGPT y Claude: cielo negro con unas estrellas y los dos logos reales (Conectores) en blanco. */
 .hf-tarjeta__img--conectores{border-color:rgb(255 255 255/.15);background:radial-gradient(1px 1px at 18% 30%,rgb(255 255 255/.55),transparent),radial-gradient(1px 1px at 72% 18%,rgb(255 255 255/.4),transparent),radial-gradient(1px 1px at 38% 78%,rgb(255 255 255/.35),transparent),radial-gradient(1px 1px at 86% 62%,rgb(255 255 255/.45),transparent),radial-gradient(1px 1px at 12% 88%,rgb(255 255 255/.3),transparent),radial-gradient(1px 1px at 60% 92%,rgb(255 255 255/.35),transparent),#050505}
 .hf-tarjeta__logos{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px}
 .hf-tarjeta__logo{display:block;flex:none;width:28px;height:28px;background:#fff;-webkit-mask:var(--hf-logo) center/contain no-repeat;mask:var(--hf-logo) center/contain no-repeat}
 .hf-tarjeta__logo[data-c="openai"]{--hf-logo:url('../brand/conectores/openai.svg')}
 .hf-tarjeta__logo[data-c="claude"]{--hf-logo:url('../brand/conectores/claude.svg')}
 /* Explorar: tres momentos de las películas de Cocuyo apilados; el de delante se mueve. */
 .hf-pila{position:absolute;inset:0}
 .hf-pila>:is(img,video){position:absolute;left:50%;display:block;object-fit:cover;border-radius:8px;transform:translateX(-50%)}
 .hf-pila__a{top:12px;width:56px;height:80px;opacity:.4}
 .hf-pila__b{top:20px;width:76px;height:100px;box-shadow:0 10px 24px rgb(0 0 0/.6)}
 .hf-pila>.hf-pila__c{top:28px;width:88px;height:128px;border-radius:8px 8px 0 0;box-shadow:0 10px 24px rgb(0 0 0/.6)}
 .hf-pila::after{content:"";position:absolute;inset:auto 0 0;z-index:1;height:48px;background:linear-gradient(transparent,var(--hf-lienzo))}
 /* Todas las Apps: cuatro portadas 1:1 en un mosaico 2×2. */
 .hf-mosaico{position:absolute;inset:0;display:grid;grid-template:1fr 1fr/1fr 1fr;gap:4px;padding:8px}
 .hf-mosaico img{display:block;width:100%;height:100%;min-height:0;object-fit:cover;border-radius:6px}
 .hf-tarjeta__txt{display:-webkit-box;overflow:hidden;padding-inline:2px;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
 /* Con resultados: el cuadro arriba y los resultados debajo, sin portada. */
 html body.studio-workbench.hf-crear.hf-con-resultados :is(.hf-hero,.hf-debajo,.hf-carrusel){display:none!important}
 html body.studio-workbench.hf-crear.hf-con-resultados:not(#hf):not(#hf) #mesa{min-height:0;padding-top:12px!important}
 /* Avisos y progreso del Estudio (#genstatus): un bloque bajo el cuadro, no un
    globo flotante que lo tape. Sin el relleno «Esperando para crear». */
 html body.studio-workbench.hf-crear:not(#hf):not(#hf) #genstatus{position:static!important;inset:auto!important;transform:none!important;width:auto!important;max-width:none!important;margin:12px 16px 0!important;padding:12px 14px!important;border:1px solid rgba(255,255,255,.06)!important;border-radius:16px!important;background:rgba(255,255,255,.06)!important;box-shadow:none!important;color:#f7f7f8!important;font:400 14px/20px var(--font)!important}
 html body.studio-workbench.hf-crear:not(#hf):not(#hf) #genout .studio-results-empty{display:none!important}

 /* ---- Menú lateral ---- */
 .hf-cajon{position:fixed;inset:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden}
 .hf-cajon::backdrop{background:rgba(0,0,0,.5)}
 .hf-cajon__panel{display:flex;flex-direction:column;width:min(327px,87vw);height:100%;padding:env(safe-area-inset-top,0px) 0 calc(16px + env(safe-area-inset-bottom,0px));border-right:1px solid rgba(255,255,255,.06);background:#0b0b0b;animation:hf-entra .24s cubic-bezier(.2,.8,.2,1)}
 @keyframes hf-entra{from{transform:translateX(-100%)}to{transform:none}}
 .hf-cajon__cab{flex:none;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 10px 0 16px}
 /* La marca escrita se deletrea siempre de izquierda a derecha, también en árabe y urdu. */
 .hf-cajon__marca{display:inline-flex;align-items:center;direction:ltr;unicode-bidi:isolate;color:#fff;font:750 18px/22px var(--font);letter-spacing:-.05em;text-transform:uppercase;text-decoration:none}
 .hf-cajon__cerrar{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:#828282;cursor:pointer}
 .hf-cajon__cerrar .ic{width:20px;height:20px}
 .hf-cajon__lista{flex:1;display:grid;align-content:start;padding:6px 16px 0;overflow:auto}
 .hf-fila{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 10px 6px 4px;border-radius:10px;color:#fff;font:500 16px/20px var(--font);text-decoration:none}
 .hf-fila .ic{flex:none;width:24px;height:24px}
 .hf-fila:hover{background:rgba(255,255,255,.05)}
 .hf-fila.is-actual{min-height:44px;padding:8px 10px 8px 8px;background:rgba(209,254,23,.08);box-shadow:inset 0 0 0 1px rgba(209,254,23,.12);color:var(--hf-lima);font-weight:600}
 .hf-fila.is-actual .ic{width:20px;height:20px}
 .hf-fila:focus-visible,.hf-cajon__cerrar:focus-visible{outline:2px solid var(--hf-lima);outline-offset:-2px}
 .hf-fila__txt{flex:1;min-width:0}
 .hf-chip-lima{display:inline-flex;align-items:center;height:28px;padding:0 14px;border-radius:999px;background:var(--hf-lima);color:#1a1a1a;font:500 12px/16px var(--font)}
 .hf-fila__valor{color:#828282;font-size:14px}
 .hf-cajon__pie{flex:none;padding:16px 16px 0;border-top:1px solid rgba(255,255,255,.06)}
 .hf-pie__t{margin:0;font:500 14px/18px var(--font);color:#fff}
 .hf-pie__s{margin:4px 0 20px;font:400 14px/18px var(--font);color:#828282}
 .hf-entrar{width:100%;height:48px;border:1px solid rgba(0,0,0,.2);border-radius:999px;background:#fff;color:#1a1a1a;font:500 16px/18px var(--font);cursor:pointer}
 .hf-pie-cuenta{display:flex;align-items:center;gap:12px;width:100%;padding:8px;border:0;border-radius:12px;background:rgba(255,255,255,.05);color:#fff;text-align:left;font:inherit;cursor:pointer}
 .hf-pie-cuenta[hidden],.hf-pie-visitante[hidden]{display:none}
 .hf-pie-cuenta__avatar{display:grid;place-items:center;grid-auto-flow:column;gap:3px;width:36px;height:36px;border-radius:50%;background:#1d1d1d}
 .hf-pie-cuenta__avatar i{width:6px;height:6px;border-radius:50%;background:var(--hf-lima);box-shadow:0 0 6px var(--hf-lima)}
 .hf-pie-cuenta__txt{flex:1;display:grid;min-width:0}
 .hf-pie-cuenta__txt b{overflow:hidden;font:500 14px/18px var(--font);white-space:nowrap;text-overflow:ellipsis}
 .hf-pie-cuenta__txt small{font:400 12px/16px var(--font);color:#828282}
 .hf-pie-cuenta .ic{width:16px;height:16px;color:#828282}

 /* ---- Hojas desde abajo: Ajustes y Referencias ---- */
 .hf-hoja{box-sizing:border-box;position:fixed;inset:auto 0 0;width:min(560px,100vw);max-width:100vw;max-height:88vh;max-height:88dvh;margin:0 auto;padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));border:0;border-radius:24px 24px 0 0;background:#121212;color:#f7f7f8;font:400 14px/1.2 var(--font);flex-direction:column;overflow:hidden}
 .hf-dialogo-fondo{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2147483646}
 .hf-hoja[data-hf-dialogo-alterno]{z-index:2147483647}
 .hf-hoja[open]{display:flex;animation:sm-sheet-sube .26s cubic-bezier(.2,.8,.2,1)}
 .hf-hoja::backdrop{background:rgba(0,0,0,.6)}
 .hf-hoja__asa{flex:none;width:36px;height:4px;margin:8px auto 0;border-radius:4px;background:#ffffff33}
 .hf-hoja__cab{position:relative;flex:none;display:flex;align-items:center;justify-content:center;height:48px}
 .hf-hoja__cab h2{margin:0;font:600 16px/24px var(--font)}
 .hf-hoja__cerrar{position:absolute;right:-4px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:12px;background:#ffffff0f;color:#f7f7f8;cursor:pointer}
 .hf-hoja__cerrar .ic{width:16px;height:16px}
 .hf-hoja__sub{margin:-6px 0 12px;color:#828282;font-size:13px;text-align:center}
 .hf-ajustes{flex:1;overflow:auto;overscroll-behavior:contain}
 .hf-ajuste{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;color:#fff;cursor:pointer}
 .hf-ajuste__ic{display:grid;place-items:center;color:#a3a3a3}
 .hf-ajuste__ic .ic{width:16px;height:16px}
 .hf-ajuste__nombre{flex:1;font:600 14px/16px var(--font)}
 .hf-ajuste__valor{font:500 14px/16px var(--font)}
 .hf-ajuste__flecha{display:grid;place-items:center;width:24px;height:24px;border-radius:999px;background:#ffffff0f;color:#a3a3a3}
 .hf-ajuste__flecha .ic{width:14px;height:14px}
 .hf-ajuste select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;cursor:pointer}
 .hf-hoja__vacio{margin:12px 0;color:#828282}
 .hf-hoja__pie{flex:none;padding-top:16px}
 .hf-aplicar{width:100%;height:40px;border:0;border-radius:999px;background:var(--hf-lima);color:#1a1a1a;font:500 14px/16px var(--font);cursor:pointer}
 .hf-aplicar:focus-visible,.hf-hoja__cerrar:focus-visible{outline:2px solid #fff;outline-offset:2px}
 @media(prefers-reduced-motion:reduce){.hf-cajon__panel,.hf-hoja[open]{animation:none}.hf-generar.is-ocupado .ic{animation:none}}
 .hf-cuenta-refs.is-exceso{background:#ff5a52;color:#fff;font-weight:700}
 .hf-generar.is-aviso .hf-generar__coste{min-width:10px;font-weight:700;text-align:center}

 /* ---- Miniaturas en el cuadro de crear (estudio-movil-referencias.js) ----
    Encima del texto: 56 px, desplazables, X de 24 px y toque = vista previa. */
 html body.studio-workbench.hf-crear:not(#hf):not(#hf) #mesa .hf-minis{order:0!important;display:flex;gap:18px;margin:0;padding:22px 12px 10px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
 html body.studio-workbench.hf-crear:not(#hf):not(#hf) #mesa .hf-minis[hidden]{display:none!important}
 .hf-minis::-webkit-scrollbar{display:none}
 .hf-mini{position:relative;flex:none;width:56px;height:56px}
 .hf-mini__ver{position:relative;display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:16px;overflow:hidden;background:#262626;color:#fff;cursor:pointer}
 .hf-mini__ver :is(img,video){display:block;width:100%;height:100%;object-fit:cover}
 /* 9-oct-2026: X con 36×36 de toque hacia fuera de la miniatura (solo pisa la
    esquina redondeada) y círculo de 22 centrado en la esquina; quitar trae «Deshacer». */
 .hf-mini__x{position:absolute;top:-22px;right:-22px;z-index:1;width:36px;height:36px;padding:0;border:0;border-radius:0;background:transparent;color:#fff;cursor:pointer}
 .hf-mini__x::before{content:"";position:absolute;left:3px;bottom:3px;width:22px;height:22px;box-sizing:border-box;border:1px solid rgb(255 255 255/.14);border-radius:50%;background:rgb(18 18 18/.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
 .hf-mini__x .ic{position:absolute;left:8px;bottom:8px;width:12px;height:12px}
 .hf-mini__play{position:absolute;right:4px;bottom:4px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgb(0 0 0/.55);pointer-events:none}
 .hf-mini__play .ic{width:9px;height:9px;margin-left:1px}
 .hf-mini__audio{display:grid;place-items:center;color:#a3a3a3}
 .hf-mini__audio .ic{width:20px;height:20px}
 .hf-mini__ver::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
 .hf-mini.is-conflicto .hf-mini__ver::after{box-shadow:inset 0 0 0 2px #ff5a52}
 .hf-mini.is-subiendo .hf-mini__ver{cursor:default}
 .hf-mini__pct{font:600 12px/16px var(--font);color:#fff}
 .hf-mini__ver:focus-visible{outline:2px solid var(--hf-lima);outline-offset:2px}
 .hf-mini__x:focus-visible{outline:none}.hf-mini__x:focus-visible::before{outline:2px solid var(--hf-lima);outline-offset:2px}
 /* «Ayuda con el prompt» vive en el cuadro (no en la hoja de referencias);
    «Mis referencias» es un chip de la hoja. */
 html body.studio-workbench.hf-crear:not(#hf):not(#hf) #mesa #studioComposerActions:not([hidden]){order:1!important;display:flex!important;align-items:center;gap:8px;margin:2px 0 0!important;padding:0 12px!important;min-height:0;border:0!important;background:none!important}
 html body.studio-workbench.hf-crear:not(#hf):not(#hf) #mesa #studioComposerActions .ckit-entry{display:none!important}
 html body.studio-workbench.hf-crear:not(#hf):not(#hf) #mesa #studioComposerActions .prompt-help-trigger{min-height:32px;padding:4px 0;border:0;background:none;color:#969696;font:500 13px/16px var(--font)}

 /* ---- Hoja «Referencias» (estudio-movil-referencias.js), como la hoja «Assets»
    de Higgsfield: 85dvh, esquinas de 32, asa de 28×4, cabecera de 40, chips de 32,
    rejilla de 3 columnas (hueco de 8, fichas de radio 20) y «Aplicar» de 44. */
 .hf-hoja.hfr{height:85dvh;max-height:85dvh;padding:0;border-radius:32px 32px 0 0;background:#1b1b1c;transition:transform .2s cubic-bezier(.2,.8,.2,1);overscroll-behavior:contain}
 .hf-hoja.hfr.is-arrastrando{transition:none}
 .hfr-arrastre{flex:none;padding:0 16px;touch-action:none;cursor:grab}
 .hfr .hf-hoja__asa{width:28px;height:4px;margin:8px auto 0;border-radius:4px;background:rgb(255 255 255/.22)}
 .hfr-cab.hf-hoja__cab{height:40px;margin-top:2px}
 .hfr-cab h2{font:600 16px/24px var(--font)}
 .hfr .hfr-cerrar{right:0;width:44px;height:44px;border-radius:50%;background:transparent}
 .hfr .hfr-cerrar::before{content:"";position:absolute;inset:6px;border-radius:50%;background:rgb(255 255 255/.06)}
 .hfr .hfr-cerrar .ic{position:relative;width:16px;height:16px}
 .hfr-estado{flex:none;display:grid;justify-items:center;gap:4px;min-height:20px;margin:2px 16px 10px;text-align:center}
 .hfr-estado__cuenta{color:#f7f7f8;font:500 14px/20px var(--font)}
 .hfr-estado__aviso{display:block;max-width:100%;color:#ff8a80;font:500 13px/18px var(--font);opacity:1;overflow-wrap:anywhere}
 .hfr-estado__aviso[hidden]{display:none}
 .hfr-estado__aviso.is-nota{color:#d4d4d4}
 .hfr-estado__acciones{flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:-4px 16px 12px}
 .hfr-estado__acciones[hidden]{display:none}
 .hfr-accion{min-height:44px;padding:0 16px;border:1px solid rgb(255 255 255/.14);border-radius:999px;background:rgb(255 255 255/.06);color:#fff;font:500 13px/16px var(--font);cursor:pointer}
 .hfr-subir__input{display:none!important}
 .hfr-sr{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;opacity:0}
 .hfr-cuerpo{position:relative;flex:1;min-height:0;padding:0 16px 16px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
 /* Fotogramas | Referencias y los huecos Primer/Último (1:1, nunca más de 180 px). */
 .hfr-seg{position:relative;display:flex;width:max-content;max-width:100%;margin:0 auto 4px;padding:0 3px;border-radius:999px;isolation:isolate}
 .hfr-seg::before{content:"";position:absolute;inset:4px 0;z-index:-1;border-radius:999px;background:rgb(255 255 255/.06)}
 .hfr-seg[hidden],.hfr-huecos[hidden],.hfr-elegidas[hidden],.hfr-orden[hidden],.hfr-vacio[hidden]{display:none}
 .hfr-seg button{position:relative;height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#a3a3a3;font:500 13px/16px var(--font);cursor:pointer;isolation:isolate}
 .hfr-seg button[aria-pressed="true"]{color:#111}
 .hfr-seg button[aria-pressed="true"]::before{content:"";position:absolute;inset:7px 0;z-index:-1;border-radius:999px;background:#fff}
 .hfr-huecos{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 10px}
 .hfr-huecos:has(.hfr-hueco__x){margin-top:22px}
 .hfr-hueco{position:relative;flex:0 1 88px;min-width:0;max-width:88px;aspect-ratio:1}
 .hfr-hueco__btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;width:100%;height:100%;padding:12px 6px 0;box-sizing:border-box;border:1.5px dashed rgb(255 255 255/.2);border-radius:20px;overflow:hidden;background:#232324;color:#a3a3a3;cursor:pointer}
 .hfr-hueco__btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 .hfr-hueco__mas{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgb(255 255 255/.08);color:#fff}
 .hfr-hueco__mas .ic{width:18px;height:18px}
 /* 9-oct-2026: vacío, el texto va bajo el «+» (nunca encima), igual en los dos
    huecos; lleno, sobre la imagen con degradado. */
 .hfr-hueco__txt{position:static;max-width:100%;color:#d4d4d4;font:500 11px/12px var(--font);text-align:center;overflow-wrap:anywhere}
 .hfr-hueco.is-lleno .hfr-hueco__btn{border:0}
 .hfr-hueco.is-lleno .hfr-hueco__txt{position:absolute;left:0;right:0;bottom:0;padding:14px 4px 5px;background:linear-gradient(transparent,rgb(0 0 0/.7));color:#fff}
 .hfr-hueco.is-activo .hfr-hueco__btn{border:2px solid var(--hf-lima)}
 .hfr-hueco__btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
 .hfr-hueco.is-conflicto .hfr-hueco__btn::after{box-shadow:inset 0 0 0 2px #ff5a52}
 /* 9-oct-2026: 44×44 de toque hacia fuera (solo pisa la esquina redondeada de
    la imagen, 8×8) y el círculo de 22 centrado en la esquina; el círculo no
    recibe toques: lo que cae sobre la imagen es de la imagen. */
 .hfr-hueco__x,.hfr-mini__x{position:absolute;top:-36px;right:-36px;z-index:1;width:44px;height:44px;padding:0;border:0;background:transparent;color:#fff;cursor:pointer}
 .hfr-hueco__x{top:-30px;right:-30px}
 .hfr-hueco__x i,.hfr-mini__x i{position:absolute;left:-3px;bottom:-3px;display:grid;place-items:center;width:22px;height:22px;box-sizing:border-box;border:1px solid rgb(255 255 255/.16);border-radius:50%;background:rgb(18 18 18/.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}
 .hfr-hueco__x i{left:3px;bottom:3px}
 .hfr-hueco__x .ic,.hfr-mini__x .ic{width:10px;height:10px}
 .hfr-intercambiar,.hfr-pasar{flex:none;display:grid;place-items:center;height:44px;padding:0;border:0;border-radius:999px;background:rgb(255 255 255/.08);color:#fff;cursor:pointer}
 .hfr-intercambiar{position:relative;width:44px;background:transparent}
 .hfr-intercambiar::before{content:"";position:absolute;inset:4px;border-radius:50%;background:rgb(255 255 255/.08)}
 .hfr-intercambiar .ic{position:relative}
 .hfr-intercambiar .ic{width:18px;height:18px}
 .hfr-intercambiar:disabled{opacity:.35;cursor:default}
 .hfr-pasar{max-width:96px;height:auto;min-height:44px;padding:6px 10px;font:500 12px/15px var(--font);text-align:center}
 /* Elegidas: 56×56, radio 16, número y X (círculo de 20, toque de 44) sin tapar la imagen. */
 .hfr-elegidas{display:flex;gap:20px;margin:0 -16px 10px;padding:36px 16px 6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
 .hfr-elegidas::-webkit-scrollbar{display:none}
 .hfr-mini{position:relative;flex:none;width:56px;height:56px;transition:transform .15s}
 .hfr-mini__ver{position:relative;display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:16px;overflow:hidden;background:#262626;color:#fff;cursor:pointer;-webkit-touch-callout:none}
 .hfr-mini__ver :is(img,video){display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
 .hfr-mini__num{position:absolute;top:4px;left:4px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:999px;background:rgb(0 0 0/.62);color:#fff;font:600 11px/18px var(--font);text-align:center;pointer-events:none}
 .hfr-mini__rol{position:absolute;left:4px;right:4px;bottom:4px;padding:1px 0;border-radius:6px;background:rgb(0 0 0/.62);color:#fff;font:600 10px/13px var(--font);text-align:center;pointer-events:none}
 .hfr-mini__play{position:absolute;right:4px;bottom:4px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgb(0 0 0/.55);pointer-events:none}
 .hfr-mini__play .ic{width:9px;height:9px;margin-left:1px}
 .hfr-mini__audio{display:grid;place-items:center;color:#a3a3a3}
 .hfr-mini__audio .ic{width:20px;height:20px}
 .hfr-mini__ver::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
 .hfr-mini.is-conflicto .hfr-mini__ver::after{box-shadow:inset 0 0 0 2px #ff5a52}
 .hfr-mini.is-orden .hfr-mini__ver::after{box-shadow:inset 0 0 0 2px var(--hf-lima)}
 .hfr-mini.is-levantada{z-index:2;transition:none;opacity:.92}
 .hfr-mini.is-levantada .hfr-mini__ver{box-shadow:0 8px 20px rgb(0 0 0/.5)}
 .hfr-mini.is-levantada .hfr-mini__ver::after{box-shadow:inset 0 0 0 2px #fff}
 .hfr-mini.is-destino .hfr-mini__ver::after{box-shadow:inset 0 0 0 2px var(--hf-lima)}
 .hfr-anillo{position:absolute;top:8px;left:8px;width:40px;height:40px;transform:rotate(-90deg)}
 .hfr-anillo circle{fill:none;stroke-width:3}
 .hfr-anillo__pista{stroke:rgb(255 255 255/.15)}
 .hfr-anillo__avance{stroke:var(--hf-lima);stroke-linecap:round}
 .hfr-mini__pct{position:relative;font:600 11px/14px var(--font);color:#fff}
 /* ← Antes · Después → · Ver · Listo bajo la fila (estudio-referencias-orden.js). */
 .hfr-orden{margin:-2px 0 12px}
 .hfr-orden .ref-orden-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:#a3a3a3;font:500 12px/16px var(--font)}
 .hfr-orden .ref-orden-acciones span{flex:0 0 100%}
 .hfr-orden .ref-orden-acciones button{min-height:44px;padding:0 14px;border:0;border-radius:999px;background:rgb(255 255 255/.08);color:#fff;font:500 13px/16px var(--font);cursor:pointer}
 .hfr-orden .ref-orden-acciones button:disabled{opacity:.35;cursor:default}
 .hfr-orden .ref-orden-acciones [data-ref-orden-listo]{margin-left:auto;background:#fff;color:#111}
 /* Chips de origen (desplazables). */
 /* Fijos arriba al bajar por la rejilla, para cambiar de origen sin volver. */
 .hfr-chips{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:0 4px;margin:0 -16px;padding:0 16px 4px;background:#1b1b1c;overflow:visible}
 .hfr-chips::-webkit-scrollbar{display:none}
 .hfr-chip{position:relative;flex:none;height:44px;padding:0 13px;border:0;border-radius:999px;background:transparent;color:#8a8a8a;font:500 14px/44px var(--font);white-space:nowrap;cursor:pointer;isolation:isolate}
 .hfr-chip::before{content:"";position:absolute;inset:6px 0;z-index:-1;border-radius:999px}
 .hfr-chip[aria-selected="true"]{color:var(--hf-lima)}
 .hfr-chip[aria-selected="true"]::before{background:rgb(209 254 23/.14)}
 /* Rejilla: «Subir» primero y las fichas de la Bóveda. */
 .hfr-rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .hfr-celda{position:relative;min-width:0;aspect-ratio:1;border-radius:20px;overflow:hidden;background:#262626}
 .hfr-celda::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(255 255 255/.05);pointer-events:none}
 .hfr-celda.is-elegida::after{box-shadow:inset 0 0 0 2px #fff}
 .hfr-ficha{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:transparent;color:#fff;cursor:pointer}
 .hfr-ficha :is(img,video){display:block;width:100%;height:100%;object-fit:cover}
 .hfr-celda.is-no .hfr-ficha :is(img,video,.hfr-ficha__audio){opacity:.35;filter:grayscale(.6)}
 .hfr-celda.is-no .hfr-ficha{cursor:not-allowed}
 .hfr-ficha__play{position:absolute;left:6px;bottom:6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgb(0 0 0/.5);pointer-events:none}
 .hfr-ficha__play .ic{width:11px;height:11px;margin-left:1px}
 .hfr-ficha__dur{position:absolute;right:6px;bottom:6px;padding:2px 6px;border-radius:8px;background:rgb(0 0 0/.55);color:#fff;font:500 12px/16px var(--font);pointer-events:none}
 .hfr-ficha__dur:empty{display:none}
 .hfr-celda.is-no :is(.hfr-ficha__play,.hfr-ficha__dur){display:none}
 .hfr-ficha__audio{display:grid;place-items:center;align-content:center;gap:6px;width:100%;height:100%;padding:8px;box-sizing:border-box;color:#a3a3a3;font:500 11px/14px var(--font);text-align:center}
 .hfr-ficha__audio .ic{width:22px;height:22px}
 .hfr-ficha__audio span{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
 .hfr-ficha__motivo{position:absolute;left:4px;right:4px;bottom:4px;display:-webkit-box;padding:3px 5px;border-radius:8px;background:rgb(0 0 0/.72);color:#fff;font:600 11px/14px var(--font);text-align:center;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;pointer-events:none}
 .hfr-ficha__motivo[hidden]{display:none}
 .hfr-ficha__casilla{position:absolute;top:2px;right:2px;display:grid;place-items:center;width:32px;height:32px;cursor:pointer}
 .hfr-ficha__casilla::before{content:"";position:absolute;width:20px;height:20px;box-sizing:border-box;border:1.5px solid rgb(255 255 255/.9);border-radius:6px;background:rgb(0 0 0/.18)}
 .hfr-celda.is-elegida .hfr-ficha__casilla::before{border-color:#fff;background:#fff}
 .hfr-celda.is-no .hfr-ficha__casilla{opacity:.35;cursor:not-allowed}
 .hfr-ficha__num{position:relative;color:#111;font:700 12px/20px var(--font)}
 .hfr-subir{display:grid;place-items:center;align-content:center;gap:10px;width:100%;padding:0;border:0;background:#262626;color:#fff;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
 .hfr-subir__ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgb(255 255 255/.1)}
 .hfr-subir__ic .ic{width:20px;height:20px}
 .hfr-subir__txt{font:500 14px/18px var(--font)}
 .hfr-subir:focus-visible{outline:2px solid #fff;outline-offset:-3px}
 .hfr-vacio{margin:20px 8px 8px;color:#8a8a8a;font:400 14px/20px var(--font);text-align:center}
 .hfr-reintentar{display:inline-flex;align-items:center;min-height:44px;margin:6px 0 0 4px;padding:0 16px;border:1px solid rgb(209 254 23/.4);border-radius:999px;background:transparent;color:var(--hf-lima);font:500 14px/18px var(--font);cursor:pointer}
 .hfr-centinela{height:1px}
 /* Mis referencias: kits con sus miniaturas; el diálogo del kit se abre encima. */
 .hfr-rejilla--kits{display:block}
 .hfr-kits{display:grid;gap:8px}
 .hfr-kits__nota{margin:8px 4px;color:#8a8a8a;font:400 14px/20px var(--font)}
 .hfr-kits__nota.is-error{color:#ff8a80}
 .hfr-kits__reintentar{justify-self:start;margin:-4px 0 4px 4px}
 .hfr-kit{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:8px;border:0;border-radius:20px;background:#232324;color:#fff;text-align:left;font:inherit;cursor:pointer}
 .hfr-kit__minis{flex:none;display:grid;grid-template-columns:repeat(2,1fr);gap:2px;width:56px;height:56px;overflow:hidden;border-radius:14px;background:#2c2c2d}
 .hfr-kit__minis :is(img,video){display:block;width:100%;height:100%;min-height:0;object-fit:cover}
 .hfr-kit__minis i{display:grid;place-items:center;grid-column:1/-1;grid-row:1/-1;color:#a3a3a3}
 .hfr-kit__minis i .ic{width:22px;height:22px}
 .hfr-kit__txt{display:grid;gap:4px;min-width:0}
 .hfr-kit__txt b{overflow:hidden;font:500 14px/18px var(--font);white-space:nowrap;text-overflow:ellipsis}
 .hfr-kit__txt small{color:#8a8a8a;font:400 13px/16px var(--font)}
 /* Pie fijo: «Aplicar», gris y desactivado sin cambios; lima con cambios. */
 .hfr .hf-hoja__pie{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid rgb(255 255 255/.06)}
 .hfr .hf-aplicar{height:44px;font:500 15px/18px var(--font)}
 .hfr .hf-aplicar:disabled{background:rgb(41,43,44);color:#7b7d7e;cursor:default}
 :is(.hfr-ficha,.hfr-mini__ver,.hfr-hueco__btn,.hfr-pasar,.hfr-kit,.hfr-accion,.hfr-orden button,.hfr-reintentar):focus-visible{outline:2px solid #fff;outline-offset:2px}
 :is(.hfr-chip,.hfr-seg button,.hfr-intercambiar,.hfr-cerrar):focus-visible{outline:none}
 :is(.hfr-chip,.hfr-seg button,.hfr-intercambiar,.hfr-cerrar):focus-visible::before{outline:2px solid #fff;outline-offset:2px}
 :is(.hfr-mini__x,.hfr-hueco__x):focus-visible{outline:none}
 :is(.hfr-mini__x,.hfr-hueco__x):focus-visible i{outline:2px solid #fff;outline-offset:2px}
 .hfr-ficha:focus-visible{outline-offset:-3px}
 /* Mientras llega la primera página: fichas de esqueleto (9-oct-2026). */
 .hfr-esqueleto{background:linear-gradient(100deg,#262626 30%,#323233 50%,#262626 70%);background-size:220% 100%;animation:hfr-brillo 1.3s linear infinite}
 @keyframes hfr-brillo{from{background-position:120% 0}to{background-position:-100% 0}}
 /* «+» del cuadro: 44×44 de toque con el círculo de 36 de siempre. */
 html body.studio-workbench.hf-crear:not(#hf):not(#hf) #mesa .hf-fila-cuadro [data-hf-refs]{width:44px;height:44px;margin:-4px;background:radial-gradient(circle,rgba(255,255,255,.05) 17.5px,transparent 18px)}
 /* Avisos de error de referencias bajo el cuadro: en rojo, como en la hoja. */
 html body.studio-workbench.hf-crear:not(#hf):not(#hf) #genstatus:is([data-aviso-refs="rechazo"],[data-aviso-refs="validacion"]){border-color:rgb(255 90 82/.35)!important;background:rgb(255 90 82/.1)!important;color:#ffc9c4!important}
 /* «Guardar o gestionar kits» desde la hoja: el diálogo de kits como hoja
    inferior del mismo estilo (esquinas de 32, lima, botones redondos). */
 html body.hf-movil:not(#hf):not(#hf) #cocuyoKits.ckit-dialog{position:fixed;inset:auto 0 0 0;width:100%;max-width:none;max-height:85dvh;margin:0;padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));box-sizing:border-box;border:0;border-radius:32px 32px 0 0;background:#1b1b1c;color:#f7f7f8;font:400 14px/20px var(--font)}
 html body.hf-movil:not(#hf):not(#hf) #cocuyoKits.ckit-dialog::backdrop{background:rgb(0 0 0/.6);-webkit-backdrop-filter:none;backdrop-filter:none}
 html body.hf-movil:not(#hf):not(#hf) #cocuyoKits>header{position:relative;justify-content:center;height:52px;padding:0;border:0}
 html body.hf-movil:not(#hf):not(#hf) #cocuyoKits>header::before{content:"";position:absolute;top:8px;left:50%;width:28px;height:4px;margin-left:-14px;border-radius:999px;background:rgb(255 255 255/.2)}
 html body.hf-movil:not(#hf):not(#hf) #cocuyoKits h2{margin-top:8px;font:600 16px/24px var(--font);letter-spacing:0}
 html body.hf-movil:not(#hf):not(#hf) #cocuyoKits>header button{position:absolute;right:-6px;top:8px;width:44px;height:44px;min-width:0;padding:0;border:0;border-radius:50%;background:radial-gradient(circle,rgb(255 255 255/.06) 15.5px,transparent 16px);font-size:20px;line-height:44px}
 html body.hf-movil:not(#hf):not(#hf) #cocuyoKits button{border-color:transparent;border-radius:999px;background:#232324}
 html body.hf-movil:not(#hf):not(#hf) #cocuyoKits .ckit-list>button{border-radius:20px;padding:12px}
 html body.hf-movil:not(#hf):not(#hf) #cocuyoKits .ckit-primary{width:100%;min-height:44px;border-radius:999px;background:var(--hf-lima,#d1fe17);color:#1a1a1a;font:500 15px/18px var(--font)}
 html body.hf-movil:not(#hf):not(#hf) #cocuyoKits :is(input:not([type=radio]),select){border-radius:14px;border-color:rgb(255 255 255/.08);background:#232324}
 html body.hf-movil:not(#hf):not(#hf) #cocuyoKits fieldset{border-color:rgb(255 255 255/.08);border-radius:16px}
 html body.hf-movil:not(#hf):not(#hf) #cocuyoKits :is(.ckit-content>p,.ckit-dialog form>p,.ckit-list>button span,.ckit-pista){color:#a3a3a3}
 html body.hf-movil:not(#hf):not(#hf) #cocuyoKits input[type=radio]{accent-color:var(--hf-lima,#d1fe17)}
 html body.hf-movil:not(#hf):not(#hf) #cocuyoKits :is(button,input,select):focus-visible{outline-color:#fff}
 @media(prefers-reduced-motion:reduce){.hf-hoja.hfr,.hfr-mini{transition:none}.hfr-esqueleto{animation:none}}
 /* «Ayuda con el prompt» (#studioComposerActions) llega con DOMContentLoaded
    (estudio-compositor-acciones.js), segundos después del cuadro con la red
    lenta: su sitio (2 + 32 px) queda reservado desde el primer fotograma para
    que el cuadro no crezca entonces ni se muevan el título, Conectores y el
    resto (10-oct-2026, «se ven como 2»). Solo mientras se lee la página
    (html[data-hf-carga], que estudio-ruta.js quita en DOMContentLoaded en el
    mismo reparto en que llega la fila): si ese script no llega, el cuadro no
    se queda con un hueco de 34 px. Sin :has() ni JS, como antes. */
 html[data-hf-carga] body.studio-workbench.hf-crear:not(#hf):not(#hf) #mesa .composer:not(:has(#studioComposerActions)) .hf-fila-cuadro{margin-top:34px}
}

/* Esqueleto del Estudio móvil (html[data-hf-pronto]): en el CSS crítico del <head> de crear.html
   (velocidad, auditoría v340: se pinta antes de que lleguen las hojas del final de <body>). */

/* ============ Explorar del Estudio móvil (Higgsfield «Explore», 8-oct-2026) ============
   Módulo: assets/js/estudio-movil-explorar.js, registrado como pantalla 'explorar'
   (estudio-movil-pantallas.js): body[data-hf-pantalla="explorar"] y body.hf-en-explorar.
   Medidas de su web móvil: píldoras de 33 px, tarjetas 16:9 con esquinas de 16 px,
   filas con miniatura de 77 × 58, insignias en Space Grotesk y Buscar flotando abajo. */
.hf-titulo,.hf-explorar{display:none}
@media(max-width:900px){
 html body.studio-workbench.hf-movil.hf-en-explorar{overflow:hidden}
 .hf-movil .hf-explorar:not([hidden]){display:block;position:fixed;inset:var(--st-top) 0 0 0;z-index:60;overflow-y:auto;overscroll-behavior:contain;background:#0b0b0b;color:#fff;font-family:var(--font);padding-bottom:96px;-webkit-overflow-scrolling:touch}
 .hf-explorar .ic{width:16px;height:16px}
 /* Píldoras fijas arriba al desplazarse. */
 .hfx-chips{position:sticky;top:0;z-index:3;display:flex;gap:8px;overflow-x:auto;padding:6px 12px 10px;background:#0b0b0b;scrollbar-width:none}
 .hfx-chips::-webkit-scrollbar{display:none}
 .hfx-chip{flex:none;height:33px;padding:0 14px;border:0;border-radius:17px;background:rgb(255 255 255/.05);color:#fff;font:500 12px/15px var(--font);cursor:pointer}
 .hfx-chip.is-on{background:#fff;color:#131517}
 /* Carrusel. */
 .hfx-carrusel{margin:6px 0 0}
 .hfx-carrusel__pista{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 12px;scroll-padding-inline:12px;scrollbar-width:none}
 .hfx-carrusel__pista::-webkit-scrollbar{display:none}
 .hfx-tarjeta{position:relative;flex:0 0 100%;aspect-ratio:16/9;scroll-snap-align:start;overflow:hidden;border:0;border-radius:16px;padding:0;background:#161616;color:#fff;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px rgb(255 255 255/.06)}
 .hfx-tarjeta video,.hfx-pieza video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 .hfx-tarjeta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgb(0 0 0/.72) 100%);pointer-events:none}
 .hfx-tarjeta__txt{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:grid;gap:4px}
 .hfx-tarjeta__txt b{font:800 21px/1.05 var(--font);letter-spacing:-.01em;text-transform:uppercase}
 .hfx-tarjeta__txt small{font:400 12px/18px var(--font);color:rgb(255 255 255/.8)}
 .hfx-tarjeta--promo::after{background:linear-gradient(90deg,rgb(0 0 0/.82) 0%,rgb(0 0 0/.55) 55%,rgb(0 0 0/.2) 100%)}
 .hfx-tarjeta--promo .hfx-tarjeta__txt{top:14px;bottom:auto;gap:8px}
 .hfx-promo__t{margin:0;font:800 20px/1.05 var(--font);text-transform:uppercase}
 .hfx-promo__t em{font-style:normal;color:var(--hf-lima)}
 .hfx-tarjeta--promo ul{list-style:none;margin:0;padding:0;display:grid;gap:3px;font:400 12px/17px var(--font);color:rgb(255 255 255/.86)}
 .hfx-tarjeta--promo li{display:flex;align-items:center;gap:6px}
 .hfx-tarjeta--promo li .ic{width:13px;height:13px}
 .hfx-lima{justify-self:start;height:36px;padding:0 22px 2px;margin-top:4px;border:0;border-radius:10px;background-color:var(--hf-lima);background-image:linear-gradient(180deg,rgb(255 255 20/0),var(--hf-brillo));color:#131517;font:600 13px/1 var(--font);box-shadow:inset 0 -3px 0 var(--hf-labio),0 6px 4px rgb(0 0 0/.25),0 32px 24px rgb(0 0 0/.15);cursor:pointer}
 .hfx-puntos{display:flex;justify-content:center;gap:6px;margin:12px 0 4px}
 .hfx-puntos i{width:5px;height:5px;border-radius:50%;background:rgb(255 255 255/.25)}
 .hfx-puntos i.is-on{background:#fff}
 /* Cuatro accesos con el destello lima detrás. */
 .hfx-accesos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px 16px 6px}
 .hfx-acceso{display:grid;justify-items:center;gap:8px;padding:0;border:0;background:none;color:#fff;font:600 11px/14px var(--font);cursor:pointer}
 .hfx-acceso__img{position:relative;width:100%;aspect-ratio:1;border-radius:14px;background:var(--hf-lima)}
 .hfx-acceso__img img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:cover;border-radius:12px;transform:rotate(-7deg) scale(.86);box-shadow:0 4px 14px rgb(0 0 0/.45)}
 /* Secciones en filas. */
 .hfx-sec{padding:26px 0 0}
 .hfx-cabeza{padding:0 16px 10px}
 .hfx-cabeza h2{margin:0;font:600 18px/24px var(--font);color:#fff}
 .hfx-cabeza h2 button{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
 .hfx-cabeza h2 .ic{width:16px;height:16px;color:#828282}
 .hfx-cabeza p{margin:2px 0 0;font:400 12px/18px var(--font);color:#828282}
 .hfx-filas{list-style:none;margin:0;padding:0 16px;display:grid;gap:6px}
 .hfx-fila{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:5px 0;border:0;background:none;color:#fff;text-align:left;cursor:pointer}
 .hfx-fila__img{flex:none;display:grid;place-items:center;width:77px;height:58px;overflow:hidden;border-radius:8px;background:#1c1c1c;color:var(--hf-lima)}
 .hfx-fila__img img{width:100%;height:100%;object-fit:cover}
 .hfx-fila__img img[src*="/utiles/iconos/"]{object-fit:contain;background:#0b0b0b}
 .hfx-fila__img .ic{width:22px;height:22px}
 .hfx-fila__txt{flex:1;min-width:0;display:grid;gap:3px}
 .hfx-fila__nom{display:flex;align-items:center;gap:8px;min-width:0}
 .hfx-fila__nom b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 14px/20px var(--font);letter-spacing:.1px}
 .hfx-fila__txt small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 12px/18px var(--font);color:rgb(255 255 255/.5)}
 .hfx-fila>.ic{flex:none;width:16px;height:16px;color:#5c5c5c}
 .hfx-ins{flex:none;padding:0 6px;border-radius:4px;font:italic 700 12px/18px "Space Grotesk",var(--font);text-transform:uppercase;background:var(--hf-lima);color:#131517}
 .hfx-ins[data-tipo="top"]{background:#7b3cf6;color:#fff}
 .hfx-ins[data-tipo="base"]{background:#2f6bff;color:#fff}
 .hfx-ins[data-tipo="gratis"]{background:#177a41;color:#fff}
 .hfx-ins[data-tipo="app"]{background:rgb(255 255 255/.12);color:#fff}
 .hfx-ins[data-tipo="new"]{background:var(--precio-azul);color:#fff}
 .hfx-ins[data-tipo="eco"]{background:var(--precio-lima);color:#131517}
 /* Conectores (su bloque de MCP): rejilla en perspectiva. */
 .hfx-conectores{position:relative;overflow:hidden;margin:26px 12px 0;padding:22px 18px 20px;border-radius:16px;background:radial-gradient(120% 90% at 50% 0%,#1d2412 0%,#0f0f0f 60%);box-shadow:inset 0 0 0 1px rgb(255 255 255/.06);text-align:center}
 .hfx-conectores__rejilla{position:absolute;inset:auto -40% -30% -40%;height:70%;background-image:linear-gradient(rgb(209 254 23/.14) 1px,transparent 1px),linear-gradient(90deg,rgb(209 254 23/.14) 1px,transparent 1px);background-size:28px 28px;transform:perspective(260px) rotateX(58deg);transform-origin:top;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
 .hfx-conectores>*{position:relative}
 .hfx-conectores__eyebrow{margin:0 0 6px;font:600 11px/14px var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--hf-lima)}
 .hfx-conectores h2{margin:0 0 8px;font:700 20px/1.15 var(--font);color:#fff}
 .hfx-conectores p{margin:0 auto;max-width:30ch;font:400 13px/19px var(--font);color:rgb(255 255 255/.7)}
 .hfx-conectores__botones{display:flex;justify-content:center;gap:8px;margin-top:16px}
 .hfx-blanco{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border:0;border-radius:12px;background:#fff;color:#131517;font:600 14px/1 var(--font);cursor:pointer}
 /* Mosaicos con vídeo: dos columnas, alturas alternas y un botón sobre el degradado. */
 .hfx-sec--mosaico{position:relative}
 .hfx-mosaico{columns:2;column-gap:8px;padding:0 16px}
 .hfx-pieza{position:relative;display:block;width:100%;margin:0 0 8px;padding:0;overflow:hidden;border:0;border-radius:12px;background:#161616;break-inside:avoid;aspect-ratio:3/4;cursor:pointer}
 .hfx-pieza:nth-child(4n+2),.hfx-pieza:nth-child(4n+3){aspect-ratio:4/5}
 .hfx-pieza__et{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:3px 8px;border-radius:8px;background:rgb(0 0 0/.55);color:#fff;font:500 11px/16px var(--font);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
 .hfx-mosaico__pie{position:relative;margin-top:-110px;padding:70px 16px 0;display:flex;justify-content:center;background:linear-gradient(180deg,transparent,#0b0b0b 62%)}
 .hfx-lima-suave{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border:0;border-radius:12px;background:color-mix(in srgb,var(--hf-lima) 24%,#121212);color:var(--hf-lima);font:600 14px/1 var(--font);cursor:pointer}
 .hfx-lima-suave .ic{width:14px;height:14px}
 /* Sin la burbuja de ayuda en Explorar: con sesión tapaba el final de «Buscar» y su ✕, y el toque
    abría la ayuda (auditoría v338). La ayuda sigue en Comunidad y en la cuenta. */
 html body.studio-workbench.hf-movil:is(.hf-en-explorar,[data-hf-pantalla="explorar"]) #cocuyo-chat-raiz .cchat-btn{display:none!important}
 /* Buscar, flotando abajo. */
 .hfx-buscar{position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:61;display:flex;align-items:center;height:48px;margin:0;padding:0 8px 0 16px;border-radius:24px;background:rgb(30 30 30/.86);box-shadow:0 8px 24px rgb(0 0 0/.5),inset 0 0 0 1px rgb(255 255 255/.06);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
 .hfx-buscar label{flex:1;display:flex;align-items:center;gap:10px;color:#828282}
 .hfx-buscar .ic{width:18px;height:18px}
 .hfx-buscar input{flex:1;min-width:0;height:44px;border:0;background:none;color:#fff;font:400 16px/20px var(--font);outline:0}
 .hfx-buscar input::placeholder{color:#828282}
 .hfx-buscar input::-webkit-search-cancel-button{display:none}
 .hfx-buscar__x{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:rgb(255 255 255/.08);color:#fff}
 .hfx-resultados{padding:8px 0 0}
 .hfx-vacio{padding:24px 16px;color:#828282;font:400 14px/20px var(--font);text-align:center}
 .hf-explorar :is(button):focus-visible{outline:2px solid var(--hf-lima);outline-offset:2px}
 .hfx-buscar:focus-within{box-shadow:0 8px 24px rgb(0 0 0/.5),inset 0 0 0 1px rgb(209 254 23/.45)}
 .hf-explorar [hidden]{display:none!important}
 .hf-explorar .hfx-buscar input:is(:focus,:focus-visible){outline:0!important;box-shadow:none!important;border:0!important}
}

/* ============ Pantallas del Estudio móvil (común, 8-oct-2026) ============
   Registro: assets/js/estudio-movil-pantallas.js (window.CocuyoHfPantallas).
   Cada pantalla es un div.hf-pantalla (Explorar conserva .hf-explorar), fijo
   bajo la cabecera ☰ · título · Mejorar y con scroll propio. Estado en
   body[data-hf-pantalla=<id>]: un atributo, nunca una clase de pantalla en
   el body. Medidas y colores de la app de Higgsfield (capturas/hf-ref):
   lienzo de cada pantalla, botones 3D con brillo y labio, héroe en
   MAYÚSCULAS (Geist 800 con letra apretada: Space Grotesk no está cargada),
   pestañas, buscador en línea, carril de tarjetas, sellos inclinados, hoja
   alta y avisos. Solo en el teléfono: el escritorio no cambia. */
.hf-pantalla,.hfx-aviso{display:none}
@media(max-width:900px){
 /* Lienzo de cada pantalla, también en la cabecera (el resto, #0b0b0b). */
 html body.studio-workbench.hf-movil[data-hf-pantalla="conectores"]{--hf-lienzo:#080809}
 html body.studio-workbench.hf-movil[data-hf-pantalla="apps"]{--hf-lienzo:#131517}
 html body.studio-workbench.hf-movil[data-hf-pantalla="comunidad"]{--hf-lienzo:#020202}
 html body.studio-workbench.hf-movil[data-hf-pantalla]{overflow:hidden}
 /* Arranque directo (?conectores=…, html[data-hf-arranque]): en el CSS crítico del <head> de crear.html. */
 html body.studio-workbench.hf-movil[data-hf-pantalla]:not(#hf) .sm-header{background:var(--hf-lienzo)!important}
 /* Título (texto 16/20) o logo (favicon de 22 + «Cocuyo» 18 w600), centrado.
    También en Creaciones con cuenta (la biblioteca, body.hf-en-creaciones).
    La cabecera pasa a una rejilla «1fr auto 1fr» (☰ · título · Mejorar): el
    título va en la columna del centro y nunca pisa ☰ ni Mejorar. Si cabe,
    queda centrado en la pantalla (las columnas de los lados miden lo mismo);
    si Mejorar es largo (it «Passa a un piano superiore», 196 px), se aparta
    hacia ☰ y se corta con «…». En rtl, la rejilla se invierte sola. */
 html body.studio-workbench.hf-movil:is([data-hf-pantalla],.hf-en-creaciones):not(#hf) .sm-header{display:grid!important;grid-template-columns:1fr auto 1fr;justify-content:normal}
 html body.studio-workbench.hf-movil:is([data-hf-pantalla],.hf-en-creaciones):not(#hf) .sm-header>.hf-menu{grid-area:1/1;justify-self:start}
 html body.studio-workbench.hf-movil:is([data-hf-pantalla],.hf-en-creaciones):not(#hf) .sm-header>.hf-mejorar{grid-area:1/3;justify-self:end}
 html body.studio-workbench.hf-movil:is([data-hf-pantalla],.hf-en-creaciones):not(#hf) .sm-header>.hf-titulo{display:flex!important;grid-area:1/2;align-items:center;gap:8px;min-width:0;color:#fff;font:500 16px/20px var(--font);white-space:nowrap;pointer-events:none}
 .hf-titulo__logo{display:none;flex:none;font:750 18px/22px var(--font);letter-spacing:-.05em;text-transform:uppercase;color:#fff}
 .hf-titulo__logo .o-viva,.hf-cajon__marca .o-viva{color:var(--lima);font-style:normal}
 .hf-titulo__txt{overflow:hidden;text-overflow:ellipsis}
 .hf-titulo[data-forma="logo"] .hf-titulo__logo{display:block}
 .hf-titulo[data-forma="logo"] .hf-titulo__txt{font:600 18px/22px var(--font);letter-spacing:-.01em}
 /* Conectores y Apps: la marca COCUYO escrita, sin icono (el logo está por
    rediseñar). Alto fijo de 22: nada se sale de la cabecera. */
 .hf-titulo[data-forma="logo"]{flex-wrap:wrap;justify-content:center;height:22px;overflow:hidden}
 .hf-titulo[data-forma="logo"] .hf-titulo__txt{flex:none}
 /* La pantalla: fija bajo la cabecera, con scroll propio (z 60; su barra fija, 61). */
 .hf-movil .hf-pantalla:not([hidden]){display:block;position:fixed;inset:var(--st-top) 0 0 0;z-index:60;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--hf-lienzo);color:#fff;font-family:var(--font);padding-bottom:calc(32px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch}
 .hf-movil .hf-pantalla.hf-pantalla--con-pie:not([hidden]){padding-bottom:calc(160px + env(safe-area-inset-bottom,0px))}
 .hf-pantalla [hidden]{display:none!important}
 .hf-pantalla .ic{width:16px;height:16px}
 .hf-pantalla :is(button,a,[tabindex]):focus-visible{outline:2px solid var(--hf-lima);outline-offset:2px}

 /* ---- Botones ---- */
 /* Lima 3D («Get Pro Annual»): 48 de alto, radio 10, brillo #FFFF14 abajo y labio #829B19. */
 .hfx-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:48px;padding:8px 12px 10px;border:0;border-radius:10px;background-color:var(--hf-lima);background-image:linear-gradient(180deg,rgb(255 255 20/0),var(--hf-brillo));color:#131517;font:600 14px/16px var(--font);text-decoration:none;box-shadow:inset 0 -3px 0 var(--hf-labio),0 6px 4px rgb(0 0 0/.25),0 32px 24px rgb(0 0 0/.15);cursor:pointer;transition:filter .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}
 .hfx-cta .ic{width:20px;height:20px}
 /* Blanca («Connect to Claude»): píldora de 48, 16/18 w600 y el mismo labio, en negro. */
 .hfx-cta--blanco{padding:8px 16px 10px;border-radius:999px;background-color:#fff;background-image:none;color:#1a1a1a;font:600 16px/18px var(--font);box-shadow:inset 0 -3px 0 rgb(0 0 0/.32),0 6px 4px rgb(0 0 0/.25),0 32px 24px rgb(0 0 0/.15)}
 /* Oscura («✦ Generate» de los vacíos): 40 de alto y sin relieve. */
 .hfx-cta--oscuro{min-height:40px;padding:0 12px;border-radius:10px;background-color:#23262a;background-image:none;color:#fff;font:600 14px/20px var(--font);box-shadow:none}
 .hfx-cta--ancho{display:flex;width:100%}
 @media(hover:hover){:is(.hfx-cta,.hfx-lima):hover{filter:brightness(1.1)}}
 :is(.hfx-cta,.hfx-lima):active{transform:scale(.98);filter:brightness(.95)}
 :is(.hfx-cta,.hfx-lima):disabled{opacity:.5;cursor:default;transform:none;filter:none}
 /* Barra fija abajo (152 de alto) con degradado al lienzo; la pantalla lleva .hf-pantalla--con-pie. */
 .hfx-pie-fijo{position:fixed;left:0;right:0;bottom:0;z-index:61;display:grid;gap:8px;box-sizing:border-box;padding:32px 16px calc(16px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,transparent,var(--hf-lienzo) 26%)}

 /* ---- Héroe y cabeceras ----
    Peso extra (:not(#hf)) frente a body.studio-workbench:not(#f) :is(h1,h2,h3), que fija peso y letra. */
 .hfx-heroe{padding:24px 16px 0}
 .hfx-heroe--centro{padding:32px 16px 0;text-align:center}
 html body.hf-movil:not(#hf):not(#hf) .hfx-h1{margin:0;color:#fff;font:800 40px/40px var(--font);letter-spacing:-.02em;text-transform:uppercase;overflow-wrap:anywhere}
 .hfx-h1 em{font-style:normal;color:var(--hf-lima)}
 html body.hf-movil:not(#hf):not(#hf) .hfx-heroe--centro .hfx-h1{font-size:27px;line-height:36px;letter-spacing:-.8px}
 .hfx-heroe__sub{margin:12px 0 0;color:var(--hf-gris);font:400 14px/20px var(--font)}
 .hfx-cabeza--grande{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 16px 16px}
 .hfx-cabeza__txt{min-width:0}
 html body.hf-movil:not(#hf):not(#hf) .hfx-cabeza--grande h2{margin:0;color:#fff;font:800 28px/36px var(--font);letter-spacing:.02em;text-transform:uppercase;overflow-wrap:anywhere}
 .hfx-cabeza--grande p{margin:2px 0 0;color:rgb(255 255 255/.6);font:400 14px/20px var(--font)}
 .hfx-ver-todo{flex:none;display:inline-flex;align-items:center;gap:4px;padding:10px 0 10px 10px;border:0;background:none;color:#fff;font:600 14px/20px var(--font);white-space:nowrap;cursor:pointer}
 .hfx-ver-todo .ic{width:12px;height:12px}
 /* En árabe y urdu, el › de las filas y de «Ver todo» apunta hacia delante (la izquierda). */
 html[dir="rtl"] :is(.hfx-fila,.hfx-ver-todo,.hfx-cabeza h2>button)>.ic{transform:scaleX(-1)}

 /* ---- Pestañas (barra de 44, radio 12, blanco 8 %; la activa #2E3031) ---- */
 .hfx-pestanas-caja{position:sticky;top:0;z-index:3;padding:8px 16px;background:var(--hf-lienzo)}
 .hfx-pestanas{display:flex;gap:4px;box-sizing:border-box;height:44px;padding:4px;overflow-x:auto;border-radius:12px;background:rgb(255 255 255/.08);scrollbar-width:none}
 .hfx-pestanas::-webkit-scrollbar{display:none}
 .hfx-pestanas-caja::after{content:"";position:absolute;top:8px;right:16px;bottom:8px;width:48px;border-radius:0 12px 12px 0;background:linear-gradient(270deg,color-mix(in srgb,#fff 8%,var(--hf-lienzo)),transparent);pointer-events:none;transition:opacity .2s}
 .hfx-pestanas-caja.is-final::after{opacity:0}
 /* En árabe y urdu la barra se desliza hacia la izquierda: el «hay más» va allí. */
 html[dir="rtl"] .hfx-pestanas-caja::after{right:auto;left:16px;border-radius:12px 0 0 12px;background:linear-gradient(90deg,color-mix(in srgb,#fff 8%,var(--hf-lienzo)),transparent)}
 .hfx-pestana{flex:none;height:36px;padding:0 16px;border:0;border-radius:10px;background:none;color:rgb(255 255 255/.6);font:500 14px/20px var(--font);white-space:nowrap;cursor:pointer}
 .hfx-pestana[aria-selected="true"]{background:#2e3031;color:#f7f7f8}
 .hfx-pestana:focus-visible{outline:2px solid var(--hf-lima);outline-offset:-2px}
 /* Pestañas subrayadas (dentro de las hojas): la activa blanca con raya de 2px.
    Las demás en el gris de texto (#898A8B, 5,4:1 sobre #131313): el #626262 de Higgsfield da 3:1 y no llega al 4,5:1 de WCAG AA. */
 .hfx-subrayado{display:flex;gap:20px;margin:0 -16px;padding:0 16px;overflow-x:auto;border-bottom:1px solid rgb(255 255 255/.08);scrollbar-width:none}
 .hfx-subrayado::-webkit-scrollbar{display:none}
 .hfx-subrayado>button{flex:none;position:relative;padding:10px 0 12px;border:0;background:none;color:var(--hf-gris,#898a8b);font:500 14px/18px var(--font);white-space:nowrap;cursor:pointer}
 .hfx-subrayado>button[aria-selected="true"]{color:#fff}
 .hfx-subrayado>button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:#fff}

 /* ---- Buscador en línea: 44 de alto, radio 12, blanco 4 % y letra de 16 (sin zoom en iOS) ---- */
 .hfx-buscar-linea{display:flex;align-items:center;gap:8px;box-sizing:border-box;height:44px;margin:32px 16px 20px;padding:0 6px 0 12px;border:1px solid transparent;border-radius:12px;background:rgb(255 255 255/.04);box-shadow:0 4px 12px rgb(0 0 0/.12)}
 .hfx-buscar-linea label{flex:1;display:flex;align-items:center;gap:10px;min-width:0;color:var(--hf-gris)}
 .hfx-buscar-linea .ic{width:20px;height:20px}
 .hfx-buscar-linea input{flex:1;min-width:0;height:40px;padding:0;border:0;background:none;color:#fff;font:400 16px/20px var(--font);outline:0}
 .hfx-buscar-linea input::placeholder{color:var(--hf-gris)}
 .hfx-buscar-linea input::-webkit-search-cancel-button{display:none}
 .hfx-buscar-linea input:is(:focus,:focus-visible){outline:0!important;box-shadow:none!important;border:0!important}
 .hfx-buscar-linea:focus-within{border-color:rgb(209 254 23/.45)}
 .hfx-buscar-linea__x{display:grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:rgb(255 255 255/.08);color:#fff;cursor:pointer}

 /* ---- Carril de tarjetas (Apps): 248 de ancho, radio 16, gap 16; la siguiente asoma ---- */
 .hfx-carril{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;padding:0 16px 4px;scrollbar-width:none}
 .hfx-carril::-webkit-scrollbar{display:none}
 .hfx-app{flex:0 0 248px;display:grid;align-content:start;gap:12px;box-sizing:border-box;padding:16px;border:1px solid rgb(255 255 255/.04);border-radius:16px;background:#131517;color:#fff;font:inherit;text-align:left;scroll-snap-align:start;box-shadow:inset 2px 2px 2px rgb(255 255 255/.02);cursor:pointer}
 .hfx-app__medio{position:relative;display:block;aspect-ratio:214/207;overflow:hidden;border-radius:12px;background:var(--hf-tarjeta)}
 .hfx-app__medio :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 .hfx-app__nom{display:block;overflow:hidden;font:600 16px/24px var(--font);white-space:nowrap;text-overflow:ellipsis}
 .hfx-app__txt{display:-webkit-box;overflow:hidden;color:rgb(255 255 255/.6);font:400 14px/20px var(--font);-webkit-line-clamp:2;-webkit-box-orient:vertical}
 /* Sellos inclinados: BETA, GRATIS, PRONTO y OFF (sin NUEVO desde el 10-oct-2026). Texto de
    12/800, que no cuenta como grande: todos con 4,5:1 o más (WCAG AA).
    GRATIS 5,4:1 (el #1f8f4e de antes daba 4,1) y NO DISPONIBLE 6,4:1 (el
    gris #898A8B daba 3,2). Lo mismo en la insignia GRATIS de las filas. */
 .hfx-sello{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:4px;background:var(--hf-lima);color:#000;font:800 12px/18px var(--font);text-transform:uppercase;white-space:nowrap;transform:skewX(-10deg)}
 .hfx-app__medio .hfx-sello{position:absolute;left:8px;bottom:8px;z-index:1}
 .hfx-sello[data-tipo="beta"]{background:#9d4edd;color:#fff}
 .hfx-sello[data-tipo="gratis"]{background:#177a41;color:#fff}
 .hfx-sello[data-tipo="pronto"]{background:rgb(255 255 255/.12);color:#fff}
 .hfx-sello[data-tipo="off"]{background:#3a3c3f;color:#c4c5c6}
 /* Chip de comando («/ cocuyo_cotizar»): cuadrito lima de 20 con una «/». */
 .hfx-chip-cmd{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:5px;background:linear-gradient(120deg,#d1fe17,#fff599);box-shadow:inset 0 1px 2px rgb(255 255 255/.5);color:#080809;font:700 14px/1 var(--font)}
 .hfx-chip-cmd::before{content:"/"}

 /* ---- Vacío grande: carpeta de 60×48, título 16/24, texto gris y botón oscuro ---- */
 .hfx-vacio-grande{display:grid;justify-items:center;gap:8px;max-width:260px;margin:0 auto;padding:48px 16px;text-align:center}
 .hfx-vacio-grande__ic{width:60px;height:48px;margin-bottom:8px;color:var(--hf-lima)}
 html body.hf-movil:not(#hf):not(#hf) .hfx-vacio-grande h2{margin:0;color:#fff;font:600 16px/24px var(--font);letter-spacing:.01em}
 .hfx-vacio-grande p{margin:0 0 12px;color:var(--hf-gris);font:600 16px/24px var(--font)}
 /* Pie de rejilla que se funde, con «Ver todo ›» translúcido (blanco 10 %, blur 40). */
 .hfx-fundido{position:relative;display:flex;justify-content:center;margin-top:-120px;padding:72px 16px 16px;background:linear-gradient(180deg,transparent,var(--hf-lienzo) 62%)}
 .hfx-fundido>button{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border:0;border-radius:10px;background:rgb(255 255 255/.1);color:#fff;font:500 14px/16px var(--font);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);cursor:pointer}

 /* ---- Hoja alta (784 de alto, radio 16 16 0 0, #131313) ---- */
 .hf-hoja.hf-hoja--alta{height:min(784px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));border-radius:16px 16px 0 0;background:#131313}
 .hf-hoja--alta .hf-hoja__cab{justify-content:flex-start;height:56px}
 html body.hf-movil:not(#hf):not(#hf) .hf-hoja--alta .hf-hoja__cab h2{font:500 18px/24px var(--font)}
 /* Botón de 44×44 (zona de toque entera) con el círculo de 32 que se ve, pintado dentro. */
 .hf-hoja--alta .hf-hoja__cerrar{right:-6px;width:44px;height:44px;border-radius:999px;background:radial-gradient(circle,rgb(255 255 255/.05) 15.5px,transparent 16px)}
 .hf-hoja__cuerpo{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}

 /* ---- Aviso breve bajo la cabecera (role=status; capa superior, encima de las hojas) ---- */
 .hfx-aviso{position:fixed;inset:calc(var(--st-top) + 8px) 16px auto;z-index:75;box-sizing:border-box;width:auto;max-width:420px;margin:0 auto;padding:12px 16px;border:0;border-radius:12px;background:var(--hf-tarjeta);color:#fff;font:500 14px/20px var(--font);text-align:center;box-shadow:0 8px 24px rgb(0 0 0/.45),inset 0 0 0 1px rgb(255 255 255/.08);pointer-events:none}
 /* Con una hoja abierta: encima de su pie (ui.aviso calcula --hfx-aviso-abajo), no sobre su título ni su X. */
 .hfx-aviso.is-sobre-hoja{top:auto;bottom:var(--hfx-aviso-abajo,calc(16px + env(safe-area-inset-bottom,0px)))}
 /* Siempre pintado (la región role=status ya está en el árbol accesible antes del
    primer aviso); vacío, visualmente oculto. Lo mismo la región de cada hoja (.hfx-voz). */
 .hf-movil .hfx-aviso{display:block}
 .hf-movil .hfx-aviso:empty,.hfx-voz{width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;background:none;box-shadow:none}
 .hfx-voz{position:absolute}
 @media(prefers-reduced-motion:reduce){.hfx-cta,.hfx-pestanas-caja::after{transition:none}}
}

/* ============ Conectores del Estudio móvil (Higgsfield «/mcp», 8-oct-2026) ============
   Módulo: assets/js/estudio-movil-conectores.js (pantalla 'conectores' del
   registro común), datos en conectores-datos.js. Lienzo #080809 (bloque
   común). Medidas de su web móvil (capturas/hf-ref/conectores-*): héroe
   centrado de 27/36 con las insignias de 30 dentro del título, botones
   blancos 3D y la hoja «Cómo conectar» de 784. Optimizado (revisión del
   8-oct): barra fija en una fila de 80, «Dónde funciona» en una fila de 5
   asistentes, ideas compactas con la petición entera, el control y las
   herramientas en una sola sección y modelos 16:9. Los iconos de los
   clientes son los SVG locales de assets/brand/conectores (máscara en
   currentColor). Solo en el teléfono: el escritorio no cambia. */
@media(max-width:900px){
 /* Sin la burbuja de ayuda en Conectores: con sesión tapaba el extremo derecho de «Conectar con ChatGPT»
    en la barra fija y el toque abría la ayuda. La ayuda sigue al final de la pantalla («Ayuda de Cocuyo»,
    [data-cocuyo-ayuda]), en Comunidad y en la cuenta. */
 html body.studio-workbench.hf-movil[data-hf-pantalla="conectores"] #cocuyo-chat-raiz .cchat-btn{display:none!important}
 .hfcn .ic{width:16px;height:16px}
 .hfcn-ic{display:inline-block;flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--hfcn-ic) center/contain no-repeat;mask:var(--hfcn-ic) center/contain no-repeat}
 /* Los 4 logos (assets/brand/conectores/*.svg, 5,9 KB) van aquí en data: URI: así el
    héroe, la barra y la hoja nunca salen un fotograma sin ellos (un archivo aparte
    llega después del primer pintado). Si cambia un .svg, cambia también su copia. */
 .hfcn-ic[data-c="claude"]{--hfcn-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z'/%3E%3C/svg%3E")}
 .hfcn-ic:is([data-c="chatgpt"],[data-c="codex"]){--hfcn-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20.57 10.18a4.99 4.99 0 0 0-.43-4.09C19.05 4.19 16.86 3.21 14.71 3.67A5.06 5.06 0 0 0 6.15 5.48a4.99 4.99 0 0 0-3.33 2.42c-1.1 1.9-.85 4.29.62 5.91a4.98 4.98 0 0 0 .43 4.09c1.09 1.9 3.29 2.88 5.43 2.42a4.99 4.99 0 0 0 3.76 1.68c2.2 0 4.14-1.42 4.81-3.51a4.99 4.99 0 0 0 3.33-2.42c1.09-1.89.84-4.27-.62-5.89Zm-7.52 10.51a3.73 3.73 0 0 1-2.4-.87l.12-.07 3.98-2.3a.66.66 0 0 0 .33-.57v-5.61l1.68.97c.02.01.03.02.03.04v4.65c0 2.07-1.68 3.74-3.75 3.75Zm-8.05-3.44a3.73 3.73 0 0 1-.45-2.51l.12.07 3.99 2.3a.64.64 0 0 0 .65 0l4.87-2.81v1.94a.07.07 0 0 1-.03.05l-4.03 2.33c-1.79 1.03-4.08.42-5.12-1.37ZM3.95 8.58a3.74 3.74 0 0 1 1.97-1.64v4.73a.64.64 0 0 0 .32.56l4.85 2.8-1.68.97a.06.06 0 0 1-.06 0L5.32 13.68c-1.79-1.04-2.4-3.33-1.37-5.12v.02Zm13.83 3.21-4.86-2.82L14.6 8a.06.06 0 0 1 .06 0l4.03 2.33a3.75 3.75 0 0 1-.56 6.75v-4.73a.66.66 0 0 0-.34-.56Zm1.68-2.52-.12-.07-3.98-2.32a.65.65 0 0 0-.65 0L9.84 9.69V7.75a.06.06 0 0 1 .02-.05l4.03-2.32a3.75 3.75 0 0 1 5.57 3.88v.02ZM8.92 12.72l-1.68-.97a.07.07 0 0 1-.03-.05V7.06a3.75 3.75 0 0 1 6.15-2.88l-.12.07-3.98 2.3a.66.66 0 0 0-.33.57l0 5.6Zm.91-1.97 2.17-1.25 2.17 1.25v2.5l-2.16 1.25-2.17-1.25 0-2.5Z'/%3E%3C/svg%3E")}
 .hfcn-ic[data-c="cli"]{--hfcn-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 6-5 6 5 6M17 6l5 6-5 6M14 3l-4 18'/%3E%3C/svg%3E")}
 .hfcn-ic[data-c="cursor"]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='395 390 176 202'%3E%3Cpath fill='%2372716D' d='M483.395 490.5L566 538.297C565.493 539.178 564.757 539.93 563.845 540.456L486.636 585.13C484.632 586.29 482.159 586.29 480.154 585.13L402.945 540.456C402.034 539.93 401.297 539.178 400.79 538.297L483.395 490.5Z'/%3E%3Cpath fill='%2355544F' d='M483.395 395V490.5L400.79 538.297C400.282 537.416 400 536.398 400 535.346V445.654C400 443.545 401.122 441.6 402.945 440.544L480.15 395.87C481.154 395.29 482.273 395 483.391 395H483.395Z'/%3E%3Cpath fill='%2343413C' d='M565.996 442.703C565.489 441.822 564.752 441.07 563.841 440.544L486.632 395.87C485.632 395.29 484.513 395 483.395 395V490.5L566 538.297C566.507 537.416 566.789 536.398 566.789 535.346V445.654C566.789 444.598 566.511 443.588 566 442.703H565.996Z'/%3E%3Cpath fill='%23D6D5D2' d='M560.218 446.049C560.686 446.858 560.751 447.896 560.218 448.82L485.235 578.974C484.732 579.855 483.392 579.493 483.392 578.479V492.713C483.392 492.029 483.209 491.37 482.877 490.794L560.215 446.045H560.218V446.049Z'/%3E%3Cpath fill='white' d='M560.218 446.049L482.88 490.797C482.552 490.224 482.073 489.737 481.48 489.394L407.369 446.511C406.49 446.006 406.851 444.663 407.862 444.663H557.824C558.889 444.663 559.754 445.239 560.218 446.049Z'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:none;mask:none}
 /* Rejilla lima en perspectiva (la de .hfx-conectores de Explorar). */
 .hfcn-rejilla{position:absolute;inset:auto -40% -34% -40%;height:78%;background-image:linear-gradient(rgb(209 254 23/.16) 1px,transparent 1px),linear-gradient(90deg,rgb(209 254 23/.16) 1px,transparent 1px);background-size:28px 28px;transform:perspective(260px) rotateX(58deg);transform-origin:top;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000,transparent 92%);mask-image:linear-gradient(180deg,#000,transparent 92%)}
 /* La pantalla deja sitio a la barra de una fila (80) y el foco con teclado no queda debajo. */
 .hf-movil .hf-pantalla.hfcn:not([hidden]){padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));scroll-padding-top:8px}

 /* ---- 1. Héroe ---- */
 /* Abajo 32 (como arriba): sin la línea de conexiones mide ≤ 235 también a 390-414. */
 .hfcn-heroe{position:relative;overflow:hidden;padding:32px 16px;isolation:isolate}
 .hfcn-heroe>.hfcn-rejilla{z-index:-1;inset:auto -60% 0 -60%;height:62%;opacity:.8;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 55%,transparent 95%);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 55%,transparent 95%)}
 /* Brillo lima: entero dentro del héroe (el óvalo acaba justo en su borde de abajo), sin corte recto. */
 .hfcn-heroe::before{content:"";position:absolute;z-index:-1;left:50%;bottom:0;width:420px;height:180px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgb(209 254 23/.12),transparent);pointer-events:none}
 /* Dos líneas, como en Higgsfield: la letra baja con el ancho (Geist es más ancha que Space Grotesk). */
 html body.hf-movil:not(#hf):not(#hf) .hfcn-heroe .hfx-h1.hfcn-h1{max-width:358px;margin:0 auto;font-size:clamp(20px,calc((100vw - 32px) / 14.6),27px);line-height:1.36}
 .hfcn-h1__l1,.hfcn-h1__l2{display:block}
 .hfcn-insignias{display:inline-flex;vertical-align:-5px;margin:0 2px}
 .hfcn-insignia{display:inline-grid;place-items:center;box-sizing:border-box;width:30px;height:30px;padding:2px;border:1px solid rgb(255 255 255/.2);border-radius:7px;color:#fff;box-shadow:0 4px 4px rgb(0 0 0/.08),inset 0 2px 4px rgb(255 255 255/.24)}
 .hfcn-insignia[data-c="chatgpt"]{background:#222}
 .hfcn-insignia[data-c="claude"]{margin-left:-3px;background:#d97757}
 .hfcn-insignia .hfcn-ic{width:18px;height:18px}
 .hfcn-heroe .hfx-heroe__sub{margin-top:8px}
 /* Dirección con copiar; también en el paso 2 de la hoja. */
 .hfcn-url{display:flex;align-items:center;gap:8px;box-sizing:border-box;max-width:358px;height:52px;margin:16px auto 0;padding:4px 4px 4px 14px;border:1px solid rgb(255 255 255/.06);border-radius:12px;background:rgb(255 255 255/.05);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
 /* La dirección no se corta nunca: el que cede es el botón (y, si su texto no cabe entero, se queda en el icono: .is-icono). */
 .hfcn-url code{flex:1 0 auto;color:#fff;font:500 14px/20px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:left;white-space:nowrap}
 .hfcn-url__copiar{flex:0 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 12px;overflow:hidden;border:0;border-radius:9px;background:#23262a;color:#fff;font:600 13px/16px var(--font);cursor:pointer}
 .hfcn-url__copiar .ic{flex:none}
 .hfcn-url__copiar span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .hfcn-url__copiar.is-icono{flex:none;width:44px;padding:0}
 .hfcn-url__copiar.is-icono span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
 /* «N conexiones activas · Gestionar» (con sesión): lleva a Mis conexiones. */
 .hfcn-activas{display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;min-height:44px;margin:12px auto 0;padding:0 16px 0 12px;border:1px solid rgb(255 255 255/.08);border-radius:999px;background:rgb(255 255 255/.04);color:#fff;font:500 14px/20px var(--font);cursor:pointer}
 .hfcn-activas__logos{display:inline-flex;align-items:center;gap:4px}
 .hfcn-activas .hfcn-ic{width:20px;height:20px}
 .hfcn-activas .hfcn-ic[data-c="claude"]{color:#d97757}
 /* Mientras llega cuenta.php (con sesión): el mismo sitio, sin botón, para que nada salte. */
 .hfcn-activas.is-cargando{display:flex;width:max-content;max-width:100%;color:#898a8b;cursor:default}
 .hfcn-activas.is-cargando>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

 /* ---- Secciones ---- */
 .hfcn-sec{padding-top:40px}
 .hfcn-sec .hfx-cabeza--grande{padding-bottom:16px}
 html body.hf-movil:not(#hf):not(#hf) .hfcn-sec .hfx-cabeza--grande h2{font-size:24px;line-height:30px;letter-spacing:-.01em}
 .hfcn-sec .hfx-cabeza--grande p{margin-top:4px}
 /* «Actualizar» centrado con su título, como «Ver todo» en Apps. */
 .hfcn-sec .hfx-cabeza--grande{align-items:center}
 .hfcn-sec .hfx-cabeza--grande .hfx-cabeza__txt{flex:1}

 /* ---- 2. Dónde funciona: los 5 asistentes en una fila (azulejos de 56, radio 16) ---- */
 .hfcn-asistentes{display:grid;grid-template-columns:repeat(5,56px);justify-content:space-between;padding:0 16px}
 .hfcn-asistente{display:grid;justify-items:center;gap:4px;width:56px;padding:0;border:0;background:none;color:#fff;font:inherit;cursor:pointer}
 .hfcn-asistente__nom{max-width:64px;overflow:hidden;color:rgb(255 255 255/.8);font:500 12px/16px var(--font);white-space:nowrap;text-overflow:ellipsis}
 .hfcn-azulejo{position:relative;display:grid;place-items:center;flex:none;width:64px;height:64px;border:1px solid rgb(255 255 255/.18);border-radius:16px;background:#222;color:#fff;box-shadow:0 10px 24px rgb(0 0 0/.45),inset 0 2px 6px rgb(255 255 255/.18)}
 .hfcn-asistente .hfcn-azulejo{box-sizing:border-box;width:56px;height:56px;box-shadow:0 8px 16px rgb(0 0 0/.4),inset 0 2px 6px rgb(255 255 255/.18)}
 .hfcn-azulejo .hfcn-ic{width:34px;height:34px}
 .hfcn-asistente .hfcn-azulejo .hfcn-ic{width:28px;height:28px}
 .hfcn-azulejo[data-c="claude"]{background:#d97757}
 .hfcn-azulejo[data-c="cursor"]{background:#14120b}
 .hfcn-azulejo[data-c="cli"]{background:#1c1e21;color:var(--hf-lima)}

 /* Fichas con icono gris (herramientas del conector). */
 .hfcn-chips{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0}
 .hfcn-ficha{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:28px;padding:6px 10px 6px 6px;border-radius:8px;background:rgb(255 255 255/.05);color:#fff;font:500 12px/16px var(--font);white-space:nowrap}
 .hfcn-ficha :is(.ic,.hfcn-ic){width:16px;height:16px;color:#898a8b}

 /* ---- 3. Ideas: tarjeta con la petición entera y «Copiar idea» a todo el ancho ---- */
 .hfcn-ideas{list-style:none;display:grid;gap:12px;margin:0;padding:0 16px}
 .hfcn-idea{display:grid;gap:8px;padding:16px;border:1px solid rgb(255 255 255/.04);border-radius:16px;background:#131517;box-shadow:inset 2px 2px 2px rgb(255 255 255/.02);cursor:pointer}
 .hfcn-idea__cab{display:flex;align-items:center;gap:8px}
 .hfcn-idea__cab>.ic{flex:none;width:20px;height:20px;color:var(--hf-lima)}
 html body.hf-movil:not(#hf):not(#hf) .hfcn-idea__t{margin:0;color:#fff;font:500 18px/24px var(--font);letter-spacing:0}
 .hfcn-idea__txt{margin:0;color:rgb(255 255 255/.6);font:400 15px/22px var(--font)}
 .hfcn-idea__copiar{display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;width:100%;min-height:44px;margin-top:4px;padding:0 14px;border:0;border-radius:12px;background:#23262a;color:#fff;font:500 14px/16px var(--font);cursor:pointer}

 /* ---- 4. Ves el coste (control, icono lima de 20 sin baldosa) y lo que puede hacer (fichas por permiso) ---- */
 .hfcn-control{list-style:none;display:grid;gap:4px;margin:0;padding:0 16px}
 .hfcn-control li{display:flex;align-items:flex-start;gap:12px;padding:8px 0}
 .hfcn-control li>.ic{flex:none;width:20px;height:20px;color:var(--hf-lima)}
 .hfcn-control li>span{flex:1;min-width:0;display:grid;gap:2px}
 .hfcn-control b{color:#fff;font:500 15px/20px var(--font)}
 .hfcn-control small{color:rgb(255 255 255/.5);font:400 13px/18px var(--font)}
 .hfcn-puede{display:grid;gap:8px;margin:16px 16px 0;padding-top:16px;border-top:1px solid rgb(255 255 255/.06)}
 /* Los dos grupos se separan por el espacio (16, el doble que entre filas) y empiezan por
    su título: icono y texto en negrita, sin fondo de ficha (no parece otra herramienta). */
 .hfcn-puede__fila+.hfcn-puede__fila{margin-top:8px}
 .hfcn-estado.hfcn-puede__et{gap:6px;min-height:28px;padding:0 4px 0 0;background:none!important;font-weight:600}
 .hfcn-puede__et .ic{width:16px;height:16px}
 html body.hf-movil:not(#hf):not(#hf) .hfcn-puede h3{margin:0 0 4px;color:#fff;font:500 16px/24px var(--font);letter-spacing:0}

 /* ---- 6. Modelos: fotos 16:9 en 2 columnas (solo informan: sin aspecto de botón) ---- */
 .hfcn-modelos{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0 16px}
 .hfcn-modelo{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#1c1e21}
 /* La foto se funde del todo antes del nombre (que empieza al 72-74 % de su alto): el
    nombre va entero sobre la banda sólida, como en Higgsfield, también con fotos claras. */
 .hfcn-modelo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 70%);mask-image:linear-gradient(180deg,#000 40%,transparent 70%)}
 .hfcn-modelo__banda{display:grid;justify-items:center;gap:2px;margin-top:-26px;padding:0 8px 12px;text-align:center}
 .hfcn-modelo__banda b{max-width:100%;overflow:hidden;color:#fff;font:600 15px/20px var(--font);white-space:nowrap;text-overflow:ellipsis}
 .hfcn-modelo__banda small{display:inline-flex;align-items:center;gap:4px;color:#898a8b;font:500 12px/16px var(--font)}
 .hfcn-modelo__banda small .ic{width:13px;height:13px}
 .hfcn-nota{margin:14px 16px 0;color:#898a8b;font:400 13px/19px var(--font)}

 /* ---- 5. Mis conexiones ---- */
 .hfcn-actualizar{gap:6px!important;min-height:44px;padding-block:0!important}
 .hfcn-actualizar .ic{width:16px!important;height:16px!important}
 .hfcn-actualizar:disabled{opacity:.5;cursor:default}
 .hfcn-cuenta{margin:0 16px;padding:16px;border:1px solid rgb(255 255 255/.04);border-radius:16px;background:#131517;box-shadow:inset 2px 2px 2px rgb(255 255 255/.02)}
 .hfcn-cuenta__estado{margin:0 0 4px;color:#898a8b;font:400 14px/20px var(--font)}
 /* Siempre pintada (role=status ya en el árbol accesible); vacía no ocupa sitio. */
 .hfcn-cuenta__estado:empty{margin:0}
 .hfcn-cuenta__estado.is-error{color:#ff7a6b}
 .hfcn-cuenta__entrar p{margin:0 0 16px;color:#d6d7d8;font:400 14px/20px var(--font)}
 .hfcn-cuenta__id{margin:0 0 8px;overflow:hidden;color:#898a8b;font:500 13px/18px var(--font);white-space:nowrap;text-overflow:ellipsis}
 .hfcn-conexiones{list-style:none;display:grid;margin:0;padding:0}
 .hfcn-conexion{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid rgb(255 255 255/.06)}
 .hfcn-conexion__cab{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-width:0;min-height:44px}
 .hfcn-conexion:first-child{border-top:0}
 .hfcn-azulejo--chico{width:40px;height:40px;border-radius:10px;box-shadow:none}
 .hfcn-azulejo--chico .hfcn-ic,.hfcn-azulejo--chico .ic{width:20px;height:20px}
 .hfcn-conexion__txt{flex:1;min-width:0;display:grid;justify-items:start;gap:4px}
 .hfcn-conexion__txt b{flex:1;min-width:0;max-width:100%;overflow:hidden;color:#fff;font:600 15px/20px var(--font);white-space:nowrap;text-overflow:ellipsis}
 .hfcn-conexion__txt small{color:#898a8b;font:400 12px/16px var(--font)}
 .hfcn-estado{display:inline-flex;align-items:center;min-height:22px;padding:2px 8px;border-radius:6px;background:rgb(255 255 255/.08);color:#d6d7d8;font:500 12px/16px var(--font)}
 .hfcn-estado[data-tipo="crear"]{background:rgb(209 254 23/.14);color:var(--hf-lima)}
 .hfcn-estado[data-tipo="revocada"]{background:none;padding-left:0;color:#898a8b;text-decoration:line-through}
 .hfcn-conexion[data-tipo="revocada"] :is(.hfcn-azulejo,b){opacity:.5}
 .hfcn-conexion[data-tipo="revocada"] .hfcn-conexion__cab{min-height:20px}
 .hfcn-revocar{flex:none;height:44px;padding:0 12px;border:1px solid rgb(255 255 255/.1);border-radius:10px;background:#23262a;color:#fff;font:600 13px/16px var(--font);cursor:pointer}
 .hfcn-revocar.is-confirmar{border-color:rgb(255 122 107/.5);background:rgb(255 90 70/.14);color:#ff8f82}
 .hfcn-revocar:disabled{opacity:.5;cursor:default}
 .hfcn-vacio{padding:4px 0 8px;color:#d6d7d8;font:400 14px/20px var(--font)}
 .hfcn-enlace{display:flex;align-items:center;gap:10px;min-height:48px;margin-top:8px;padding:0 4px 0 0;border-top:1px solid rgb(255 255 255/.06);color:#fff;font:500 14px/20px var(--font);text-decoration:none}
 .hfcn-enlace span{flex:1;min-width:0}
 .hfcn-enlace .ic{color:#898a8b}
 .hfcn-enlace>.ic:last-child{width:16px;height:16px;color:#5c5c5c}
 .hfcn-mas{display:grid;gap:8px;padding:24px 16px 8px}
 .hfcn-mas .hfcn-enlace{margin:0;padding:0 14px;border:1px solid rgb(255 255 255/.04);border-radius:12px;background:#131517}
 /* «Ayuda de Cocuyo» (con sesión): con ella a la vista, chat.js quita su burbuja flotante. */
 button.hfcn-enlace{box-sizing:border-box;width:100%;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
 .hfcn-cargando{padding:48px 16px;color:#898a8b;font:400 14px/20px var(--font);text-align:center}
 /* Sin los datos: «Reintentar» (blanco) y el enlace a la página de Conectores, los dos de 48. */
 .hfcn-fallo{gap:12px;max-width:300px}
 .hfcn-fallo .hfx-cta{width:100%;min-height:48px}

 /* ---- Barra fija: «Claude» y «ChatGPT» en una fila (80 de alto: 16 + 48 + 16) ---- */
 .hfcn-pie{grid-template-columns:1fr 1fr;gap:8px;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,transparent,var(--hf-lienzo) 16px)}
 .hfcn-pie .hfx-cta{min-width:0;padding-inline:12px}
 .hfcn-pie .hfx-cta>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .hfcn-pie .hfcn-ic{width:20px;height:20px}
 .hfcn-pie .hfcn-ic[data-c="claude"]{color:#d97757}
 .hfcn-pie .hfcn-ic[data-c="chatgpt"]{color:#1a1a1a}
 @media(max-height:500px){.hfcn-pie{padding-top:12px}}
 /* Respaldo: si la burbuja de ayuda (.cchat-btn) llegara a verse, por encima de la barra. Con
    sesión no se ve: «Ayuda de Cocuyo» va dentro de la pantalla (chat.js la quita). */
 html body.studio-workbench.hf-movil[data-hf-pantalla="conectores"]:not(#hf) #cocuyo-chat-raiz .cchat-btn{bottom:calc(88px + env(safe-area-inset-bottom,0px))}

 /* ---- Hoja «Cómo conectar» ---- */
 /* El cuerpo ocupa todo el ancho de la hoja: así la barra de pestañas (margen −16) no lo desborda. */
 .hfcn-hoja .hf-hoja__cuerpo{margin:0 -16px;padding:0 16px 16px;overflow-x:hidden}
 /* Pestañas pegadas arriba; asoma la siguiente y un degradado marca el borde mientras quedan más. */
 .hfcn-pestanas-caja{position:sticky;top:0;z-index:1;margin:0 -16px;background:#131313}
 .hfcn-pestanas-caja::after{content:"";position:absolute;top:0;right:0;bottom:1px;width:40px;background:linear-gradient(270deg,#131313,rgb(19 19 19/0));pointer-events:none;transition:opacity .2s}
 .hfcn-pestanas-caja.is-final::after{opacity:0}
 .hfcn-pestanas.hfx-subrayado{gap:16px;margin:0}
 /* Las no activas en el gris de texto de .hfx-subrayado (#898A8B, 5,4:1 sobre #131313). */
 .hfcn-pestanas>button{display:inline-flex;align-items:center;gap:8px;padding:12px 0 14px;color:var(--hf-gris,#898a8b)}
 .hfcn-pestanas>button[aria-selected="true"]{color:#fff}
 .hfcn-pestanas .hfcn-ic{width:16px;height:16px}
 .hfcn-pestanas .hfcn-ic[data-c="claude"]{color:#d97757}
 .hfcn-pestanas>button:focus-visible{outline:2px solid var(--hf-lima);outline-offset:-2px}
 .hfcn-hoja__panel{padding-top:12px}
 .hfcn-dispositivo{display:flex;box-sizing:border-box;height:44px;margin:0 0 8px;padding:0 2px;border-radius:12px;background:rgb(255 255 255/.08)}
 .hfcn-dispositivo>button{position:relative;flex:1;height:44px;padding:0 14px;border:0;border-radius:12px;background:none;color:rgb(255 255 255/.6);font:500 14px/20px var(--font);cursor:pointer;isolation:isolate}
 .hfcn-dispositivo>button::before{content:"";position:absolute;inset:4px 2px;z-index:-1;border-radius:10px}
 .hfcn-dispositivo>button[aria-pressed="true"]{color:#f7f7f8}
 .hfcn-dispositivo>button[aria-pressed="true"]::before{background:#2e3031}
 .hfcn-pasos{list-style:none;display:grid;gap:8px;margin:0;padding:0}
 .hfcn-paso{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:16px;background:rgb(255 255 255/.05)}
 .hfcn-paso__n{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:rgb(255 255 255/.1);color:#fff;font:500 14px/20px var(--font)}
 .hfcn-paso__txt{flex:1;min-width:0}
 html body.hf-movil:not(#hf):not(#hf) .hfcn-paso h3{margin:2px 0 4px;color:#fff;font:500 16px/24px var(--font);letter-spacing:0}
 .hfcn-paso p{margin:0;color:#898a8b;font:400 14px/20px var(--font)}
 .hfcn-url--hoja{max-width:none;margin:8px 0 0;-webkit-backdrop-filter:none;backdrop-filter:none}
 /* En la hoja, copiar con solo el icono: así la dirección se lee entera también a 360. */
 .hfcn-url--hoja .hfcn-url__copiar{justify-content:center;width:44px;padding:0}
 .hfcn-oculto{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
 .hfcn-codigo{position:relative;margin-top:12px}
 .hfcn-codigo pre{box-sizing:border-box;max-width:100%;margin:0;padding:12px 12px 60px;overflow-x:auto;border:1px solid rgb(255 255 255/.06);border-radius:10px;background:#0b0b0b;color:#e8e8e8;font:400 12.5px/19px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
 .hfcn-codigo--solo pre{padding-bottom:12px}
 .hfcn-flecha{display:inline-grid;place-items:center;margin-left:2px}
 .hfcn-flecha .ic{width:16px!important;height:16px!important}
 .hfcn-codigo__copiar{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border:0;border-radius:8px;background:#23262a;color:#fff;font:600 13px/16px var(--font);cursor:pointer}
 .hfcn-hoja__lead{margin:0;color:#d6d7d8;font:400 14px/20px var(--font)}
 .hfcn-hoja__nota{margin:16px 0 0;color:#898a8b;font:400 13px/19px var(--font)}
 .hfcn-guia{display:inline-flex;align-items:center;min-height:44px;color:var(--hf-lima);font:500 14px/20px var(--font);text-decoration:none}
 .hfcn-hoja__pie{flex:none;display:grid;gap:8px;padding-top:12px}
 .hfcn-hoja__pie .hfcn-ic{width:20px;height:20px}
 .hfcn-hoja__pie .hfcn-ic[data-c="claude"]{color:#d97757}
 .hfcn-hoja__pie .hfcn-ic:is([data-c="chatgpt"],[data-c="codex"],[data-c="cli"]){color:#1a1a1a}
 .hfcn-descargar{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;color:#fff;font:500 14px/16px var(--font);text-decoration:none}
 .hfcn :is(.hfcn-asistente,.hfcn-idea__copiar,.hfcn-url__copiar,.hfcn-activas,.hfcn-revocar,.hfcn-enlace):focus-visible,.hfcn-hoja :is(a,button):focus-visible{outline:2px solid var(--hf-lima);outline-offset:2px}
 @media(prefers-reduced-motion:reduce){.hfcn-pestanas-caja::after{transition:none}}
}

/* ============ Apps del Estudio móvil (Higgsfield «/apps», 8-oct-2026) ============
   Módulo: assets/js/estudio-movil-apps.js (pantalla 'apps' del registro común,
   cargada en diferido; datos de estudio-apps.js en solo lectura). Medidas de
   la app de Higgsfield (capturas/hf-ref/apps-1…4): lienzo #131517, héroe a la
   izquierda, buscador, pestañas pegadas arriba, secciones con título de 28 en
   MAYÚSCULAS y «Ver todo ›», carril de tarjetas de 248 (la primera sección con
   el medio a sangre y «▶ Usar») y, por categoría, rejillas de 2 columnas.
   El diálogo de escritorio (estudio-apps.css) no cambia. */
@media(max-width:900px){
 .hfa .hfa-heroe .hfx-heroe{padding:24px 16px 0}
 /* «APPS DE COCUYO» en una línea también a 360 (40 px a 390, como Higgsfield). */
 html body.hf-movil:not(#hf):not(#hf) .hfa .hfx-h1{font-size:min(40px,calc((100vw - 32px) / 8.75));line-height:1}
 .hfa .hfx-buscar-linea{margin:32px 16px 16px}
 .hfa-cuerpo{padding:40px 0 0}
 .hfa-sec{margin:0 0 48px}
 .hfa .hfx-cabeza--grande{align-items:center}
 .hfa .hfx-cabeza--grande .hfx-cabeza__txt{flex:1}
 /* Tarjetas del carril (.hfx-app): todas del mismo alto; nombre y texto abajo del medio. */
 .hfa-carril{align-items:stretch;padding-bottom:2px}
 .hfa-app{display:flex;flex-direction:column;gap:12px;width:248px;min-width:0;text-decoration:none}
 .hfa-app .hfx-app__medio{flex:none}
 .hfa-app__cuerpo{display:flex;flex-direction:column;gap:4px;min-width:0}
 .hfa-app .hfx-app__nom{line-height:24px}
 /* Nombre entero: hasta dos líneas en el carril y tres en la rejilla de 2
    columnas, donde caben ~20 letras por línea a 360 («Tarjeta de presentación
    de taller o concesionario»). En una sola línea se cortaban «Felicitación del
    Día de la Madre» y «…del Padre» en el mismo «Felicitación del Día de…». */
 .hfa :is(.hfa-app,.hfa-ficha) .hfx-app__nom{display:-webkit-box;white-space:normal;overflow-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 .hfa .hfa-ficha .hfx-app__nom{-webkit-line-clamp:3}
 /* Primera sección: medio a sangre (246×238), cuerpo 12 16 y «▶ Usar» blanco de 32. */
 .hfa-app--grande{padding:0;gap:0;overflow:hidden}
 .hfa-app--grande .hfx-app__medio{aspect-ratio:246/238;border-radius:12px 12px 0 0}
 .hfa-app--grande .hfa-app__cuerpo{flex:1;padding:12px 16px}
 .hfa-usar{display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;height:32px;margin-top:auto;padding:4px 8px;border:1px solid rgb(0 0 0/.06);border-radius:8px;background:#fff;color:#131517;font:600 14px/20px var(--font);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
 .hfa-app--grande .hfx-app__txt{margin-bottom:20px}
 .hfa-usar .ic{width:12px;height:12px;fill:currentColor;stroke:none}
 @media(hover:hover){.hfa-app:hover{background:#1c1e21}.hfa-ficha:hover .hfx-app__medio{filter:brightness(1.08)}}
 .hfa-app:active,.hfa-ficha:active{transform:scale(.985)}
 /* Medio: póster (perezoso) y el vídeo encima cuando ya se ve; portada; icono de Útiles; o icono sobre fondo. */
 .hfa-medio>:is(img,video,.hfa-arte){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 .hfa-medio>video{opacity:0;transition:opacity .25s}
 .hfa-medio>video.is-listo{opacity:1}
 .hfa-medio>.hfx-sello{z-index:2}
 .hfa-arte{display:grid;place-items:center;box-sizing:border-box;background:radial-gradient(70% 70% at 50% 42%,rgb(209 254 23/.16),transparent 70%),var(--hf-tarjeta);color:var(--hf-lima)}
 .hfa-medio>.hfa-arte .ic{width:30%;height:30%;max-width:64px;max-height:64px;stroke-width:1.2}
 .hfa-medio>img.hfa-icono-util{background:#000}
 /* No disponible ahora: la tarjeta, atenuada (el sello se lee entero). */
 .hfa .is-off .hfa-medio>:not(.hfx-sello){opacity:.4}
 .hfa .is-off :is(.hfx-app__nom,.hfx-app__txt){color:rgb(255 255 255/.45)}
 .hfa .is-off .hfa-usar{opacity:.5}
 /* Rejillas de una categoría: 2 columnas de 173, medio 1:1, nombre 14/20 y texto en una línea. */
 .hfa-sec.hfa-sec--cat{margin-bottom:0}
 .hfa-sec--cat .hfx-cabeza--grande{padding-bottom:24px}
 .hfa-bloque{margin:0 0 32px;padding:0 16px}
 html body.hf-movil:not(#hf):not(#hf) .hfa-bloque__t{margin:0 0 12px;color:#fff;font:600 18px/24px var(--font);letter-spacing:0}
 .hfa-rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
 .hfa-ficha{display:grid;align-content:start;gap:8px;min-width:0;padding:0;border:0;background:none;color:#fff;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
 .hfa-ficha .hfx-app__medio{aspect-ratio:1}
 .hfa-ficha .hfa-app__cuerpo{gap:0}
 .hfa-ficha .hfx-app__nom{font:600 14px/20px var(--font)}
 .hfa-ficha .hfx-app__txt{display:block;overflow:hidden;font:400 13px/18px var(--font);white-space:nowrap;text-overflow:ellipsis}
 .hfa-ficha .hfx-sello{transform:skewX(-10deg) scale(.92);transform-origin:left bottom}
 .hfa-vacio{padding:32px 16px}
 /* Agente (beta, solo con acceso): una fila al principio de «Todas». */
 .hfa-agente{display:flex;align-items:center;gap:12px;box-sizing:border-box;width:calc(100% - 32px);margin:0 16px 40px;padding:12px;border:1px solid rgb(255 255 255/.06);border-radius:16px;background:var(--hf-tarjeta);color:#fff;font:inherit;text-align:left;cursor:pointer}
 .hfa-agente>.hfa-arte{flex:none;width:48px;height:48px;border-radius:12px}
 .hfa-agente>.hfa-arte .ic{width:24px;height:24px}
 .hfa-agente__txt{flex:1;min-width:0;display:grid;gap:2px}
 .hfa-agente__txt b{display:flex;align-items:center;gap:8px;font:600 16px/24px var(--font)}
 .hfa-agente__txt small{color:rgb(255 255 255/.6);font:400 14px/20px var(--font)}
 .hfa-agente>.ic{flex:none;width:16px;height:16px;color:#5c5c5c}
 /* «Muy pronto»: filas discretas, sin acción. */
 .hfa-pronto-sec{padding:0 16px}
 html body.hf-movil:not(#hf):not(#hf) .hfa-pronto-t{margin:0 0 8px;color:rgb(255 255 255/.85);font:600 18px/24px var(--font);letter-spacing:0}
 .hfa-pronto-lista{display:grid;gap:4px;margin:0;padding:0;list-style:none}
 .hfa-pronto{display:flex;align-items:center;gap:12px;min-height:56px;color:rgb(255 255 255/.7)}
 .hfa-pronto>.hfa-arte{flex:none;width:44px;height:44px;border-radius:10px;opacity:.7}
 .hfa-pronto>.hfa-arte .ic{width:20px;height:20px}
 .hfa-pronto__txt{flex:1;min-width:0;display:grid}
 .hfa-pronto__txt b{display:-webkit-box;overflow:hidden;font:500 14px/20px var(--font);overflow-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 .hfa-pronto__txt small{overflow:hidden;color:var(--hf-gris);font:400 12px/16px var(--font);white-space:nowrap;text-overflow:ellipsis}
 .hfa-pronto>.hfx-sello{flex:none}
 @media(prefers-reduced-motion:reduce){.hfa-medio>video{transition:none}.hfa-app:active,.hfa-ficha:active{transform:none}}
}

/* ============ Útiles del Estudio móvil (Higgsfield «/apps» con las filas de «Explore», 8-oct-2026) ============
   Módulo: assets/js/estudio-movil-utiles.js (pantalla 'utiles' del registro
   común, cargada en diferido; datos de utiles-catalogo.js en solo lectura).
   El mismo héroe, buscador y pestañas que Apps (capturas/hf-ref/apps-1/2) y
   las filas .hfx-fila de Explorar (icono de 77×58, nombre, GRATIS y una línea
   gris). Lienzo #0b0b0b. utiles.html y /es/utiles/ no cambian. */
@media(max-width:900px){
 /* Abajo, sitio para que la última fila no quede bajo el botón de ayuda (.cchat-btn, con sesión).
    Arriba (scroll-padding-top), el alto de las pestañas pegadas (60) y 8 de aire:
    al subir con Mayús+Tab, la fila enfocada no queda debajo de ellas. */
 .hf-movil .hf-pantalla.hfu:not([hidden]){padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));scroll-padding-top:68px}
 .hfu .hfu-heroe .hfx-heroe{padding:24px 16px 0}
 /* Dato contado del catálogo: «160 útiles gratis», con el número en lima. */
 .hfu-dato{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;padding:6px 12px 6px 10px;border-radius:999px;background:rgb(255 255 255/.06);color:rgb(255 255 255/.8);font:500 13px/18px var(--font)}
 .hfu-dato b{color:var(--hf-lima);font-weight:700}
 .hfu .hfu-dato .ic{width:16px;height:16px;color:var(--hf-lima)}
 .hfu .hfx-buscar-linea{margin:32px 16px 16px}
 .hfu-cuerpo{padding:32px 0 0}
 .hfu-sec{margin:0 0 40px}
 .hfu .hfx-cabeza--grande{align-items:center;padding-bottom:12px}
 .hfu .hfx-cabeza--grande .hfx-cabeza__txt{flex:1}
 .hfu-sec--cat .hfx-cabeza--grande{padding-bottom:16px}
 .hfu-sec--busqueda{margin-top:-16px}
 /* Filas: enlaces reales. Un nombre largo pasa a dos líneas antes que cortarse,
    con GRATIS detrás de la última palabra; la línea gris, en una. El recorte
    es de 3 líneas: si el nombre llena dos (de, it, ru, tr a 360; fr y pt a
    320), GRATIS baja a la tercera en vez de perderse. */
 .hfu .hfx-fila{box-sizing:border-box;color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent}
 .hfu .hfx-fila__nom{display:-webkit-box;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical;font:500 14px/20px var(--font)}
 /* El hueco va al final del nombre (también en rtl): si GRATIS baja de línea, empieza sin sangría. */
 .hfu .hfx-fila__nom b{display:inline;overflow:visible;margin-inline-end:8px;white-space:normal}
 .hfu .hfx-fila__nom .hfx-ins{display:inline-block;vertical-align:1px;line-height:18px}
 .hfu .hfx-fila__img .ic{width:24px;height:24px}
 .hfu .hfx-fila>.ic{flex:none;width:16px;height:16px;color:#5c5c5c}
 @media(hover:hover){.hfu .hfx-fila:hover .hfx-fila__nom b{color:var(--hf-lima)}}
 .hfu .hfx-fila:active{opacity:.75}
 .hfu-vacio{padding:32px 16px}
}

/* ============ Creaciones del Estudio móvil (Higgsfield «Assets», 8-oct-2026) ============
   La biblioteca real (#pg-library, la Bóveda de estudio-4.js) con el aspecto
   de «Assets» de Higgsfield (capturas/hf-ref/creaciones-1 y comunidad-shots-1).
   Módulo: assets/js/estudio-movil-creaciones.js (pone body.hf-en-creaciones,
   el título, los botones redondos de la barra, las hojas «Ver y ordenar» y
   de acciones del ⋯, y la pantalla 'creaciones' del visitante). El HTML de
   estudio-4.js no cambia. Peso: estudio-assets.css va suelto DESPUÉS del
   bundle con «body.studio-workbench:not(#f) #pg-library», así que aquí todo
   va con «html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on».
   Solo en el teléfono: el escritorio no cambia. */
.hfc-botones,.hfc-barra-sola{display:none}
@media(max-width:900px){
 /* Sin la burbuja de ayuda en Creaciones: tapaba la rejilla (la ayuda sigue en Comunidad y en la cuenta). */
 html body.studio-workbench.hf-movil:is(.hf-en-creaciones,[data-hf-pantalla="creaciones"]) #cocuyo-chat-raiz .cchat-btn{display:none!important}
 /* La cabecera de 56, como en Crear y en las pantallas (fuera del cuadro la común medía 64). */
 html body.studio-workbench.hf-movil.hf-en-creaciones:not(#hf):not(#hf) .sm-header{height:var(--st-top)}
 /* Y en rejilla ☰ · título · Mejorar (bloque común): fuera del cuadro de Crear
    (sin .sm-herramienta), barra-inferior.css, que carga después, la ponía en
    flex con el mismo peso y el título y Mejorar se quedaban pegados a ☰. */
 html body.studio-workbench.hf-movil:is(.hf-en-creaciones,[data-hf-pantalla]):not(#hf):not(#hf) .sm-header{display:grid!important}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on{background:#0b0b0b}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva{display:block;min-height:calc(100dvh - var(--st-top));color:#fff;font-family:var(--font)}

 /* ---- Píldoras pegadas arriba: el proyecto y las carpetas reales (33 de alto; el toque, 44) ---- */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-lateral{position:sticky;top:var(--st-top);z-index:20;display:flex;flex-direction:row;align-items:center;gap:8px;height:auto;margin:0;padding:0 12px 5px;overflow-x:auto;overflow-y:hidden;border:0;background:#0b0b0b;scrollbar-width:none}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-lateral::-webkit-scrollbar{display:none}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-carpetas{display:flex;flex:none;flex-direction:row;gap:8px;margin:0;padding:0;border:0}
 /* La lista de proyectos y el rótulo «Biblioteca», fuera: el proyecto va en la primera píldora. */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on :is(.bva-proyectos,.bva-carpetas>.bva-grupo){display:none!important}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-carpeta{position:relative;isolation:isolate;flex:none;display:inline-flex;align-items:center;gap:6px;width:auto;height:44px;min-height:0;margin:0;padding:0 14px;border:0;border-radius:17px;background:transparent;color:#fff;font:500 12px/15px var(--font);letter-spacing:0;white-space:nowrap;-webkit-tap-highlight-color:transparent}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-carpeta::before{content:"";position:absolute;inset:5.5px 0;z-index:-1;border-radius:17px;background:rgb(255 255 255/.05);transition:background .15s}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-carpeta[aria-current="true"]{background:transparent;color:#131517}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-carpeta[aria-current="true"]::before{background:#fff}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-carpeta:active::before{background:rgb(255 255 255/.12)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-carpeta[aria-current="true"]:active::before{background:#e8e8e8}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-carpeta>:is(span,svg){display:none}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-carpeta b{max-width:150px;overflow:hidden;font-weight:inherit;text-overflow:ellipsis}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-carpeta:focus-visible{outline:0}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-carpeta:focus-visible::before{box-shadow:0 0 0 2px var(--hf-lima)}
 /* El proyecto: su carpeta (lima si hay uno seleccionado) y una raya fina antes de las carpetas
    (lógicas, inline-start: en árabe y urdu la raya va a la derecha de las carpetas). */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-ir-proyectos>svg{display:block;width:14px;height:14px;color:rgb(255 255 255/.6)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-ir-proyectos.bva-con-proyecto>svg{color:var(--hf-lima)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-ir-proyectos+.bva-carpetas{position:relative;margin:0;margin-inline-start:9px;padding:0;border:0}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-ir-proyectos+.bva-carpetas::before{content:"";position:absolute;inset-inline-start:-9px;top:14px;bottom:14px;width:1px;background:rgb(255 255 255/.12)}

 /* ---- Conmutador «Este proyecto (n) | Todas mis creaciones» (el real), en dos píldoras ---- */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bv-ambito{display:flex;gap:8px;width:auto;max-width:none;margin:0;padding:0 12px;overflow-x:auto;border:0;border-radius:0;background:none;scrollbar-width:none}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bv-ambito button{position:relative;isolation:isolate;flex:none;display:inline-flex;align-items:center;gap:6px;min-width:0;height:44px;min-height:0;padding:0 14px;border:0;border-radius:17px;background:transparent;color:#fff;font:500 12px/15px var(--font);white-space:nowrap}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bv-ambito button::before{content:"";position:absolute;inset:5.5px 0;z-index:-1;border-radius:17px;background:rgb(255 255 255/.05)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bv-ambito button[aria-pressed="true"]{background:transparent;color:#131517}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bv-ambito button[aria-pressed="true"]::before{background:#fff}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bv-ambito button span{color:inherit;opacity:.6;font-weight:500}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bv-ambito .ic{width:14px;height:14px}

 /* ---- Barra: el buscador real (#bvBusca) y dos botones redondos (Ver y ordenar · Subir) ---- */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-main{min-width:0;padding:0 0 calc(40px + env(safe-area-inset-bottom,0px))}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-cabecera{display:none}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-barra{position:static;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:0;padding:8px 16px 4px;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
 /* Filtros, orden, mes, vista, seleccionar y tamaño pasan a la hoja «Ver y ordenar». */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-barra>:not(.bva-busca):not(.hfc-botones){display:none!important}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-busca{position:relative;flex:1 1 auto;min-width:0;max-width:none;margin:0}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-busca>svg{left:12px;width:20px;height:20px;color:var(--hf-gris);stroke-width:1.6}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-busca input{box-sizing:border-box;width:100%;height:44px;min-height:44px;margin:0;padding:0 12px 0 42px;border:1px solid transparent;border-radius:12px;background:rgb(255 255 255/.04);box-shadow:0 4px 12px rgb(0 0 0/.12);color:#fff;font:400 16px/20px var(--font);text-overflow:ellipsis;outline:0}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-busca input::placeholder{color:var(--hf-gris)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-busca input:focus{border-color:rgb(209 254 23/.45);outline:0;box-shadow:0 4px 12px rgb(0 0 0/.12)}
 html body.studio-workbench.hf-movil #pg-library.on .hfc-botones{display:flex;flex:none;gap:8px}
 .hfc-redondo{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:999px;background:rgb(255 255 255/.05);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
 .hfc-redondo::after{content:"";position:absolute;inset:-2px}
 .hfc-redondo .ic{width:18px;height:18px}
 .hfc-redondo:active{background:rgb(255 255 255/.12)}
 .hfc-redondo:focus-visible{outline:2px solid var(--hf-lima);outline-offset:2px}
 .hfc-punto{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:999px;background:var(--hf-lima);color:#131517;font:600 10px/16px var(--font);font-style:normal;text-align:center}
 .hfc-punto[hidden]{display:none}
 /* Sin barra (proyecto vacío, error): Subir sigue a mano. */
 html body.studio-workbench.hf-movil #pg-library.on .hfc-barra-sola{display:flex;padding:8px 16px 0}
 .hfc-subir .ic{width:18px;height:18px}
 /* Filtros activos y «Elige lo que quieres añadir…». */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-chips{gap:8px;padding:8px 16px 0}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-chip{height:33px;min-height:0;padding:0 10px 0 14px;border-radius:17px;background:rgb(255 255 255/.08);color:#fff;font:500 12px/15px var(--font)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bv-anadir{margin:8px 16px 0;border-radius:12px}

 /* ---- Cajón de filtros (el real), con el aspecto de las hojas ---- */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-filtros{gap:16px;padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px));border:0;border-radius:16px 16px 0 0;background:#131313;box-shadow:0 -12px 40px rgb(0 0 0/.5)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-filtros-cab{height:48px;font:600 16px/24px var(--font)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-filtros-cab .bva-boton{width:32px;height:32px;min-height:0;padding:0;border:0;border-radius:999px;background:rgb(255 255 255/.05)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-filtros .bva-etiqueta{color:var(--hf-gris);font:500 12px/16px var(--font);letter-spacing:0;text-transform:none}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-filtros .bva-segs{gap:4px;padding:4px;border:0;border-radius:12px;background:rgb(255 255 255/.08)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-filtros .bva-seg{min-height:36px;border-radius:10px;color:rgb(255 255 255/.6);font:500 14px/20px var(--font)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-filtros .bva-seg[aria-pressed="true"]{background:#2e3031;color:#f7f7f8}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-filtros .bva-select{height:44px;min-height:44px;border:0;border-radius:12px;background-color:rgb(255 255 255/.04);color:#fff;font:400 16px/20px var(--font)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-filtros .bva-limpiar{min-height:44px;border:0;border-radius:12px;background:rgb(255 255 255/.08);color:#fff;font:600 14px/16px var(--font)}

 /* ---- Galería: cabeceras de periodo y rejilla de 3 columnas casi a sangre ---- */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-galeria{padding:0 4px}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-dia{position:relative;display:flex;align-items:baseline;gap:8px;margin:0;padding:20px 12px 8px;background:none}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-dia span:not(.fsel-dia){color:#fff;font:600 14px/18px var(--font);letter-spacing:0}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-dia i{color:var(--hf-gris);font:400 12px/18px var(--font)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva:not([data-vista="lista"]) .bv-rejilla{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-marco{border-radius:8px;background:var(--hf-tarjeta);transition:transform .15s}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-med{object-fit:cover;background:var(--hf-tarjeta)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-tile:hover .bva-med{transform:none}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva:not([data-vista="lista"]) .bva-tile:active .bva-marco{transform:scale(.96)}
 /* Sin pie, sin estrella ni acciones flotantes (en táctil se quedaban «pegadas»). */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-fav{display:none!important}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva:not([data-vista="lista"]) .bva-pie{display:none}
 /* Vídeo: la duración abajo a la izquierda (nada más). */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva:not([data-vista="lista"]) .bva-info{left:6px;right:auto;bottom:6px;padding:0;background:none;opacity:1;pointer-events:none}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-info>:not(.bva-dur),html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-dur:empty{display:none}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-dur{padding:2px 6px;border-radius:6px;background:rgb(0 0 0/.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:500 11px/14px var(--font);font-variant-numeric:tabular-nums}
 /* Solo el ⋯: redondo de 28 con blur, arriba a la derecha (el toque, 44). */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva:not([data-vista="lista"]) .bva-acciones{top:4px;right:4px;bottom:auto;gap:0;opacity:1;transform:none}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-acciones>:not([data-bva-mas]){display:none!important}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on [data-bva-mas]{position:relative;width:28px;height:28px;min-width:0;min-height:0;padding:0;border:1px solid rgb(255 255 255/.1);border-radius:999px;background:rgb(0 0 0/.32);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on [data-bva-mas]::after{content:"";position:absolute;inset:-8px}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on [data-bva-mas] .ic{width:16px;height:16px}
 /* La casilla de la selección por lotes (solo en modo selección), arriba a la izquierda. */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .fsel{top:6px;left:6px;width:24px;height:24px;border-radius:7px;opacity:0}
 html body.studio-workbench.hf-movil.fselmodo:not(#hf):not(#hf) #pg-library.on .bva .fsel,html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .fsel:is([data-on="1"],:focus-visible){opacity:1}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-tar.fsel-on .bva-marco{box-shadow:0 0 0 2px var(--hf-lima)}
 /* Audio: su onda, más pequeña. */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-reproducir{width:36px;height:36px}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva-reproducir .ic{width:16px;height:16px}
 /* Lista: filas a 12 del borde. */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva[data-vista="lista"] .bva-galeria{padding:0 12px}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva[data-vista="lista"] .bv-dia{padding-inline:4px}
 /* Cargando: el esqueleto en la misma rejilla. */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-cargando{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:44px 4px 0}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-esq{border-radius:8px}

 /* ---- Vacíos (vacio() y proyectoVacio() reales): carpeta lima, título 16/24 y botón oscuro ---- */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-vacio{display:flex;flex-direction:column;align-items:center;max-width:300px;margin:0 auto;padding:16vh 16px 32px;text-align:center}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-icono{width:60px;height:48px;margin:0 0 16px;border:0;border-radius:0;box-shadow:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 48'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d1fe17'/%3E%3Cstop offset='1' stop-color='%23ecff9e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 1.5h15.2c1.3 0 2.5.6 3.3 1.6L26.6 7H55a5 5 0 0 1 5 5v6H0V6.5a5 5 0 0 1 5-5z' fill='%23829b19'/%3E%3Crect y='9' width='60' height='39' rx='5' fill='url(%23a)'/%3E%3Crect x='1' y='10' width='58' height='2' rx='1' fill='%23fff' opacity='.35'/%3E%3C/svg%3E") center/contain no-repeat}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-icono>svg{display:none}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-vacio h3{margin:0;color:#fff;font:600 16px/24px var(--font);letter-spacing:.01em}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-vacio p{margin:4px 0 0;color:var(--hf-gris);font:500 14px/20px var(--font)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-vacio-acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva :is(.bv-cta,.bv-cta2){display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;margin-top:24px;padding:0 12px;border:0;border-radius:10px;box-shadow:none;font:600 14px/20px var(--font);white-space:nowrap}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-cta{background:#23262a;color:#fff}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-cta2{background:rgb(255 255 255/.08);color:#fff}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-vacio-acciones :is(.bv-cta,.bv-cta2){margin-top:0}
 /* El destello de Higgsfield («✦ Generate») en los botones que llevan a crear. */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-cta:is([data-ir],[data-bva-crear-modo],[data-bv-crear-aqui])::before{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3.5c.4 3.6 2.4 5.6 6 6-3.6.4-5.6 2.4-6 6-.4-3.6-2.4-5.6-6-6 3.6-.4 5.6-2.4 6-6zM18 13.5c.2 1.8 1.2 2.8 3 3-1.8.2-2.8 1.2-3 3-.2-1.8-1.2-2.8-3-3 1.8-.2 2.8-1.2 3-3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3.5c.4 3.6 2.4 5.6 6 6-3.6.4-5.6 2.4-6 6-.4-3.6-2.4-5.6-6-6 3.6-.4 5.6-2.4 6-6zM18 13.5c.2 1.8 1.2 2.8 3 3-1.8.2-2.8 1.2-3 3-.2-1.8-1.2-2.8-3-3 1.8-.2 2.8-1.2 3-3z'/%3E%3C/svg%3E") center/contain no-repeat}
 /* «Ver más» y «Ver <mes>»: el botón translúcido del pie de las rejillas. */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-mas{display:flex;flex-direction:column;align-items:center;gap:8px;margin:24px 16px 8px;color:var(--hf-gris);font:400 14px/20px var(--font);text-align:center}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-mas p{margin:0}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-mas :is(.bv-cta,.bv-cta2){margin:0;padding:0 16px;background:rgb(255 255 255/.1);color:#fff;font:500 14px/16px var(--font);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}

 /* ---- Hojas «Ver y ordenar» y de acciones del ⋯ ---- */
 .hfc-hoja__cuerpo{flex:1;min-height:0;display:grid;align-content:start;gap:2px;overflow:auto;overscroll-behavior:contain}
 button.hfc-ajuste{width:100%;padding:0;border:0;background:none;font:inherit;text-align:left}
 .hfc-ajuste{border-radius:12px;-webkit-tap-highlight-color:transparent}
 .hfc-ajuste .hf-ajuste__nombre{min-width:0}
 .hfc-ajuste .hf-ajuste__valor{max-width:52%;overflow:hidden;color:rgb(255 255 255/.7);white-space:nowrap;text-overflow:ellipsis}
 .hfc-ajuste:focus-within,.hfc-ajuste:focus-visible{outline:2px solid var(--hf-lima);outline-offset:-2px}
 .hfc-insignia{min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:var(--hf-lima);color:#131517!important;font:600 12px/20px var(--font)!important;text-align:center}
 .hfc-accion{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 4px;border:0;border-radius:12px;background:none;color:#fff;font:500 16px/20px var(--font);text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
 .hfc-accion+.hfc-accion{border-top:1px solid rgb(255 255 255/.05);border-radius:0}
 .hfc-accion .ic{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:#a3a3a3}
 .hfc-accion span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .hfc-accion:active{background:rgb(255 255 255/.06)}
 .hfc-accion:focus-visible{outline:2px solid var(--hf-lima);outline-offset:-2px}
 .hfc-accion.is-peligro,.hfc-accion.is-peligro .ic{color:#ff6b6b}
 .hfc-hoja .hf-hoja__cab h2{max-width:calc(100% - 88px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

 /* ---- Ficha (#bvVisor), a pantalla completa como hoy: botones de 44 con radio 12 y «Descargar» en el lima 3D ---- */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #bvVisor.bv-visor{background:#0b0b0b}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #bvVisor .bv-vinfo{gap:16px;border:0;border-radius:16px 16px 0 0;background:#131313}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #bvVisor .bva-ficha-titulo b{font:600 16px/24px var(--font)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #bvVisor .bva-ficha-titulo small{color:var(--hf-gris);font:400 12px/16px var(--font)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #bvVisor .bv-vtop .bv-b[data-cerrar]{width:40px;height:40px;min-width:40px;min-height:40px;border:1px solid rgb(255 255 255/.1);border-radius:999px;background:rgb(0 0 0/.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #bvVisor .bva-nav{width:40px;height:40px;border:1px solid rgb(255 255 255/.1);background:rgb(0 0 0/.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #bvVisor .bv-vprompt{border-radius:12px;background:rgb(255 255 255/.04);font:400 14px/20px var(--font)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #bvVisor .bva-mini{min-height:32px;border:0;border-radius:999px;background:rgb(255 255 255/.08);color:#fff}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #bvVisor .bv-vdl>div{border-top-color:rgb(255 255 255/.06)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #bvVisor .bv-vacts :is(.bv-cta,.bv-cta2){min-height:44px;border:0;border-radius:12px;background:rgb(255 255 255/.08);color:#fff;font:600 14px/16px var(--font)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #bvVisor .bva-vmini{display:flex;flex-wrap:wrap;gap:8px}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #bvVisor .bva-icono-accion{flex:1 1 0;flex-direction:row;gap:6px;min-width:0;min-height:44px;padding:0 8px;border:0;border-radius:12px;background:rgb(255 255 255/.08);color:#fff;font:600 13px/16px var(--font);white-space:nowrap}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #bvVisor .bva-icono-accion.bva-peligro{color:#ff6b6b}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #bvVisor .bva-vmini>a.bva-icono-accion:first-child{flex-basis:100%;min-height:48px;padding:8px 12px 10px;background-color:var(--hf-lima);background-image:linear-gradient(180deg,rgb(255 255 20/0),var(--hf-brillo));color:#131517;font:600 14px/16px var(--font);box-shadow:inset 0 -3px 0 var(--hf-labio),0 6px 4px rgb(0 0 0/.25),0 32px 24px rgb(0 0 0/.15)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #bvVisor .bva-vmini>a.bva-icono-accion:first-child:active{transform:scale(.98);filter:brightness(.95)}

 /* ---- Visitante: pantalla 'creaciones' (las carpetas y el vacío de Higgsfield, centrado) ---- */
 .hf-movil .hf-pantalla.hfc:not([hidden]){display:flex;flex-direction:column}
 .hfc .hfc-pildoras{flex:none;padding:4px 12px 12px}
 .hfc-vacio{flex:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 16px 49px}
 .hfc .hfx-vacio-grande{max-width:300px;padding:0;gap:0}
 .hfc .hfx-vacio-grande__ic{margin:0 0 16px}
 html body.hf-movil:not(#hf):not(#hf) .hfc .hfx-vacio-grande h2{max-width:260px}
 .hfc .hfx-vacio-grande p{max-width:260px;margin:4px 0 0;font:500 14px/20px var(--font)}
 .hfc-vacio__botones{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px}
 .hfc-vacio__botones .hfx-cta{min-height:40px}
 .hfc-vacio__botones .hfx-cta--blanco{padding:0 20px 2px;font:600 14px/20px var(--font)}
 .hfc-vacio__botones .hfx-cta--oscuro .ic{width:20px;height:20px}
}

/* ============ Comunidad del Estudio móvil (Higgsfield «/community», 8-oct-2026) ============
   Módulo: assets/js/estudio-movil-comunidad.js (pantalla 'comunidad' del
   registro común, cargada en diferido). Lienzo #020202 (bloque común).
   Medidas de su web móvil (capturas/hf-ref/comunidad-*): píldoras de 33
   pegadas arriba, héroe a sangre de 390×302 con el texto debajo y barra de
   progreso de 2px, cabeceras 18/20 con «Ver todo ›», portadas 16:9 de 173×97
   con radio 12 y borde blanco 10 %, mosaico de 3 columnas casi a sangre
   (márgenes 4, gap 6, radio 8) y el pie que se funde. Solo lo que existe en
   Cocuyo: series, momentos de nuestras películas, Aparece, ayuda y redes
   (nada de feed, autores ni contadores). comunidad.html no cambia. */
.hfco-visor{display:none}
@media(max-width:900px){
 /* Abajo, sitio para que la última fila no quede bajo el botón de ayuda (.cchat-btn, con sesión). */
 .hf-movil .hf-pantalla.hfco:not([hidden]){padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
 /* Píldoras (las de Explorar) sobre el lienzo, con el relleno de Higgsfield (4 12 12). */
 .hfco .hfx-chips{padding:4px 12px 12px;background:var(--hf-lienzo)}
 .hfco .hfx-chip{-webkit-tap-highlight-color:transparent}

 /* ---- Héroe: 2 historias apiladas; la actual se ve y la barra se llena ---- */
 .hfco-heroe{position:relative}
 .hfco-heroe__pista{display:grid;touch-action:pan-y}
 /* Cada historia en columna con sus acciones abajo: las dos comparten celda (mide lo
    que la más alta) y, si el texto de una es más corto, el aire queda entre su texto y
    su botón, no entre el botón y la barra de progreso (106 px en alemán a 360). */
 .hfco-historia{grid-area:1/1;display:flex;flex-direction:column;min-width:0;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
 .hfco-historia.is-on{opacity:1;visibility:visible;transition:opacity .5s ease}
 .hfco-historia__medio{position:relative;display:block;flex:none;aspect-ratio:390/302;overflow:hidden;background:var(--hf-tarjeta)}
 .hfco-historia__medio :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 .hfco-historia__medio::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(2 2 2/0) 52%,var(--hf-lienzo) 100%);pointer-events:none}
 .hfco-historia.is-on .hfco-historia__medio img{animation:hfco-zoom 14s ease-out both}
 @keyframes hfco-zoom{from{transform:scale(1)}to{transform:scale(1.08)}}
 /* En columna el margen −4 del título ya no se funde con el del bloque: −10 + −4 = el −14 de antes. */
 .hfco-historia__txt{position:relative;flex:1;display:flex;flex-direction:column;margin-top:-10px;padding:0 16px}
 /* Título 32/36 en MAYÚSCULAS con el degradado de blanco a blanco 70 %. El relleno de 4
    (compensado con el margen) deja dentro del fondo las tildes de las mayúsculas. */
 html body.hf-movil:not(#hf):not(#hf) .hfco-h1{margin:-4px 0;padding:4px 0;color:#fff;font:800 32px/36px var(--font);letter-spacing:-.03em;text-transform:uppercase;overflow-wrap:anywhere;background:linear-gradient(180deg,#fff,rgb(255 255 255/.7));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
 .hfco-historia__txt p{margin:12px 0 0;color:var(--hf-gris);font:400 14px/20px var(--font)}
 .hfco-historia__acc{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:auto;padding-top:24px}
 /* Botón del héroe: el lima 3D en 40 de alto y radio 12 («Watch the projects»). */
 .hfco .hfco-cta-heroe{min-height:40px;padding:0 16px 3px;border-radius:12px;letter-spacing:-.4px}
 .hfco .hfco-cta-heroe .ic{width:16px;height:16px}
 .hfco-progreso{display:flex;align-items:center;gap:8px;padding:12px 16px 0}
 .hfco-seg{position:relative;flex:1;height:24px;padding:0;border:0;background:none;cursor:pointer}
 .hfco-seg::before,.hfco-seg i{content:"";position:absolute;left:0;top:11px;height:2px;border-radius:999px}
 .hfco-seg::before{right:0;background:rgb(255 255 255/.2)}
 .hfco-seg i{width:0;background:linear-gradient(90deg,rgb(255 255 255/.1),rgb(255 255 255/.8))}
 .hfco-seg.is-hecho i{width:100%}
 .hfco-seg.is-on i{animation:hfco-llena var(--hfco-dur,7s) linear forwards}
 .hfco-heroe.is-pausa .hfco-seg.is-on i{animation-play-state:paused}
 @keyframes hfco-llena{from{width:0}to{width:100%}}
 .hfco .hfco-progreso .hfco-seg:focus-visible{outline-offset:-2px;border-radius:6px}
 /* Pausar/Reanudar (WCAG 2.2.2), a la derecha de los segmentos: 24×24, icono de 14. */
 .hfco-pausa{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-inline-end:-4px;padding:0;border:0;border-radius:999px;background:none;color:rgb(255 255 255/.8);cursor:pointer;-webkit-tap-highlight-color:transparent}
 .hfco .hfco-pausa .ic{width:14px;height:14px}
 .hfco-pausa .hfco-ic-reanudar,.hfco-pausa[data-parado] .hfco-ic-pausa{display:none}
 .hfco-pausa[data-parado] .hfco-ic-reanudar{display:block}

 /* ---- Secciones: h2 18/20 y «Ver todo ›» a la derecha ---- */
 .hfco-sec{padding:48px 0 0}
 .hfco-cuerpo>.hfco-sec:first-child{padding-top:8px}
 .hfco-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:0 16px 16px}
 .hfco-cab__txt{min-width:0}
 html body.hf-movil:not(#hf):not(#hf) .hfco-cab h2{margin:0;color:#fff;font:600 18px/20px var(--font);letter-spacing:-.4px}
 .hfco-cab p{margin:6px 0 0;color:var(--hf-gris);font:400 14px/20px var(--font)}
 .hfco-todo{flex:none;display:inline-flex;align-items:center;gap:4px;height:32px;margin:-6px 0;padding:6px 4px 6px 8px;border:0;border-radius:8px;background:none;color:#fff;font:500 14px/16px var(--font);white-space:nowrap;cursor:pointer}
 .hfco .hfco-todo .ic{width:16px;height:16px}
 .hfco-sub{margin:24px 16px 8px;color:var(--hf-gris);font:500 12px/16px var(--font);letter-spacing:.06em;text-transform:uppercase}

 /* ---- Series: rejilla de 2 de portadas 16:9 (173×97, radio 12, borde blanco 10 %) ---- */
 .hfco-series{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;margin:0;padding:0 16px;list-style:none}
 .hfco-serie{display:grid;gap:8px;color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .2s cubic-bezier(.4,0,.2,1)}
 .hfco-serie:active{transform:scale(.96)}
 .hfco-serie__medio{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:var(--hf-tarjeta)}
 .hfco-serie__medio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
 .hfco-serie__medio::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(255 255 255/.1);pointer-events:none}
 @media(hover:hover){.hfco-serie:hover .hfco-serie__medio img{transform:scale(1.02)}}
 .hfco-serie__nom{display:grid;gap:2px;min-width:0}
 .hfco-serie__nom b{overflow:hidden;font:500 14px/16px var(--font);white-space:nowrap;text-overflow:ellipsis}
 .hfco-serie__nom small{display:-webkit-box;overflow:hidden;color:var(--hf-gris);font:400 12px/16px var(--font);-webkit-line-clamp:2;-webkit-box-orient:vertical}

 /* ---- Hecho con Cocuyo: mosaico de 3 columnas casi a sangre (márgenes 4, gap 6, radio 8) ---- */
 .hfco-mosaico{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:6px;padding:0 4px}
 .hfco-col{display:grid;gap:6px;min-width:0}
 /* La proporción de cada pieza la pone el módulo (style), por columna. */
 .hfco .hfco-mosaico .hfx-pieza{margin:0;border-radius:8px;background:var(--hf-tarjeta);transition:transform .2s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent}
 .hfco .hfco-mosaico .hfx-pieza:active{transform:scale(.96)}
 .hfco .hfx-fundido{margin-top:-128px;pointer-events:none}
 .hfco .hfx-fundido>button{pointer-events:auto}
 .hfco-acciones{display:grid;gap:8px;padding:16px 16px 0}
 .hfco-acciones--centro{justify-items:center}
 .hfco-nota{margin:0;color:var(--hf-gris);font:400 12px/16px var(--font);text-align:center}
 /* Botón translúcido (blanco 10 %, blur 40), como «Explore all …». */
 .hfco-boton{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:10px;background:rgb(255 255 255/.1);color:#fff;font:500 14px/16px var(--font);text-decoration:none;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}
 .hfco .hfco-boton .ic,.hfco .hfx-cta .ic{width:16px;height:16px}

 /* ---- Aparece en Cocuyo: tarjeta con el teaser arriba, 4 pasos y el lima ---- */
 .hfco-aparece{margin:0 16px;overflow:hidden;border:1px solid rgb(255 255 255/.06);border-radius:16px;background:#131517}
 .hfco-aparece__medio{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--hf-tarjeta)}
 .hfco-aparece__medio video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 .hfco-aparece__medio::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(19 21 23/0) 55%,#131517 100%);pointer-events:none}
 .hfco-aparece__medio .hfx-sello{position:absolute;left:12px;top:12px;z-index:1}
 .hfco-aparece__txt{position:relative;margin-top:-20px;padding:0 16px 16px}
 html body.hf-movil:not(#hf):not(#hf) .hfco-aparece h3{margin:0;color:#fff;font:800 22px/26px var(--font);letter-spacing:-.02em;text-transform:uppercase;overflow-wrap:anywhere}
 .hfco-aparece__txt>p{margin:8px 0 0;color:var(--hf-gris);font:400 14px/20px var(--font)}
 .hfco-pasos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0;padding:0;list-style:none}
 .hfco-pasos li{display:grid;align-content:start;gap:4px;min-width:0;padding:12px;border-radius:12px;background:rgb(255 255 255/.04)}
 .hfco-pasos i{color:var(--hf-lima);font:italic 700 12px/16px var(--font)}
 .hfco-pasos b{font:600 14px/18px var(--font)}
 .hfco-pasos span{color:var(--hf-gris);font:400 12px/16px var(--font)}

 /* ---- Listas (ayuda, redes y correo): filas de 64 en una tarjeta ---- */
 .hfco-lista{margin:0 16px;padding:0;list-style:none;overflow:hidden;border-radius:16px;background:rgb(255 255 255/.04)}
 .hfco-lista>li+li{border-top:1px solid rgb(255 255 255/.06)}
 /* La lista recorta (overflow:hidden y radio 16): el foco va por dentro de la fila y la
    primera y la última llevan las esquinas de la tarjeta (antes no se veía en el chat ni
    en el correo, solos en su lista, y de las redes solo asomaba una raya). */
 .hfco-lista>li:first-child>.hfco-fila{border-top-left-radius:16px;border-top-right-radius:16px}
 .hfco-lista>li:last-child>.hfco-fila{border-bottom-left-radius:16px;border-bottom-right-radius:16px}
 .hfco .hfco-lista .hfco-fila:focus-visible{outline:2px solid var(--hf-lima);outline-offset:-2px}
 .hfco-lista--correo{margin-top:24px}
 .hfco-fila{display:flex;align-items:center;gap:12px;box-sizing:border-box;width:100%;min-height:64px;margin:0;padding:12px 14px 12px 12px;border:0;background:none;color:#fff;text-align:left;text-decoration:none;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
 .hfco-fila--dato{cursor:default}
 a.hfco-fila:active,button.hfco-fila:active{background:rgb(255 255 255/.04)}
 .hfco-fila__ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--hf-tarjeta);color:#fff}
 .hfco .hfco-fila__ic .ic{width:20px;height:20px}
 .hfco-fila--ayuda .hfco-fila__ic{background-color:var(--hf-lima);background-image:linear-gradient(180deg,rgb(255 255 20/0),var(--hf-brillo));color:#131517;box-shadow:inset 0 -2px 0 var(--hf-labio)}
 .hfco-fila__txt{flex:1;min-width:0;display:grid;gap:2px}
 .hfco-fila__txt b{overflow:hidden;font:500 14px/20px var(--font);white-space:nowrap;text-overflow:ellipsis}
 .hfco-fila__txt small{color:var(--hf-gris);font:400 12px/16px var(--font);overflow-wrap:anywhere}
 .hfco .hfco-fila>.ic{flex:none;width:16px;height:16px;color:#5c5c5c}

 /* ---- Visor de un momento: a pantalla completa, con «Ver las series en YouTube» ---- */
 .hfco-visor{position:fixed;inset:0;box-sizing:border-box;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;border:0;background:#000;color:#fff;font-family:var(--font);overflow:hidden}
 .hfco-visor[open]{display:flex;flex-direction:column;animation:hfco-aparece .2s ease-out}
 @keyframes hfco-aparece{from{opacity:0}to{opacity:1}}
 .hfco-visor::backdrop{background:#000}
 .hfco-visor .ic{width:20px;height:20px}
 .hfco-visor__cab{flex:none;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:calc(56px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 10px 0 16px}
 .hfco-visor__n{color:var(--hf-gris);font:500 14px/20px var(--font);font-variant-numeric:tabular-nums}
 .hfco-visor__x{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:999px;background:rgb(255 255 255/.08);color:#fff;cursor:pointer}
 .hfco-visor__medio{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 16px;touch-action:pan-y}
 .hfco-visor__medio video{display:block;max-width:100%;max-height:100%;aspect-ratio:3/4;border-radius:12px;background:#111;object-fit:cover}
 .hfco-visor__paso{position:absolute;top:50%;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:999px;background:rgb(0 0 0/.45);color:#fff;transform:translateY(-50%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer}
 .hfco-visor__paso[data-hfco-paso="-1"]{left:24px}
 .hfco-visor__paso[data-hfco-paso="1"]{right:24px}
 .hfco-visor__pie{flex:none;display:grid;gap:4px;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))}
 .hfco-visor__t{margin:0;font:600 16px/20px var(--font)}
 .hfco-visor__s{margin:0 0 12px;color:var(--hf-gris);font:400 14px/20px var(--font)}
 .hfco-visor :is(button,a):focus-visible{outline:2px solid var(--hf-lima);outline-offset:2px}
 @media(prefers-reduced-motion:reduce){
  .hfco-historia,.hfco-historia.is-on{transition:none}
  .hfco-historia.is-on .hfco-historia__medio img,.hfco-visor[open]{animation:none}
  .hfco-seg.is-on i{animation:none;width:100%}
  .hfco-pausa{display:none}
  .hfco-serie,.hfco .hfco-mosaico .hfx-pieza{transition:none}
 }
}

/* ============ Iconos 3D del Estudio móvil (9-oct-2026) ============
   assets/media/iconos/<id>.webp: 192×192, ≤ 5 KB, con su fondo #0b0b0b ya
   puesto. Se pintan como azulejos redondeados y son decorativos (alt vacío:
   el texto de al lado lo dice todo). Si uno no carga, el JS lo quita
   (estudio-movil-pantallas.js) y, donde había un icono de trazo, vuelve ese.
   Útiles y Apps: cabeceras de categoría y títulos de sección; Comunidad:
   filas del canal, ayuda, correo y pasos; Conectores: ideas, control y el
   vacío de Mis conexiones; Precios: cada plan; vacíos de búsqueda y de la
   Bóveda (Favoritos, Subidos y filtros). Las pestañas, el menú ☰, las
   portadas de Apps y el carrusel de Crear no cambian. */
@media(max-width:900px){
 /* El azulejo es el fondo del propio webp (casi #0b0b0b): sobre los lienzos
    #0b0b0b (Útiles, ayuda de Comunidad) o #080809 (Conectores) no se veía y
    quedaba el dibujo suelto; en Apps (#131517) sí. Un filo claro de 1 px,
    por dentro (outline sigue el redondeo y no lo recorta el contenedor), lo
    marca igual en todas las pantallas. */
 .hfx-ic3d{display:block;flex:none;box-sizing:border-box;object-fit:cover;border-radius:22%;background:#0b0b0b;outline:1px solid rgb(255 255 255/.09);outline-offset:-1px}
 /* Cabecera grande con icono: el icono encima del título (el título no pierde
    ancho) y «Ver todo» a la altura de la última línea del título. */
 .hfx-cabeza--grande.hfx-cabeza--ic{align-items:flex-end}
 .hfx-cabeza--ic .hfx-cabeza__txt{flex:1}
 .hfx-cabeza__txt>.hfx-ic3d{width:44px;height:44px;margin:0 0 12px}
 .hfx-cabeza--ic:has(.hfx-cabeza__txt>p)>.hfx-ver-todo{margin-bottom:20px}
 /* Útiles: el dato contado lleva el maletín de Útiles. */
 .hfu .hfu-dato{padding-inline-start:6px}
 .hfu-dato>.hfx-ic3d{width:28px;height:28px;margin:-4px 0;border-radius:8px}
 /* Apps: título de sector u ocasión con su icono de 32. */
 html body.hf-movil:not(#hf):not(#hf) .hfa-bloque__t{display:flex;align-items:center;gap:10px}
 .hfa-bloque__t>.hfx-ic3d{width:32px;height:32px;border-radius:8px}
 /* Agente y «Muy pronto»: el icono 3D tapa el de trazo (que queda de respaldo). */
 .hfa-arte--3d{position:relative;overflow:hidden}
 .hfa-arte--3d>.hfx-ic3d{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit}
 .hfa-pronto>.hfa-arte--3d{opacity:.85}
 /* Vacíos de búsqueda (Útiles y Apps): el icono encima de la frase. */
 .hfx-vacio>.hfx-vacio__ic{width:72px;height:72px;margin:0 auto 12px;border-radius:18px}
 /* Comunidad: el icono 3D llena el azulejo de 40 (el de trazo queda debajo, de respaldo). */
 .hfco-fila__ic--3d{position:relative;overflow:hidden}
 .hfco-fila__ic--3d>.hfx-ic3d{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit}
 .hfco-fila__ic--3d:has(>.hfx-ic3d){background:#0b0b0b}
 .hfco-fila--ayuda .hfco-fila__ic--3d:has(>.hfx-ic3d){background-image:none;box-shadow:none}
 /* Pasos de «Aparece»: número a un lado, icono al otro. */
 .hfco-paso__cab{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;margin-bottom:4px}
 .hfco-paso__cab>.hfx-ic3d{width:36px;height:36px;border-radius:9px}
 /* Conectores: ideas (32) y control (40); el vacío de Mis conexiones, por CSS. */
 .hfcn-idea__cab>.hfx-ic3d{width:32px;height:32px;border-radius:8px}
 .hfcn-control li{align-items:center}
 .hfcn-control li>.hfx-ic3d{width:40px;height:40px;border-radius:10px}
 .hfcn-vacio::before{content:"";display:block;width:56px;height:56px;margin:4px 0 12px;border-radius:14px;background:#0b0b0b url("/assets/media/iconos/conector-vacio-conexiones.webp") center/cover no-repeat;box-shadow:inset 0 0 0 1px rgb(255 255 255/.09)}
 /* Bóveda con cuenta: los vacíos de Favoritos (estrella), Subidos (subir) y
    «Nada por aquí» (lupa) llevan su icono 3D en lugar de la carpeta; se
    reconocen por el icono que elige estudio-4.js (assetIcon fav, upload y
    search, ocultos en el teléfono). Los demás siguen con la carpeta de Higgsfield. */
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-icono:is(:has(path[d^="m12 3 2.8"]),:has(path[d^="M12 16V3"]),:has(circle[cx="11"][cy="11"][r="7"])){width:72px;height:72px;border-radius:18px;background-color:#0b0b0b;background-position:center;background-size:cover;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgb(255 255 255/.09)}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-icono:has(path[d^="m12 3 2.8"]){background-image:url("/assets/media/iconos/vacio-favoritos.webp")}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-icono:has(path[d^="M12 16V3"]){background-image:url("/assets/media/iconos/vacio-subidos.webp")}
 html body.studio-workbench.hf-movil:not(#hf):not(#hf) #pg-library.on .bva .bv-icono:has(circle[cx="11"][cy="11"][r="7"]){background-image:url("/assets/media/iconos/vacio-busqueda.webp")}
}

/* ============ Útiles y Apps en el móvil como la app (Iván, 11-oct-2026) ============
   «Útiles y Apps en el móvil como la app»: las pantallas #hfUtiles y #hfApps
   de Crear copian en el teléfono (hasta 767 px) los hubs públicos /es/utiles/
   y /es/apps/ que el dueño aprobó (utiles-portada.css y apps-portada.css,
   bloque «Teléfono: el modelo de la app»), con sus mismas medidas:
   · Sin héroe: el título va en la cabecera («Útiles gratis», «Apps»; ver
     logo() en estudio-movil-apps.js).
   · Una fila fija bajo la cabecera (4 + 33 + 10): la lupa redonda de 33 y,
     a su lado, las pastillas de 33 (12 px w500, relleno 14, hueco 8). La
     activa en blanco con letra negra. Al tocar la lupa (su <label> enfoca el
     campo) el campo ocupa la fila y las pastillas se apartan; vacío y sin
     foco, vuelve la lupa. Todo con :focus-within y :placeholder-shown, sin
     JavaScript; la búsqueda sigue en buscadorLinea() (alBuscar).
     La pantalla pasa a flex con salto de línea: así la lupa y la caja de las
     pastillas, hermanas en el HTML de siempre, quedan en una sola fila y las
     dos se pegan arriba (sticky, con la pantalla de contenedor). El fondo de
     la fila lo pinta ::before, también pegado, aunque las pastillas se
     escondan al buscar.
   · Cada categoría: título 16/600 sin mayúsculas ni icono, su frase de 12
     debajo y «Ver todo ›» de 13 a la derecha del título.
   · Iconos y portadas cuadrados (radio 14) con el nombre debajo (13 w500),
     sin frase, GRATIS, «Cuenta gratis para descargar», › ni «Usar»: en
     «Todos»/«Todas», un carril (Útiles de 100, Apps de 112); en una
     categoría o al buscar, una rejilla de tres. Los nombres nunca se cortan
     con «…»: pasan a otra línea.
   Las tarjetas y las filas siguen siendo los mismos enlaces y botones (su
   destino y su clic no cambian). Colores solo con variables. Desde 768 px
   (y en el escritorio) nada cambia. */
@media(max-width:767px){
 /* Lienzo de Apps: el de los hubs y Útiles (antes #131517). */
 html body.studio-workbench.hf-movil[data-hf-pantalla="apps"]:not(#hf){--hf-lienzo:var(--f-cajon-fondo)}
 /* La pantalla en flex: lupa y pastillas en la misma fila. scroll-padding-top:
    la fila (47) y 8 de aire, para que el foco nunca quede debajo. */
 html body.hf-movil:not(#hf) .hf-pantalla:is(.hfu,.hfa):not([hidden]){display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;scroll-padding-top:55px}
 html body.hf-movil:not(#hf) .hf-pantalla:is(.hfu,.hfa):not([hidden])::before{content:"";order:-1;position:sticky;top:0;z-index:3;flex:0 0 100%;height:47px;margin-bottom:-47px;background:var(--hf-lienzo);pointer-events:none}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa)>*{flex:0 0 100%;min-width:0;max-width:100%}
 html body.hf-movil:not(#hf) :is(.hfu-heroe,.hfa-heroe){display:none}
 html body.hf-movil:not(#hf) :is(.hfu-cuerpo,.hfa-cuerpo){padding:0}

 /* ---- Lupa: 33 redonda, blanco 5 % (12 del borde, como la ☰) ---- */
 html body.hf-movil:not(#hf) :is(.hfu,.hfa)>.hfx-buscar-linea{position:sticky;top:4px;z-index:5;flex:0 0 auto;justify-content:center;gap:0;width:33px;height:33px;margin-block:4px 10px;margin-inline:12px 8px;padding:0;border:0;border-radius:999px;background:color-mix(in srgb,var(--blanco-luz) 5%,transparent);box-shadow:none;color:var(--f-texto);cursor:pointer}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa)>.hfx-buscar-linea label{flex:1;justify-content:center;gap:0;height:100%;color:inherit;cursor:inherit}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa)>.hfx-buscar-linea .ic{flex:none;width:16px;height:16px}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa)>.hfx-buscar-linea input{flex:0 0 0;width:0;height:31px;opacity:0;font-size:16px}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa)>.hfx-buscar-linea__x,html body.hf-movil:not(#hf) :is(.hfu,.hfa) .hfx-buscar-linea__x{width:24px;height:24px;background:color-mix(in srgb,var(--blanco-luz) 8%,transparent);color:var(--f-texto)}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa) .hfx-buscar-linea__x .ic{width:14px;height:14px}
 /* Abierta (con el foco o con texto): ocupa la fila, hasta 16 del borde. */
 html body.hf-movil:not(#hf) :is(.hfu,.hfa)>.hfx-buscar-linea:is(:focus-within,:has(input:not(:placeholder-shown))){flex:1 1 auto;justify-content:flex-start;gap:8px;width:auto;margin-inline-end:16px;padding-inline:12px 4px;box-shadow:inset 0 0 0 1px var(--f-linea-fuerte);cursor:text}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa)>.hfx-buscar-linea:is(:focus-within,:has(input:not(:placeholder-shown))) label{justify-content:flex-start;gap:8px}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa)>.hfx-buscar-linea:is(:focus-within,:has(input:not(:placeholder-shown))) input{flex:1 1 auto;width:auto;opacity:1}
 /* Con el campo abierto, las pastillas se apartan (con texto ya las esconde el
    módulo: pest.el.hidden). */
 html body.hf-movil:not(#hf) :is(.hfu,.hfa):has(>.hfx-buscar-linea:focus-within)>.hfx-pestanas-caja{display:none}

 /* ---- Pastillas: 33, 12 w500, relleno 14, hueco 8; la activa blanca ---- */
 html body.hf-movil:not(#hf) :is(.hfu,.hfa)>.hfx-pestanas-caja{position:sticky;top:0;z-index:4;flex:1 1 0;padding:4px 0 10px;background:none}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa)>.hfx-pestanas-caja::after{content:none}
 /* Llegan hasta el borde de la pantalla y se deslizan; el lado con pastillas
    fuera se desvanece como en los hubs (is-ini / sin is-final, de pestanas()).
    En la máscara solo cuenta la opacidad: cualquier token opaco vale. */
 html body.hf-movil:not(#hf) :is(.hfu,.hfa) .hfx-pestanas{--hfx-ia:0px;--hfx-ib:0px;--hfx-fa:0px;--hfx-fb:0px;gap:8px;height:33px;padding:0;padding-inline-end:16px;border-radius:0;background:none;scroll-padding-inline:24px;overscroll-behavior-inline:contain;-webkit-mask-image:linear-gradient(to right,transparent var(--hfx-ia),var(--negro-abismo) var(--hfx-ib),var(--negro-abismo) calc(100% - var(--hfx-fb)),transparent calc(100% - var(--hfx-fa)));mask-image:linear-gradient(to right,transparent var(--hfx-ia),var(--negro-abismo) var(--hfx-ib),var(--negro-abismo) calc(100% - var(--hfx-fb)),transparent calc(100% - var(--hfx-fa)))}
 html[dir="rtl"] body.hf-movil:not(#hf) :is(.hfu,.hfa) .hfx-pestanas{-webkit-mask-image:linear-gradient(to left,transparent var(--hfx-ia),var(--negro-abismo) var(--hfx-ib),var(--negro-abismo) calc(100% - var(--hfx-fb)),transparent calc(100% - var(--hfx-fa)));mask-image:linear-gradient(to left,transparent var(--hfx-ia),var(--negro-abismo) var(--hfx-ib),var(--negro-abismo) calc(100% - var(--hfx-fb)),transparent calc(100% - var(--hfx-fa)))}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa) .hfx-pestanas-caja.is-ini .hfx-pestanas{--hfx-ib:20px}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa) .hfx-pestanas-caja:not(.is-final) .hfx-pestanas{--hfx-fa:12px;--hfx-fb:40px}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa) .hfx-pestana{height:33px;padding:0 14px;border-radius:999px;background:color-mix(in srgb,var(--blanco-luz) 5%,transparent);box-shadow:none;color:var(--f-texto);font:500 12px/1 var(--font);letter-spacing:-.08px}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa) .hfx-pestana[aria-selected="true"]{background:var(--f-texto);color:var(--f-fondo)}

 /* ---- Categorías: título 16/600, frase de 12 debajo y «Ver todo ›» de 13 ---- */
 html body.hf-movil:not(#hf) :is(.hfu-sec,.hfa-sec){margin:0;padding-top:20px}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa) .hfx-cabeza--grande{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:0;margin:0 0 12px;padding:0 16px}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa) .hfx-cabeza--grande>.hfx-cabeza__txt{display:contents}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa) .hfx-cabeza__txt>.hfx-ic3d{display:none}
 html body.hf-movil:not(#hf):not(#hf) :is(.hfu,.hfa) .hfx-cabeza--grande h2{grid-area:1/1;margin:0;color:var(--f-texto);font:600 16px/1.3 var(--font);letter-spacing:-.01em;text-transform:none;overflow-wrap:break-word}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa) .hfx-cabeza--grande p{grid-column:1/-1;grid-row:2;margin:0;color:color-mix(in srgb,var(--blanco-luz) 60%,var(--negro-abismo));font:400 12px/1.4 var(--font)}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa) .hfx-cabeza--grande>.hfx-ver-todo{grid-area:1/2;gap:4px;min-height:32px;margin:0;margin-inline-end:-10px;padding:0 10px;color:var(--f-texto-2);font:500 13px/1 var(--font);letter-spacing:-.08px}
 html body.hf-movil:not(#hf) :is(.hfu,.hfa) .hfx-ver-todo .ic{flex:none;width:14px;height:14px}

 /* ---- Útiles: icono cuadrado (radio 14) y el nombre debajo ---- */
 html body.hf-movil:not(#hf) .hfu .hfu-filas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;padding:0 16px}
 /* «Todos»: un carril de iconos de 100 que se desliza (4 de aire arriba y
    abajo para el anillo del foco, que el carril recortaría). */
 html body.hf-movil:not(#hf) .hfu-cuerpo[data-vista="todos"] .hfu-filas{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:100px;margin:-4px 0;padding:4px 16px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none}
 html body.hf-movil:not(#hf) .hfu-cuerpo[data-vista="todos"] .hfu-filas::-webkit-scrollbar{display:none}
 html body.hf-movil:not(#hf) .hfu .hfu-filas>li{min-width:0;scroll-snap-align:start}
 html body.hf-movil:not(#hf) .hfu .hfx-fila{flex-direction:column;align-items:stretch;gap:0;min-height:0;padding:0;border-radius:14px;color:var(--f-texto);text-align:start}
 html body.hf-movil:not(#hf) .hfu .hfx-fila__img{width:100%;height:auto;aspect-ratio:1;margin:0 0 6px;border-radius:14px;background:var(--negro-abismo)}
 html body.hf-movil:not(#hf) .hfu .hfx-fila__img img{object-fit:cover;background:none}
 html body.hf-movil:not(#hf) .hfu .hfx-fila__txt{display:block}
 html body.hf-movil:not(#hf) .hfu .hfx-fila__nom{display:block;overflow:visible;-webkit-line-clamp:none;font:500 13px/1.3 var(--font)}
 html body.hf-movil:not(#hf) .hfu .hfx-fila__nom b{display:inline;margin:0;overflow:visible;font:inherit;letter-spacing:0;white-space:normal;text-overflow:clip;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
 html body.hf-movil:not(#hf) .hfu .hfx-fila :is(.hfx-ins,small),html body.hf-movil:not(#hf) .hfu .hfx-fila>.ic,html body.hf-movil:not(#hf) .hfu .hfu-dato{display:none}
 html body.hf-movil:not(#hf) .hfu-sec--busqueda{margin-top:0}

 /* ---- Apps: portada cuadrada (radio 14) y el nombre debajo ---- */
 /* «Todas»: un carril de tarjetas de 100, como Útiles (asoma la siguiente),
    también la primera (sin «Usar»). */
 html body.hf-movil:not(#hf) .hfa .hfa-carril{gap:10px;margin:-4px 0;padding:4px 16px;scroll-padding-inline:16px;overscroll-behavior-inline:contain}
 html body.hf-movil:not(#hf) .hfa .hfa-app{flex:0 0 100px;gap:0;width:100px;padding:0;border:0;border-radius:14px;background:none;box-shadow:none;color:var(--f-texto);text-align:start;overflow:visible}
 html body.hf-movil:not(#hf) .hfa :is(.hfa-app,.hfa-ficha) .hfx-app__medio{aspect-ratio:1;margin:0 0 6px;border-radius:14px;background:var(--f-sup-3)}
 html body.hf-movil:not(#hf) .hfa :is(.hfa-app,.hfa-ficha) .hfa-app__cuerpo{flex:none;gap:0;padding:0}
 html body.hf-movil:not(#hf) .hfa :is(.hfa-app,.hfa-ficha) .hfx-app__nom{display:block;overflow:visible;-webkit-line-clamp:none;font:500 13px/1.3 var(--font);white-space:normal;text-overflow:clip;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
 html body.hf-movil:not(#hf) .hfa :is(.hfa-app,.hfa-ficha) :is(.hfx-app__txt,.hfa-usar){display:none}
 /* Sello (GRATIS, BETA, NO DISPONIBLE): el pequeño de los hubs, abajo al inicio. */
 html body.hf-movil:not(#hf) .hfa .hfa-medio>.hfx-sello{left:auto;right:auto;inset-inline-start:6px;bottom:6px;height:16px;padding:0 5px;font-size:10px;line-height:16px;transform:skewX(-10deg);transform-origin:center}
 /* Una categoría, una sección suelta o la búsqueda: rejilla de tres. */
 html body.hf-movil:not(#hf) .hfa .hfa-rejilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
 html body.hf-movil:not(#hf) .hfa .hfa-ficha{gap:0;color:var(--f-texto);text-align:start}
 html body.hf-movil:not(#hf) .hfa-sec.hfa-sec--cat{padding-top:20px}
 html body.hf-movil:not(#hf) .hfa-bloque{margin:0 0 24px;padding:0 16px}
 html body.hf-movil:not(#hf):not(#hf) .hfa-bloque__t{display:block;margin:0 0 10px;color:var(--f-texto);font:600 14px/1.3 var(--font);letter-spacing:-.01em;text-transform:none}
 html body.hf-movil:not(#hf) .hfa-bloque__t>.hfx-ic3d{display:none}
 /* Agente (solo con acceso): la misma fila, con el aire de las secciones. */
 html body.hf-movil:not(#hf) .hfa .hfa-agente{margin:20px 16px 0}
 /* «Muy pronto»: el título de sección y pastillas sin acción, como «En
    preparación» del hub (sin icono, sección ni sello: el título ya lo dice). */
 html body.hf-movil:not(#hf) .hfa .hfa-pronto-sec{padding:32px 16px 0}
 html body.hf-movil:not(#hf):not(#hf) .hfa-pronto-t{margin:0 0 12px;color:var(--f-texto);font:600 16px/1.3 var(--font);letter-spacing:-.01em;text-transform:none}
 html body.hf-movil:not(#hf) .hfa .hfa-pronto-lista{display:flex;flex-wrap:wrap;gap:8px}
 html body.hf-movil:not(#hf) .hfa .hfa-pronto{display:inline-flex;gap:0;min-height:33px;box-sizing:border-box;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,var(--blanco-luz) 5%,transparent);color:var(--f-texto-2)}
 html body.hf-movil:not(#hf) .hfa .hfa-pronto :is(.hfa-arte,.hfx-sello,small){display:none}
 html body.hf-movil:not(#hf) .hfa .hfa-pronto__txt b{display:block;overflow:visible;-webkit-line-clamp:none;font:500 12px/1.4 var(--font);overflow-wrap:break-word}
}