/* Cocuyo CSS bundle v1: generated by scripts/build-css.mjs. */
/* cocuyo-css: assets/css/comunidad-nav.css */
/* Colores de los tokens compartidos; no modifica la barra inferior móvil. */
.cn-community-entry{display:flex;align-items:center;align-self:center;flex:none;order:4}
.cn-header .cn-community-toggle,.studio-public-nav .cn-community-toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 12px;border:0;border-radius:9px;background:transparent;color:var(--gris-niebla);font:550 13px/1.2 var(--fuente);white-space:nowrap;cursor:pointer}
.cn-community-toggle>svg{width:12px;height:12px;transition:transform var(--trans-rapida)}
.cn-community-toggle[aria-expanded=true]>svg{transform:rotate(180deg)}
.cn-header .cn-community-toggle:hover,.studio-public-nav .cn-community-toggle:hover,.cn-community-toggle[aria-expanded=true]{color:var(--blanco-luz);background:var(--negro-elevado)}
.cn-community-panel{position:fixed;z-index:var(--z-overlay,200);box-sizing:border-box;display:grid;grid-template-columns:1.15fr 1fr;gap:24px;padding:24px;border:1px solid var(--negro-borde);border-radius:16px;background:var(--negro-elevado);color:var(--blanco-luz);box-shadow:var(--sombra-2,0 18px 48px color-mix(in srgb,var(--negro-abismo) 85%,transparent));overflow:auto;overscroll-behavior:contain;font-family:var(--fuente)}
.cn-community-panel[hidden]{display:none!important}
.cn-community-panel *{box-sizing:border-box}
.cn-community-panel a{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 8px;border-radius:8px;color:var(--gris-niebla);text-decoration:none;font-size:13px;line-height:1.4}
.cn-community-panel a:hover{background:var(--negro-abismo);color:var(--blanco-luz)}
.cn-community-panel a>svg{width:20px;height:20px;flex:none;color:var(--gris-humo)}
.cn-community-panel a>svg:last-child{width:14px;height:14px;margin-left:auto}
.cn-community-panel a>span{display:grid;gap:4px;min-width:0}
.cn-community-panel b{font-size:13px;font-weight:600;color:var(--blanco-luz)}
.cn-community-panel small{font-size:11px;color:var(--gris-humo);white-space:normal}
.cn-community-panel .cn-community-overview{position:relative;display:grid;gap:7px;margin-bottom:10px;padding:6px 8px 18px;border-bottom:1px solid var(--negro-borde);border-radius:0}
.cn-community-overview>b{font-size:17px!important}
.cn-community-overview>span{font-size:12px;color:var(--gris-humo)}
.cn-community-panel .cn-community-overview>svg{position:absolute;right:8px;top:8px;color:var(--verde-cocuyo)}
.cn-community-follow{padding-left:24px;border-left:1px solid var(--negro-borde)}
.cn-community-follow h2{margin:4px 8px 8px;font-size:12px;font-weight:650;color:var(--blanco-luz)}
.cn-community-follow p{margin:0 8px 12px;font-size:11px;color:var(--gris-humo)}
.cn-community-panel :is(a,button):focus-visible,.cn-community-toggle:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}
/* Redes secundarias en una línea (Familia, 29-sep-2026): el menú no repite las siete. */
.cn-community-panel .cn-community-mas{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin:6px 8px 0;font-size:11px;color:var(--gris-humo)}
.cn-community-panel .cn-community-mas a{display:inline-flex;min-height:44px;padding:0;gap:0;border-radius:4px;font-size:12px;color:var(--gris-niebla);text-decoration:underline;text-decoration-color:var(--negro-borde);text-underline-offset:4px}
.cn-community-panel .cn-community-mas>span{flex-basis:100%;margin-top:4px}
.cn-community-panel .cn-community-mas a:hover{background:none;color:var(--blanco-luz);text-decoration-color:currentColor}
@media(max-width:1180px){.cn-header .cn-community-toggle,.studio-public-nav .cn-community-toggle{padding-inline:8px;font-size:12px}}
@media(max-width:900px){.cn-nav.cn-has-community,.studio-public-nav .st-nav.cn-has-community{overflow-x:auto;scrollbar-width:none}.cn-has-community::-webkit-scrollbar{display:none}.cn-community-entry{justify-content:center}.cn-header .cn-community-toggle,.studio-public-nav .cn-community-toggle{padding-inline:6px;font-size:11px}.cn-community-toggle>svg{width:10px;height:10px}.cn-community-panel{gap:16px;padding:18px}.cn-community-follow{padding-left:16px}}
@media(max-width:450px){.cn-community-panel{grid-template-columns:1fr;gap:16px}.cn-community-follow{padding:16px 0 0;border-left:0;border-top:1px solid var(--negro-borde);display:grid;grid-template-columns:1fr 1fr;gap:0 6px}.cn-community-follow h2,.cn-community-follow p,.cn-community-follow .cn-community-mas{grid-column:1/-1}.cn-community-panel a{min-height:48px}.cn-community-follow a>svg:first-child{width:17px;height:17px}}
@media(prefers-reduced-motion:reduce){.cn-community-toggle>svg{transition:none}}


/* cocuyo-css: assets/css/estudio-familia.css */
/* ============================================================
   ESTUDIO · ACABADO FAMILIA COCUYO (dueño, 29-sep-2026)
   ------------------------------------------------------------
   El Estudio se viste igual que el resto de la web (familia.css y el
   concepto de propuestas/familia/estudio.html), con el acabado ligero
   tipo Runway/Apple: Geist 450–550 en titulares y navegación, cuerpo
   400, casi sin bordes, sombras mínimas, mucho aire, lima SOLO en la
   acción principal y en lo activo, y las dos O verdes sin halo.

   Qué NO cambia: el negro, «Esperando para crear», la posición de los
   paneles (Crear a la izquierda, resultados a la derecha), el Agente
   privado (data-agente-beta), los flujos, los ids, los data-atributos
   y los estados que pinta el JavaScript (saldo bajo, en marcha, etc.).

   Cómo se aplica: esta hoja es la ÚLTIMA capa del Estudio. El Estudio
   acumula muchas hojas con selectores largos (#mesa #headicons…), así
   que cada regla de aquí empieza por el prefijo
       body.studio-workbench:not(#f)
   El «:not(#f)» no filtra nada (no existe un #f): solo suma el peso de
   un id para quedar por encima de las capas anteriores sin recurrir a
   !important. Solo se usa !important donde una hoja anterior ya lo usa.

   Colores y letra: tokens --f-* del espejo de crear.html (los mismos
   valores que assets/css/familia.css). Sin colores sueltos.
   Movimiento reducido: sin transiciones ni animaciones al final.
   ============================================================ */

/* ============ Base: letra y titulares ============ */
/* Titulares en Geist (Fraunces queda fuera de los titulares). */
body.studio-workbench:not(#f) {
  --display: var(--fuente);
  font-weight: var(--f-peso-cuerpo);
  letter-spacing: -0.005em;
  font-kerning: normal;
}
body.studio-workbench:not(#f) :is(h1, .title, .hello, .bv-vacio h3, .hist-nada b) {
  font-family: var(--fuente);
  font-weight: var(--f-peso-display);
  letter-spacing: var(--f-tracking-titulo);
}
body.studio-workbench:not(#f) :is(h2, h3) { font-weight: var(--f-peso-titulo); letter-spacing: -0.015em; }

/* ============ Cabecera del Estudio (escritorio) ============ */
/* El mismo lenguaje que la cabecera común (.f-cabecera): 64 px, vidrio
   negro, una línea finísima debajo, enlaces 450 en gris que pasan a
   blanco, y el activo en blanco con un punto lima. */
@media (min-width: 901px) {
  html body.studio-workbench:not(#f) { --st-top: 64px; }
  body.studio-workbench:not(#f) .studio-public-nav {
    --cn-top: 64px;
    height: 64px;
    gap: var(--f-e-4);
    padding: 0 var(--f-e-6);
    border-bottom: 0;
    background: var(--f-vidrio);
    -webkit-backdrop-filter: var(--vidrio);
    backdrop-filter: var(--vidrio);
    box-shadow: 0 1px 0 var(--f-linea);
  }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav { gap: 2px; align-items: center; height: auto; }
  body.studio-workbench:not(#f) .studio-public-nav .st-actions { gap: var(--f-e-2); }
}

/* Marca: COCUYO con las dos O encendidas, sin halo (ley de marca). */
body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton { filter: none; border-radius: var(--f-r-control); }
body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton:hover { filter: none; opacity: .86; }
body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton[aria-current="page"]::after { display: none; }
body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton .wordmark {
  font-family: var(--fuente);
  font-weight: 650;
  font-size: 1.125rem;
  letter-spacing: .07em;
  line-height: 1;
  color: var(--f-texto);
}
body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton .o-viva { color: var(--f-lima); text-shadow: none; }

/* Enlaces del menú: Imagen · Video · Audio (con su flecha de modelos),
   Apps, Comunidad, Agente (solo con acceso), Creaciones, Proyectos y
   Precios. Todos con la misma pastilla. */
body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a, .st-apps, .cn-community-toggle, .sn-agent-entry, .st-workspace-nav button, .st-pricing) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: transparent;
  box-shadow: none;
  font-family: var(--fuente);
  font-size: .875rem;
  font-weight: 450;
  letter-spacing: -0.005em;
  color: var(--f-texto-2);
  white-space: nowrap;
  transition: color var(--f-rapido), background var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-apps, .cn-community-toggle, .sn-agent-entry, .st-workspace-nav button, .st-pricing):hover {
  color: var(--f-texto);
  background: var(--f-sup-2);
}
body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a, .st-apps, .cn-community-toggle, .sn-agent-entry, .st-workspace-nav button, .st-pricing, .st-nav-group > button):focus-visible {
  outline: 2px solid var(--f-lima);
  outline-offset: 2px;
}
/* Imagen · Video · Audio: enlace + flecha forman una sola pastilla. */
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group {
  align-items: center;
  height: 36px;
  border-radius: var(--f-r-pill);
  box-shadow: none;
  transition: background var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > a { padding-right: 2px; }
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group:hover { background: var(--f-sup-2); }
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group:hover > a { color: var(--f-texto); background: transparent; }
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > button {
  width: 26px;
  height: 36px;
  padding: 0 6px 0 2px;
  border-radius: 0 var(--f-r-pill) var(--f-r-pill) 0;
  color: var(--f-texto-3);
  background: transparent;
}
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > button:hover,
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > button[aria-expanded="true"] { color: var(--f-texto); }
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > button > svg { width: 12px; height: 12px; opacity: .8; }
/* Activo: blanco y un punto lima (como la cabecera común). */
body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a, .sn-agent-entry, .st-workspace-nav button, .st-pricing)[aria-current="page"] {
  color: var(--f-texto);
  background: transparent;
  box-shadow: none;
}
body.studio-workbench:not(#f) .studio-public-nav .st-nav-group:has(> a[aria-current="page"]) { box-shadow: none; }
body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a, .sn-agent-entry, .st-workspace-nav button, .st-pricing)[aria-current="page"]::after,
body.studio-workbench:not(#f) .studio-public-nav #studioProjectsButton.cpro-con-proyecto::after {
  content: "";
  display: block;
  position: static;
  flex: none;
  width: 4px;
  height: 4px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--f-lima);
  box-shadow: none;
}
/* Apps y Comunidad sin iconos de colores: la lima es para lo activo. */
body.studio-workbench:not(#f) .studio-public-nav .st-apps .ic { display: none; }
body.studio-workbench:not(#f) .studio-public-nav .cn-community-toggle > svg { width: 12px; height: 12px; opacity: .55; margin-left: -2px; }
/* Creaciones · Proyectos: separados por una línea fina, como la maqueta. */
body.studio-workbench:not(#f) .studio-public-nav .st-workspace-nav {
  gap: 2px;
  margin-left: var(--f-e-1);
  padding-left: var(--f-e-3);
  border-left: 0;
  box-shadow: inset 1px 0 0 var(--f-linea-fuerte);
  height: 18px;
  overflow: visible;
}
body.studio-workbench:not(#f) .studio-public-nav .st-workspace-nav button svg { width: 16px; height: 16px; stroke-width: 1.5; }
body.studio-workbench:not(#f) .studio-public-nav #studioProjectsButton .cpro-actual { color: var(--f-texto); font-weight: 450; }
body.studio-workbench:not(#f) .studio-public-nav #studioProjectsButton.cpro-con-proyecto > svg { color: inherit; }
/* Con sitio de sobra, texto sin iconos (como la cabecera común); entre
   901 y 1180 px quedan solo los iconos, como hasta ahora. */
@media (min-width: 1181px) {
  body.studio-workbench:not(#f) .studio-public-nav .st-workspace-nav button > svg { display: none; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  body.studio-workbench:not(#f) .studio-public-nav .st-workspace-nav button { width: 36px; padding: 0; justify-content: center; }
  body.studio-workbench:not(#f) .studio-public-nav #studioProjectsButton.cpro-con-proyecto::after { display: none; }
  body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a, .st-apps, .cn-community-toggle, .sn-agent-entry, .st-pricing) { padding-inline: 9px; font-size: .8125rem; }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > a { padding-right: 1px; }
}

/* Precios: un enlace más, sin la pastilla «No caducan» (Familia, 29-sep). */
body.studio-workbench:not(#f) .studio-public-nav .st-pricing .cn-pricing-badge,
body.studio-workbench:not(#f) .studio-public-nav .st-pricing .cn-pricing-label > svg { display: none; }
body.studio-workbench:not(#f) .studio-public-nav .st-pricing .cn-pricing-label { gap: 0; }

/* Saldo: una pastilla fina con la cifra. El icono conserva sus colores de
   estado (rojo con poco saldo), que pinta estudio-creditos.css. */
body.studio-workbench:not(#f) .studio-public-nav #btnmascreditos {
  height: 36px;
  min-height: 36px;
  gap: 7px;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--f-linea-fuerte);
  transition: background var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav #btnmascreditos:hover { background: var(--f-sup-2); }
body.studio-workbench:not(#f) .studio-public-nav #btnmascreditos .credit-wallet-icon { width: 15px; height: 15px; flex-basis: 15px; stroke-width: 1.6; }
body.studio-workbench:not(#f) .studio-public-nav #btnmascreditos [data-credit-value] { font-size: .875rem; font-weight: var(--f-peso-ui); letter-spacing: 0; }

/* Ayuda, idioma y sesiones: iconos redondos y transparentes. */
body.studio-workbench:not(#f) .studio-public-nav :is(#studioHelpButton, #studioSessionToggle) {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--f-texto-2);
  transition: color var(--f-rapido), background var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav :is(#studioHelpButton, #studioSessionToggle):hover { color: var(--f-texto); background: var(--f-sup-2); }
body.studio-workbench:not(#f) .studio-public-nav :is(#studioHelpButton, #studioSessionToggle) svg { width: 18px; height: 18px; stroke-width: 1.5; }
body.studio-workbench:not(#f) .studio-public-nav .st-language summary {
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: transparent;
  color: var(--f-texto-2);
  font-size: .8125rem;
  font-weight: var(--f-peso-ui);
  letter-spacing: .02em;
}
body.studio-workbench:not(#f) .studio-public-nav .st-language summary:hover { color: var(--f-texto); background: var(--f-sup-2); }

/* Avatar: círculo gris con la inicial (como .f-cuenta #avatar-cine). */
body.studio-workbench:not(#f) .studio-public-nav #acct {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}
body.studio-workbench:not(#f) .studio-public-nav #acct .av {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--f-sup-3);
  color: var(--f-texto);
  font-family: var(--fuente);
  font-size: .8125rem;
  font-weight: var(--f-peso-ui);
  transition: background var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav #acct:hover .av,
body.studio-workbench:not(#f) .studio-public-nav #acct[aria-expanded="true"] .av { background: color-mix(in srgb, var(--blanco-luz) 14%, var(--negro-abismo)); }
body.studio-workbench:not(#f) .studio-public-nav #acct:focus-visible { outline: 2px solid var(--f-lima); outline-offset: 2px; }

/* Visitante: «Empieza a crear» es el botón lima de la cabecera común. */
body.studio-workbench:not(#f) .studio-public-nav .st-guest .st-start {
  height: 36px;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: var(--f-lima);
  color: var(--f-lima-tinta);
  font-family: var(--fuente);
  font-size: .875rem;
  font-weight: var(--f-peso-ui);
  letter-spacing: -0.005em;
  transition: background var(--f-rapido), box-shadow var(--f-rapido);
}
body.studio-workbench:not(#f) .studio-public-nav .st-guest .st-start:hover { background: var(--f-lima-hover); box-shadow: var(--f-luz); }

/* ============ Cabecera del Estudio (móvil) ============ */
@media (max-width: 900px) {
  body.studio-workbench:not(#f) .studio-public-nav {
    border-bottom: 0;
    background: var(--f-vidrio);
    -webkit-backdrop-filter: var(--vidrio);
    backdrop-filter: var(--vidrio);
    box-shadow: 0 1px 0 var(--f-linea);
  }
  body.studio-workbench:not(#f) .studio-public-nav #studioHomeButton .wordmark { font-size: 1rem; }
  /* El punto activo y la flecha caben junto al nombre completo. La rejilla
     heredada daba el mismo ancho a cada editor y recortaba «Imagen» junto
     a la marca; el mínimo global de los botones ensanchaba las flechas. */
  body.studio-workbench:not(#f) .studio-public-nav .st-nav { display: flex; align-items: center; gap: 0; }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group { flex: 1 0 auto; min-width: max-content; height: 44px; justify-content: center; }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > a { min-height: 44px; padding: 0 1px 0 8px; font-size: .8125rem; }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > button { width: var(--f-e-6); min-width: var(--f-e-6); padding: 0 4px 0 1px; }
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group:has(> a[aria-current="page"]) { background: var(--f-sup-2); }
}
@media (max-width: 380px) {
  body.studio-workbench:not(#f) .studio-public-nav .st-nav-group > a { padding-left: 6px; font-size: .75rem; }
  body.studio-workbench:not(#f) .studio-public-nav :is(.st-nav > a, .st-nav-group > a)[aria-current="page"]::after { display: none; }
}

/* ============ Menú de modelos (la flecha de Imagen/Video/Audio) ============ */
body.studio-workbench:not(#f) .studio-public-nav .st-model-panel.cn-mega {
  border: 0;
  border-radius: var(--f-r-tarjeta);
  background: color-mix(in srgb, var(--blanco-luz) 3%, var(--negro-abismo));
  box-shadow: 0 0 0 1px var(--f-linea), var(--f-sombra-menu);
}
body.studio-workbench:not(#f) .cn-mega .cn-panel-heading { border-bottom: 0; box-shadow: 0 1px 0 var(--f-linea); }
body.studio-workbench:not(#f) .cn-mega .cn-panel-heading h2 { font-weight: var(--f-peso-titulo); }
body.studio-workbench:not(#f) .cn-mega .cn-family { font-weight: 450; border-radius: var(--f-r-control); }
body.studio-workbench:not(#f) .cn-mega .cn-family:is(:hover, [aria-expanded="true"]) { background: var(--f-sup-2); border-color: transparent; }
body.studio-workbench:not(#f) .cn-mega .cn-family-deck { border-left: 0; box-shadow: inset 1px 0 0 var(--f-linea); background: transparent; }
body.studio-workbench:not(#f) .cn-mega .cn-family-heading { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) .cn-mega .cn-model { border-radius: var(--f-r-control); }
body.studio-workbench:not(#f) .cn-mega .cn-model:hover { background: var(--f-sup-2) !important; border-color: transparent !important; }
body.studio-workbench:not(#f) .cn-mega .cn-model b { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) .cn-mega .cn-panel-footer { border-top: 0; box-shadow: 0 -1px 0 var(--f-linea); }
body.studio-workbench:not(#f) .cn-mega .cn-panel-footer > :is(a, button) { font-weight: var(--f-peso-ui); }

/* ============ Panel Crear ============ */
/* Rótulo «CREAR»: la etiqueta pequeña en mayúsculas de la familia. */
body.studio-workbench:not(#f) #mesa .studio-editor-head > span:first-child {
  font-family: var(--fuente);
  font-size: .75rem;
  font-weight: var(--f-peso-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--f-texto-3);
}
/* Modelo: la tarjeta con la marca en verde, sin borde marcado. */
body.studio-workbench:not(#f) #mesa #studioVideoModel .param {
  min-height: 56px;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--f-linea);
  border-radius: var(--f-r-tarjeta);
  background: var(--f-sup-1);
  box-shadow: none;
  font-size: .9375rem;
  font-weight: var(--f-peso-ui);
  letter-spacing: -0.01em;
  transition: background var(--f-rapido), border-color var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa #studioVideoModel .param:hover { background: var(--f-sup-2); border-color: var(--f-linea-fuerte); }
body.studio-workbench:not(#f) #mesa #studioVideoModel .param .mrcbox {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: var(--f-r-control);
  background: var(--f-lima-suave);
  color: var(--f-lima);
}
/* Inicio / Final · Referencias: el segmento de la familia (pastilla,
   la opción elegida en blanco). */
body.studio-workbench:not(#f) #mesa .ref-mode-switch {
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: var(--f-sup-1);
  box-shadow: inset 0 0 0 1px var(--f-linea);
}
body.studio-workbench:not(#f) #mesa .ref-mode-switch button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: transparent;
  box-shadow: none;
  font-family: var(--fuente);
  font-size: .8125rem;
  font-weight: var(--f-peso-ui);
  color: var(--f-texto-3);
  transition: color var(--f-rapido), background var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa .ref-mode-switch button:hover { color: var(--f-texto); }
body.studio-workbench:not(#f) #mesa .ref-mode-switch button[aria-pressed="true"] { background: var(--f-texto); color: var(--negro-abismo); }
/* Añadir fotogramas / referencias: recuadro de puntos, sin relleno. */
body.studio-workbench:not(#f) #mesa .refbox.ref-add-compact {
  border: 1px dashed var(--f-linea-fuerte);
  border-radius: var(--f-r-tarjeta);
  background: transparent;
  box-shadow: none;
  font-weight: var(--f-peso-ui);
  transition: border-color var(--f-rapido), background var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa .refbox.ref-add-compact:hover { border-color: var(--f-lima-linea); background: var(--f-lima-suave); }
body.studio-workbench:not(#f) #mesa .refbox.ref-add-compact .ref-orb { background: var(--f-sup-2); border-color: transparent; box-shadow: none; }
body.studio-workbench:not(#f) #mesa .refbox.ref-add-compact .ref-add-label { font-size: .8125rem; font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa .ref-mode-hint { font-size: .75rem; color: var(--f-texto-3); }
/* Descripción: campo de la familia (superficie apenas más clara). */
body.studio-workbench:not(#f) #mesa #ta {
  border: 1px solid var(--f-linea);
  border-radius: var(--f-r-tarjeta);
  background: var(--f-sup-1);
  box-shadow: none;
  font-weight: var(--f-peso-cuerpo);
  line-height: 1.5;
  transition: border-color var(--f-rapido), box-shadow var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa #ta:hover { border-color: var(--f-linea-fuerte); }
body.studio-workbench:not(#f) #mesa #ta:focus { border-color: var(--f-lima-linea); box-shadow: 0 0 0 3px var(--f-lima-suave); outline: 0; }
body.studio-workbench:not(#f) #mesa #ta:empty::before { color: var(--f-texto-3); }
/* Ayuda con el prompt · Mis referencias: chips de la familia. */
body.studio-workbench:not(#f) #mesa :is(.prompt-help-trigger, .prompt-help-undo, .ckit-entry) {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--f-r-pill);
  background: var(--f-sup-2);
  color: var(--f-texto-2);
  font-family: var(--fuente);
  font-size: .75rem;
  font-weight: var(--f-peso-ui);
  text-decoration: none;
  transition: color var(--f-rapido), background var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa :is(.prompt-help-trigger, .prompt-help-undo, .ckit-entry):hover { color: var(--f-texto); background: var(--f-sup-3); }
body.studio-workbench:not(#f) #mesa :is(.prompt-help-trigger, .prompt-help-undo, .ckit-entry):focus-visible { outline: 2px solid var(--f-lima); outline-offset: 2px; }
body.studio-workbench:not(#f) #mesa #studioComposerActions { gap: 6px; }
/* Ajustes (formato, resolución, duración…): controles de 10 px de radio. */
body.studio-workbench:not(#f) #mesa #parambar .param {
  border: 1px solid var(--f-linea);
  border-radius: var(--f-r-control);
  background: var(--f-sup-1);
  box-shadow: none;
  font-weight: var(--f-peso-ui);
  transition: background var(--f-rapido), border-color var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa #parambar .param:hover { background: var(--f-sup-2); border-color: var(--f-linea-fuerte); }
body.studio-workbench:not(#f) #mesa #parambar .studio-param-label { font-weight: 450; color: var(--f-texto-3); }
body.studio-workbench:not(#f) #mesa #parambar .studio-param-value { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa #parambar .cost { font-weight: 450; }
body.studio-workbench:not(#f) #mesa #parambar .cost b { font-weight: var(--f-peso-ui); }

/* Generar: el botón principal de la familia (pastilla lima). El coste
   sigue dentro del botón; los estados del JS (en marcha, sin saldo,
   desactivado) conservan su lógica. */
body.studio-workbench:not(#f) #mesa #headicons .roundbtn,
body.studio-workbench:not(#f) #mesa .ap-gen {
  min-height: 52px;
  border: 0;
  border-radius: var(--f-r-pill);
  box-shadow: none;
  font-family: var(--fuente);
  font-size: 1rem;
  font-weight: var(--f-peso-ui);
  letter-spacing: -0.005em;
  transition: background var(--f-rapido), box-shadow var(--f-rapido), transform var(--f-rapido);
}
body.studio-workbench:not(#f) #mesa #headicons .roundbtn:not(:disabled) { background: var(--f-lima); color: var(--f-lima-tinta); }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn:hover:not(:disabled),
body.studio-workbench:not(#f) #mesa .ap-gen:hover:not(:disabled) { background: var(--f-lima-hover); box-shadow: var(--f-luz); transform: none; }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn:active:not(:disabled),
body.studio-workbench:not(#f) #mesa .ap-gen:active:not(:disabled) { transform: scale(.98); }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn::after { display: none; }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn .rlbl { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn .studio-generate-cost { font-weight: 450; opacity: .72; }
body.studio-workbench:not(#f) #mesa #headicons .roundbtn:focus-visible,
body.studio-workbench:not(#f) #mesa .ap-gen:focus-visible { outline: 2px solid var(--f-lima); outline-offset: 3px; }

/* ============ Vídeo en escritorio: columna Crear ============ */
/* Mismo negro que la página y una línea finísima hacia los resultados. */
@media (min-width: 1001px) {
  body.studio-workbench:not(#f)[data-studio-mode="video"] #mesa .mesa-in {
    background: var(--f-fondo);
    box-shadow: inset -1px 0 0 var(--f-linea);
  }
  body.studio-workbench:not(#f)[data-studio-mode="video"] #mesa #headicons {
    background: linear-gradient(to top, var(--f-fondo) 72%, transparent);
  }
}

/* ============ Imagen: barra de creación ============ */
/* Una tarjeta apenas más clara que el fondo, con su filete fino. */
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa .mesa-in {
  border: 0;
  border-radius: var(--f-r-media);
  background: var(--f-sup-1);
  box-shadow: 0 0 0 1px var(--f-linea), 0 24px 48px color-mix(in srgb, var(--negro-abismo) 55%, transparent);
}
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa #ta { background: transparent; border-color: transparent; }
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa #ta:focus { box-shadow: none; border-color: transparent; }
/* La barra no tiene borde: el foco de teclado debe seguir siendo visible
   aunque el prompt conserve su superficie transparente. No cambia el tamaño. */
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa #ta:focus-visible { outline: 2px solid var(--f-lima); outline-offset: 3px; border-radius: var(--f-r-control); }
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa :is(#parambar .param, .image-ref-add) { background: var(--f-sup-2); border-color: transparent; }
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa :is(#parambar .param, .image-ref-add):hover { background: var(--f-sup-3); }
body.studio-workbench:not(#f)[data-studio-mode="image"] #mesa .image-ref-add { border-radius: var(--f-r-control); box-shadow: none; }

/* ============ Audio ============ */
body.studio-workbench:not(#f).audio-redesign #mesa .mesa-in {
  border: 0;
  background: var(--f-fondo);
  box-shadow: 0 0 0 1px var(--f-linea);
  border-radius: var(--f-r-media);
}
body.studio-workbench:not(#f) #mesa .audio-type-tabs button { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa .ap-voz { border-radius: var(--f-r-tarjeta); border-color: var(--f-linea); }
body.studio-workbench:not(#f) #mesa .ap-voz b { font-weight: var(--f-peso-titulo); letter-spacing: -0.02em; }
body.studio-workbench:not(#f) #mesa .ap-vozcambia { border-radius: var(--f-r-pill); font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa .ap-idioma select {
  min-height: 36px;
  border: 1px solid var(--f-linea);
  border-radius: var(--f-r-control);
  background-color: var(--f-sup-1);
  color: var(--f-texto);
  font-family: var(--fuente);
  font-weight: 450;
}
body.studio-workbench:not(#f) #mesa :is(.ap-rot, .ap-idioma > span) { font-weight: var(--f-peso-ui); color: var(--f-texto-2); }
body.studio-workbench:not(#f) #mesa .ap-nota { color: var(--f-texto-3); }
body.studio-workbench:not(#f) #mesa #parambar .ap-fila,
body.studio-workbench:not(#f) #mesa .ap-avwrap > .ap-fila {
  border-radius: var(--f-r-tarjeta);
  font-weight: 450;
}
body.studio-workbench:not(#f) #mesa #parambar .ap-fila { border: 1px solid var(--f-linea); background: var(--f-sup-1); box-shadow: none; }
body.studio-workbench:not(#f) #mesa #parambar .ap-fila:hover { background: var(--f-sup-2); }
body.studio-workbench:not(#f) #mesa #parambar .ap-fila b { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) #mesa .ap-gen:not(:disabled) { background: var(--f-lima); color: var(--f-lima-tinta); }

/* ============ Resultados vacíos: «Esperando para crear» ============ */
/* Las dos luces del cocuyo, redondas y sin halo (como .f-luces). */
body.studio-workbench:not(#f) .ej-waiting-lights { gap: 10px; }
body.studio-workbench:not(#f) .ej-waiting-lights i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: none;
  background: var(--f-lima);
  box-shadow: none;
}
body.studio-workbench:not(#f) .ej-waiting > p { color: var(--f-texto-3); font-weight: 450; letter-spacing: -0.005em; }

/* ============ Barra inferior del móvil ============ */
/* Proyectos · Apps · Creaciones · Precios · Cuenta: vidrio negro, iconos
   de línea y etiquetas pequeñas en gris; lo activo en blanco. */
@media (max-width: 900px) {
  body.studio-workbench:not(#f) .sm-nav {
    border-top: 0;
    background: var(--f-vidrio);
    -webkit-backdrop-filter: var(--vidrio);
    backdrop-filter: var(--vidrio);
    box-shadow: 0 -1px 0 var(--f-linea);
  }
  body.studio-workbench:not(#f) .sm-nav > :is(button, a) {
    border: 0;
    border-radius: var(--f-r-control);
    background: transparent;
    color: var(--f-texto-3);
    font-family: var(--fuente);
    font-size: .6875rem;
    font-weight: 450;
    letter-spacing: 0;
    transition: color var(--f-rapido), background var(--f-rapido);
  }
  body.studio-workbench:not(#f) .sm-nav > :is(button, a) :is(span, small) { font-weight: inherit; }
  body.studio-workbench:not(#f) .sm-nav .st-pricing .cn-pricing-label { color: inherit; font-weight: inherit; }
  body.studio-workbench:not(#f) .sm-nav > :is(button, a):hover,
  body.studio-workbench:not(#f) .sm-nav > :is(button, a):is([aria-current="page"], [aria-expanded="true"], .on, .active) { color: var(--f-texto); }
  body.studio-workbench:not(#f) .sm-nav > :is(button, a) svg { width: 20px; height: 20px; stroke-width: 1.5; }
  body.studio-workbench:not(#f) .sm-nav .sm-apps .ic { color: inherit; }
  body.studio-workbench:not(#f) .sm-nav > :is(button, a):focus-visible { outline: 2px solid var(--f-lima); outline-offset: -2px; }
}

/* ============ Menú de cuenta y saldo ============ */
body.studio-workbench:not(#f) #accmenu {
  border: 0;
  border-radius: var(--f-r-tarjeta);
  background: color-mix(in srgb, var(--blanco-luz) 3%, var(--negro-abismo));
  box-shadow: 0 0 0 1px var(--f-linea), var(--f-sombra-menu);
}
body.studio-workbench:not(#f) #accmenu .mi { border-radius: var(--f-r-control); font-weight: 450; color: var(--f-texto-2); }
body.studio-workbench:not(#f) #accmenu .mi:hover { background: var(--f-sup-2); color: var(--f-texto); }
body.studio-workbench:not(#f) #accmenu .sec { border-top-color: var(--f-linea); }
body.studio-workbench:not(#f) #accmenu .acc-identidad strong { font-weight: var(--f-peso-ui); }
body.studio-workbench:not(#f) .studio-wallet-panel {
  border: 0;
  border-radius: var(--f-r-tarjeta);
  box-shadow: 0 0 0 1px var(--f-linea), var(--f-sombra-menu);
}

/* ============ Movimiento reducido ============ */
@media (prefers-reduced-motion: reduce) {
  body.studio-workbench:not(#f) :is(.studio-public-nav *, .sm-nav > *, #mesa #ta, #mesa .param, #mesa .roundbtn, #mesa .ap-gen, #mesa .refbox, #mesa .ref-mode-switch button, #mesa .prompt-help-trigger, #mesa .ckit-entry) { transition: none; }
  body.studio-workbench:not(#f) :is(#mesa #headicons .roundbtn, #mesa .ap-gen):active:not(:disabled) { transform: none; }
  body.studio-workbench:not(#f) .ej-waiting-lights i { animation: none; opacity: .85; }
}