/* =====================================================================
   COCUYO — PLAYGROUND (modo avanzado del estudio)
   ---------------------------------------------------------------------
   Capa que SOLO se aplica cuando el estudio está en modo Avanzado
   (body.creator-page.estudio-playground, que enciende pg-crear-playground.js leyendo
   el mismo localStorage 'cocuyo_estudio_avanzado' que usa pg-crear.js).

   QUÉ CAMBIA respecto al modo Fácil:
     · La GALERÍA manda: ocupa todo el lienzo, sin paneles que la aplasten.
     · Los controles se recogen en una BARRA FLOTANTE abajo: ranuras de
       referencia, el prompt, y una fila de pastillas (motor, formato,
       resolución, duración…). Cada pastilla abre un emergente con el
       panel de siempre DENTRO — no se duplica ni un control.
     · Sin acordeones ni pasos numerados: el que llega aquí ya sabe.

   POR QUÉ ASÍ: en el modo Fácil los paneles desplegados enseñan el camino;
   en Avanzado estorban — el usuario repite la misma operación decenas de
   veces y lo que quiere ver es lo que ha creado, no el formulario.

   IDENTIDAD: negro abismo, filo verde bioluminiscente y vidrio ahumado.
   Nada de gris neutro: la luz del cocuyo es la que marca lo activo.
   ===================================================================== */

/* =====================================================================
   PARTE COMÚN — vale en Fácil y en Avanzado (dueño, 29-jul-2026)
   ===================================================================== */

/* 1. FUERA EL PANEL "DETALLES". Repetía en una columna lo que ya dice cada
      tarjeta (tipo, motor, formato, resolución) y se comía 235 px de lienzo.
      OJO: aquí SOLO se oculta. Rehacer la rejilla en los dos modos rompió el
      modo Fácil —su maqueta usa las áreas "controls canvas", y al dejar solo
      "canvas" el compositor se quedó sin área y la galería midió 0 px—. La
      rejilla se reordena únicamente en el playground, más abajo. */
body.creator-page .creator-inspector { display: none !important; }

/* En Fácil la rejilla sigue teniendo su columna (no se toca la plantilla,
   que cambia con el ancho), pero la galería la absorbe estirándose hasta el
   final: 235 px más de sitio para lo creado, sin tocar nada más. */
@media (min-width: 1400px) {
  body.creator-page.estudio-simple .creator-lienzo { grid-column: 2 / -1; }
}

/* Y el botón "Detalles" de cada tarjeta, que solo servía para abrir ese
   panel: sin panel, no tiene destino. */
body.creator-page .creator-resultado-detalles { display: none !important; }

/* 2. BOTONES GEMELOS en las creaciones terminadas. "Descargar" era un
      enlace con otro aspecto y otro peso que "Ver"; ahora son dos botones
      del mismo tamaño y forma — el primario relleno, el segundo perfilado. */
body.creator-page .creator-resultado-acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}

body.creator-page .creator-resultado-acciones .creator-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding-inline: .8rem;
  border-radius: 12px;
  font-size: .8rem;
  font-weight: 760;
  text-decoration: none;
}

body.creator-page .creator-resultado-bajar {
  border: 1px solid var(--crear-borde);
  background: color-mix(in srgb, var(--negro-elevado) 80%, transparent);
  color: var(--blanco-luz);
  transition: border-color 150ms ease, background 150ms ease;
}

body.creator-page .creator-resultado-bajar:hover {
  border-color: color-mix(in srgb, var(--verde-cocuyo) 55%, transparent);
  background: color-mix(in srgb, var(--verde-cocuyo) 10%, transparent);
}

/* 3. EL VISOR, COMO UN REPRODUCTOR. La imagen o el video mandan; los mandos
      flotan encima en una barra redonda y discreta (antes solo había una ✕
      suelta pegada a la esquina del medio). */
body.creator-page .creator-visor.pg-visor {
  padding: clamp(.75rem, 3vw, 2rem);
  background: rgba(6, 10, 8, .94);
  backdrop-filter: blur(14px) saturate(115%);
}

body.creator-page .pg-visor .creator-visor-caja {
  max-width: min(1240px, 100%);
  max-height: 90vh;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
}

body.creator-page .pg-visor-barra {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 2;
  display: flex;
  gap: .4rem;
  padding: .3rem;
  border: 1px solid rgba(241, 255, 248, .14);
  border-radius: 999px;
  background: rgba(14, 20, 17, .82);
  backdrop-filter: blur(16px);
}

body.creator-page .pg-visor-accion {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--blanco-luz);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

body.creator-page .pg-visor-accion:hover {
  background: rgba(0, 231, 123, .16);
  color: var(--verde-cocuyo);
}

/* La ✕ original pierde su posición absoluta al mudarse a la barra. */
body.creator-page .pg-visor .creator-visor-cerrar {
  position: static;
  inset: auto;
  margin: 0;
}

/* 3 bis. LA NAVEGACIÓN VIVE EN EL RINCÓN DEL PERFIL. Fuera la barra del
   centro y fuera la de abajo: sus destinos están en el menú del avatar. */
body.creator-page.cocuyo-nav-en-rincon .creator-topnav > a { display: none; }
body.creator-page.cocuyo-nav-en-rincon .nav-inferior,
body.creator-page.cocuyo-nav-en-rincon .creator-nav { display: none !important; }

/* Sin barra abajo, el hueco que se le reservaba sobra. */
body.creator-page.cocuyo-nav-en-rincon { padding-bottom: 0; }

/* El menú del rincón crece: se le pone tope y scroll propio para que quepa
   en un móvil sin empujar la página. */
body.creator-page .creator-cuenta-menu {
  max-height: min(76vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* =====================================================================
   4. EL INTERRUPTOR ✨FÁCIL / 🛠️AVANZADO — bonito y CENTRADO
   ---------------------------------------------------------------------
   Dueño (30-jul-2026): "quiero botones más bonitos y quiero estén
   centrados". Dos cosas, las dos aquí:

   CENTRADO DE VERDAD. La barra de arriba era un flex con
   `justify-content: space-between` y tres hijos de anchos distintos
   (logo · esto · nombre del proyecto + avatar): el del medio NO queda
   centrado, queda donde le dejan los otros dos. Con una rejilla de
   1fr · auto · 1fr la columna del medio cae en el centro exacto de la
   pantalla, midan lo que midan los lados.

   BONITO. Pastilla de vidrio con luz interior, y la mitad elegida en el
   verde del cocuyo con su resplandor, como el botón de crear.
   ===================================================================== */

@media (min-width: 900px) {
  body.creator-page .creator-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  body.creator-page .creator-topbar > .creator-topbar-marca { justify-self: start; }
  body.creator-page .creator-topbar > .creator-topnav { justify-self: center; }
  body.creator-page .creator-topbar > .creator-topbar-proyecto { justify-self: end; }

  /* Con la navegación en el rincón del perfil, la cápsula de la barra se
     queda sin contenido propio: se apaga para no dibujar una pastilla
     dentro de otra. */
  body.creator-page.cocuyo-nav-en-rincon .creator-topnav {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
}

/* El carril de móvil: una línea propia, centrada, bajo la barra. */
body.creator-page .pg-nivel-carril {
  display: flex;
  justify-content: center;
  padding: .45rem .7rem .1rem;
}

body.creator-page .pg-nivel-carril[hidden] { display: none; }

/* La pastilla. Hereda de .creator-nivel (crear.css) y la reescribe entera:
   más aire, borde de vidrio y luz interior. */
body.creator-page .pg-nivel {
  display: inline-flex;
  gap: .2rem;
  padding: .22rem;
  border: 1px solid rgba(241, 255, 248, .12);
  border-radius: 999px;
  background: rgba(241, 255, 248, .05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 18px rgba(0, 0, 0, .22);
  backdrop-filter: blur(10px);
}

body.creator-page .creator-topnav .pg-nivel { margin-left: 0; }

body.creator-page .pg-nivel .creator-nivel-boton {
  min-height: 40px;   /* + padding de la pastilla = 44px tactiles reales */
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--crear-secundario);
  font-size: .76rem;
  font-weight: 760;
  letter-spacing: .005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

body.creator-page .pg-nivel .creator-nivel-boton:hover {
  background: rgba(241, 255, 248, .07);
  color: var(--crear-texto);
  box-shadow: none;
}

/* La mitad elegida: el verde de la casa, con su resplandor. */
body.creator-page .pg-nivel .creator-nivel-boton[aria-pressed="true"] {
  background: linear-gradient(180deg, #22ff9d 0%, var(--crear-verde) 100%);
  color: #041a10;
  box-shadow: 0 5px 16px rgba(0, 231, 123, .3), inset 0 1px 0 rgba(255, 255, 255, .35);
}

body.creator-page .pg-nivel .creator-nivel-boton:focus-visible {
  outline: 2px solid var(--crear-verde);
  outline-offset: 2px;
}

/* En pantallas estrechas se aprieta un poco, pero SIN quedarse en emojis:
   antes se les ponía font-size:0 y "Fácil"/"Avanzado" desaparecían. */
@media (max-width: 420px) {
  body.creator-page .pg-nivel .creator-nivel-boton {
    padding: .35rem .7rem;
    font-size: .72rem;
  }
}

/* =====================================================================
   PARTE PLAYGROUND — solo modo Avanzado
   ===================================================================== */

body.creator-page.estudio-playground {
  /* Alto reservado abajo para que la barra flotante nunca tape la galería. */
  --pg-barra: 232px;
  --pg-radio: 16px;
  --pg-filo: rgba(0, 231, 123, .22);
  /* Al día con la paleta aclarada del 29-jul-2026: la barra flotante tiene
     que ser un vidrio POR ENCIMA del fondo, no más oscura que él. */
  --pg-vidrio: rgba(20, 27, 23, .9);
}

/* ---------- 1. El lienzo manda ---------- */

/* SCROLL HORIZONTAL (fallo encontrado el 28-jul-2026 midiendo en 1280 px).
   En avanzado y a partir de 1080 px la barra lateral es permanente, y el
   área de trabajo se aparta con `margin-left: var(--crear-sidebar)` — bien.
   Pero conserva `width: 100%` de cuando no había barra: 100 % + 254 px de
   margen = 254 px de más, o sea barra de scroll horizontal en TODO el
   estudio avanzado. Con `width: auto` el bloque ocupa lo que queda, que es
   justo lo que se quería. */
body.creator-page.estudio-playground .creator-workspace {
  width: auto;
  max-width: none;
}

body.creator-page.estudio-playground .creator-lienzo {
  width: 100%;
  max-width: none;
  padding-bottom: calc(var(--pg-barra) + 1.5rem);
}

/* La cabecera del estudio ("Haz visible tu idea") sobra aquí: quien usa el
   playground no necesita que le presenten la pantalla en cada visita. */
body.creator-page.estudio-playground .creator-estudio-cabecera { display: none; }

/* El contenedor de paneles queda vacío (sus hijos viven en los emergentes). */
body.creator-page.estudio-playground .creator-opciones {
  display: contents;
}

body.creator-page.estudio-playground .creator-panel-seccion .creator-numero-paso { display: none; }

/* ---------- 2. Barra flotante ---------- */

/* El compositor comparte celda con la galería y se ancla abajo: así flota
   SOBRE lo creado, como una mesa de mezclas, en vez de empujarlo. Su
   grid-area original ("controls") no existe en esta rejilla —el marcado
   viene de la maqueta anterior—, y sin esto acababa en una fila implícita
   arriba del todo, tapando la galería. */
/* Sin panel de Detalles, el playground es UNA sola columna: la galería. */
body.creator-page.estudio-playground .creator-main {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "canvas";
  align-items: stretch;
}

/* FIJA, no pegajosa. Con `sticky` la barra se despegaba al llegar al final
   del scroll: se quedaba anclada al fondo de su celda (que acaba antes que
   la pantalla) y aparecía flotando arriba, sobre la galería. Fija al
   viewport es además lo que espera quien viene de otros estudios: la mesa
   de mandos no se mueve nunca. */
body.creator-page.estudio-playground .creator-composer {
  position: fixed;
  /* `top: auto` es imprescindible: el compositor heredaba un `top: 86px`
     de cuando era una columna pegajosa, y con top Y bottom a la vez manda
     el top — la barra aparecía pegada arriba, tapando la galería. */
  top: auto;
  left: 1rem;
  right: 1rem;
  bottom: clamp(.75rem, 2vw, 1.25rem);
  z-index: 60;
  /* Ancho POR HUECO, no por porcentaje: al ser fija, `width: 100%` medía la
     ventana entera e ignoraba la barra lateral, así que la barra se salía
     54 px por la derecha. Con left/right marcando el hueco y `width: auto`,
     el máximo solo la limita cuando sobra sitio. */
  width: auto;
  max-width: 1080px;
  margin-inline: auto;
  padding: .85rem;
  gap: .7rem;
  border: 1px solid rgba(241, 255, 248, .14);
  border-radius: var(--pg-radio);
  background: var(--pg-vidrio);
  backdrop-filter: blur(26px) saturate(140%);
  box-shadow:
    0 -1px 0 var(--pg-filo) inset,          /* filo verde: la luz del cocuyo */
    0 26px 70px rgba(0, 0, 0, .62);
}

/* La cabecera del compositor (pestañas + nivel) se recoloca: el JS mueve
   las pestañas a la fila de pastillas, así que aquí solo estorbaría. */
body.creator-page.estudio-playground .creator-composer-cabecera { display: none; }

/* Contenedores que se quedan vacíos al mudar sus controles a la fila de
   acciones. Vacíos seguían sumando alto y separación: 60 px de barra por
   la cara. Si su JS vuelve a meterles algo, reaparecen solos. */
body.creator-page.estudio-playground .creator-accion:empty,
body.creator-page.estudio-playground .creator-prompt-fila:empty { display: none; }

/* ---------- 2 bis. Carrusel de motores ---------- */

/* El motor se elige DESLIZANDO, no abriendo un panel: es la decisión que
   más cambia el resultado y el precio, así que va la primera y a la vista. */
/* DOS FILAS: arriba el carrusel (rótulo + tarjetas), abajo los ajustes DEL
   motor elegido. Antes era una fila y punto; los ajustes se habrían puesto a
   la derecha de las tarjetas, peleando por el mismo hueco que hace scroll. */
body.creator-page.estudio-playground .pg-motores {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .35rem .6rem;
}

body.creator-page.estudio-playground .pg-motores-rotulo {
  flex: 0 0 auto;
  color: var(--crear-secundario);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.creator-page.estudio-playground .pg-motores #modelo-catalogo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: .4rem;
  padding: .1rem .1rem .3rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 231, 123, .35) transparent;
}

body.creator-page.estudio-playground .pg-motores #modelo-catalogo::-webkit-scrollbar { height: 6px; }
body.creator-page.estudio-playground .pg-motores #modelo-catalogo::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(0, 231, 123, .3);
}

/* Tarjeta compacta: icono, nombre y precio. Lo demás (creador, estado) se
   apaga aquí para que quepan varias a la vista y se pueda comparar. */
body.creator-page.estudio-playground .pg-motores .creator-modelo-tarjeta {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 .45rem;
  padding: .45rem .7rem;
  scroll-snap-align: start;
  border: 1px solid rgba(241, 255, 248, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

body.creator-page.estudio-playground .pg-motores .creator-modelo-tarjeta:hover {
  border-color: rgba(0, 231, 123, .45);
  transform: translateY(-1px);
}

body.creator-page.estudio-playground .pg-motores .creator-modelo-tarjeta[aria-checked="true"] {
  border-color: var(--crear-verde);
  background: rgba(0, 231, 123, .1);
  box-shadow: 0 0 0 1px rgba(0, 231, 123, .3), 0 0 20px rgba(0, 231, 123, .16);
}

/* El hueco del icono ya NO se tiñe de verde: cada motor trae su marca con su
   propio color (ver MARCAS_MOTOR en pg-crear-playground.js) y un fondo verde
   debajo de un dibujo naranja ensuciaba los dos. */
body.creator-page.estudio-playground .pg-motores .creator-modelo-icono {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(241, 255, 248, .1);
  background: rgba(241, 255, 248, .05);
  font-size: .74rem;
  font-weight: 800;
}

body.creator-page.estudio-playground .pg-motores
  .creator-modelo-tarjeta[aria-checked="true"] .creator-modelo-icono {
  border-color: rgba(0, 231, 123, .4);
  background: rgba(0, 231, 123, .1);
}

/* ---------- 2 ter. Calidad y segundos DEL motor elegido ----------
   Dueño (30-jul-2026): "en los motores sigue sin salir para ajustar calidad
   y tiempo del video". Estaban en pastillas de la barra de abajo, a dos
   toques del carrusel; ahora cuelgan del propio motor. */

body.creator-page.estudio-playground .pg-motor-ajustes {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .9rem;
  padding-top: .1rem;
}

body.creator-page.estudio-playground .pg-motor-ajustes[hidden] { display: none; }

/* El cajón con los <select> DE VERDAD de pg-crear.js. Se mueven aquí para no
   duplicar nada (siguen siendo la fuente de la verdad de la cotización y del
   envío) y se esconden: lo que se toca son los botones de abajo. */
body.creator-page.estudio-playground .pg-motor-fuentes { display: none; }

body.creator-page.estudio-playground .pg-ajuste {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
}

body.creator-page.estudio-playground .pg-ajuste-rotulo {
  flex: 0 0 auto;
  color: var(--crear-secundario);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.creator-page.estudio-playground .pg-ajuste-opciones {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .22rem;
  padding: .16rem;
  border-radius: 999px;
  background: rgba(241, 255, 248, .05);
}

body.creator-page.estudio-playground .pg-ajuste-op {
  min-height: 30px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: .18rem .58rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--crear-secundario);
  line-height: 1.1;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

body.creator-page.estudio-playground .pg-ajuste-op b {
  font-size: .7rem;
  font-weight: 800;
}

body.creator-page.estudio-playground .pg-ajuste-op small {
  font-size: .54rem;
  font-weight: 620;
  opacity: .78;
  white-space: nowrap;
}

body.creator-page.estudio-playground .pg-ajuste-op:hover {
  background: rgba(241, 255, 248, .07);
  color: var(--crear-texto);
}

body.creator-page.estudio-playground .pg-ajuste-op[aria-pressed="true"] {
  background: var(--crear-verde);
  color: #041a10;
}

/* Una sola opción no es una elección: se dice cuál es y se deja de fingir
   un botón que no lleva a ninguna parte. */
body.creator-page.estudio-playground .pg-ajuste-fijo {
  padding: .2rem .55rem;
  border-radius: 999px;
  color: var(--crear-secundario);
  font-size: .68rem;
  font-weight: 700;
}

body.creator-page.estudio-playground .pg-motores .creator-modelo-nombre {
  font-size: .78rem;
  font-weight: 740;
  white-space: nowrap;
}

body.creator-page.estudio-playground .pg-motores .creator-modelo-precio {
  color: var(--crear-secundario);
  font-size: .66rem;
  font-weight: 620;
  white-space: nowrap;
}

body.creator-page.estudio-playground .pg-motores .creator-modelo-autor,
body.creator-page.estudio-playground .pg-motores .creator-modelo-estado { display: none; }

body.creator-page.estudio-playground .pg-motores .creator-modelo-pie {
  display: block;
  min-width: 0;
}

/* Motor no disponible: se ve, pero se nota que no se puede elegir. */
body.creator-page.estudio-playground .pg-motores .creator-modelo-tarjeta[data-disponible="false"] {
  opacity: .45;
  cursor: not-allowed;
}

/* ---------- 3. Ranuras de referencia (fila superior) ---------- */

/* Van pegadas al prompt, no en una fila propia. */
body.creator-page.estudio-playground .creator-prompt-fila {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}

body.creator-page.estudio-playground .creator-prompt {
  flex: 1 1 auto;
  min-width: 0;
}

body.creator-page.estudio-playground .pg-ranuras {
  flex: 0 0 auto;
  display: flex;
  gap: .35rem;
  padding-top: .15rem;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Si el motor elegido no admite ninguna referencia, la fila entera se va:
   una hilera de huecos vacíos parece una pantalla rota. */
body.creator-page.estudio-playground .pg-ranuras:not(:has(.creator-referencia-item:not([hidden]))) {
  display: none;
}

body.creator-page.estudio-playground .pg-ranuras::-webkit-scrollbar { display: none; }

/* Cada ranura es el MISMO nodo de siempre (.creator-referencia-item), solo
   que comprimido a una teja cuadrada. Su JS sigue mandando: si el modelo no
   admite una ranura, le pone [hidden] y desaparece sola. */
body.creator-page.estudio-playground .pg-ranuras .creator-referencia-item {
  position: relative;
  flex: 0 0 auto;
  /* Tejas pequeñas: acompañan al prompt en vez de robarle una fila entera.
     La min-height del marcado original (76 px) hay que bajarla a mano: si
     no, gana ella y la teja sigue midiendo lo mismo que antes. */
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px dashed rgba(241, 255, 248, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

body.creator-page.estudio-playground .pg-ranuras .creator-referencia-item:hover {
  border-color: var(--crear-verde);
  background: rgba(0, 231, 123, .06);
}

/* La ranura con archivo cargado se enciende (borde sólido + luz). */
body.creator-page.estudio-playground .pg-ranuras .creator-referencia-item.tiene-archivo,
body.creator-page.estudio-playground .pg-ranuras .creator-referencia-item:has(img[data-slot-preview]:not([hidden])) {
  border-style: solid;
  border-color: var(--crear-verde);
  box-shadow: 0 0 0 1px rgba(0, 231, 123, .25), 0 0 18px rgba(0, 231, 123, .18);
}

body.creator-page.estudio-playground .pg-ranuras .creator-referencia,
body.creator-page.estudio-playground .pg-ranuras .creator-referencia-ranura {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Dentro de la teja solo cabe el icono: los textos largos ("JPG, PNG o
   WebP") se leen en el emergente de Referencias, no aquí. */
body.creator-page.estudio-playground .pg-ranuras .creator-referencia-ranura > span:not(.creator-referencia-icono),
body.creator-page.estudio-playground .pg-ranuras .creator-referencia-vacia > span:not(.creator-referencia-icono),
body.creator-page.estudio-playground .pg-ranuras .creator-misfotos,
body.creator-page.estudio-playground .pg-ranuras .creator-referencias-estado { display: none; }

body.creator-page.estudio-playground .pg-ranuras .creator-referencia-icono {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  margin: 0 0 2px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--crear-verde-tinta);
  font-size: .78rem;
  font-weight: 800;
}

/* En la teja pequeña ya no cabe rótulo: el nombre largo vive en el title
   (globo al pasar el ratón) y en el emergente de Referencias. */
body.creator-page.estudio-playground .pg-ranura-cap { display: none; }

body.creator-page.estudio-playground .pg-ranuras .creator-referencia-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
}

body.creator-page.estudio-playground .pg-ranuras .creator-referencia-eliminar {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--crear-borde);
  background: #0b100d;
  color: var(--crear-texto);
  font-size: .78rem;
  line-height: 1;
}

/* ---------- 4. El prompt, desnudo ---------- */

body.creator-page.estudio-playground .creator-prompt-fila { margin: 0; }

body.creator-page.estudio-playground .creator-prompt {
  gap: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* La etiqueta "Describe tu idea" sobra: el propio placeholder lo dice. */
body.creator-page.estudio-playground .creator-prompt > .creator-etiqueta { display: none; }

body.creator-page.estudio-playground .creator-prompt textarea {
  /* rows="4" dejaba casi 100 px de caja vacía y la barra crecía hasta
     ocupar media pantalla. Tres líneas bastan para escribir una idea; si
     el texto crece, la caja crece hasta 190 px y luego hace scroll. */
  height: 64px;
  min-height: 64px;
  max-height: 190px;
  overflow-y: auto;
  padding: .3rem .15rem;
  border: 0;
  background: none;
  color: var(--crear-texto);
  font-size: .95rem;
  line-height: 1.45;
  resize: none;
}

body.creator-page.estudio-playground .creator-prompt textarea:focus {
  outline: none;
  box-shadow: none;
}

body.creator-page.estudio-playground .creator-contador {
  position: static;
  align-self: flex-end;
  color: var(--crear-secundario);
  font-size: .62rem;
  opacity: .55;
}

/* ---------- 5. Fila de pastillas ---------- */

/* Dos carriles: las pastillas hacen scroll, las acciones nunca se mueven. */
body.creator-page.estudio-playground .pg-barra {
  /* min-width: 0 es OBLIGATORIO: como celda de rejilla, por defecto vale
     `auto` y eso impide encoger por debajo del contenido. Sin esto la fila
     medía 602 px dentro de una barra de 359 y el botón de crear se salía
     de la pantalla en el móvil. Lo mismo vale para los carriles de dentro. */
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(241, 255, 248, .08);
}

body.creator-page.estudio-playground .pg-ranuras,
body.creator-page.estudio-playground .creator-prompt-fila { min-width: 0; }

body.creator-page.estudio-playground .pg-chips {
  flex: 1 1 auto;
  min-width: 0;               /* sin esto el carril no encoge y desborda */
  display: flex;
  align-items: center;
  gap: .4rem;
  overflow-x: auto;
  scrollbar-width: none;
}

body.creator-page.estudio-playground .pg-chips::-webkit-scrollbar { display: none; }

body.creator-page.estudio-playground .pg-acciones {
  flex: 0 0 auto;
  /* Otra vez la trampa del min-width:auto, ahora un nivel más abajo: como
     elemento flexible no bajaba de su contenido (381 px en 343) y el botón
     de crear volvía a asomarse fuera de la pantalla en el móvil. */
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
}

body.creator-page.estudio-playground .pg-chip {
  flex: 0 0 auto;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .35rem .6rem;
  border: 1px solid rgba(241, 255, 248, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: var(--crear-texto);
  font-size: .76rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

body.creator-page.estudio-playground .pg-chip:hover { border-color: rgba(0, 231, 123, .45); }

body.creator-page.estudio-playground .pg-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--crear-fondo), 0 0 0 4px var(--crear-verde);
}

/* Pastilla con su emergente abierto: encendida. */
body.creator-page.estudio-playground .pg-chip[aria-expanded="true"] {
  border-color: var(--crear-verde);
  background: rgba(0, 231, 123, .1);
  color: var(--crear-verde-tinta);
}

body.creator-page.estudio-playground .pg-chip-rotulo {
  color: var(--crear-secundario);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

body.creator-page.estudio-playground .pg-chip[aria-expanded="true"] .pg-chip-rotulo { color: inherit; opacity: .75; }

body.creator-page.estudio-playground .pg-chip-flecha {
  margin-left: .1rem;
  opacity: .5;
  font-size: .6rem;
}

/* (El interruptor Fácil/Avanzado ya no vive aquí: subió a la barra superior,
   junto a Ver · Crear · Perfil — ver la PARTE COMÚN del principio.) */

/* Las pestañas Imagen/Video, ya dentro de la fila, en versión compacta. */
body.creator-page.estudio-playground .pg-chips .creator-tabs {
  flex: 0 0 auto;
  padding: .16rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
}

body.creator-page.estudio-playground .pg-chips .creator-tab {
  min-height: 30px;
  padding: .3rem .68rem;
  border-radius: 999px;
  font-size: .74rem;
}

body.creator-page.estudio-playground .pg-chips .creator-tab svg { width: 15px; height: 15px; }

/* Seleccionada: relleno menta y tinta oscura — el contraste que pedía la
   hoja de componentes; el verde sobre gris no se leía de un vistazo. */
body.creator-page.estudio-playground .pg-chips .creator-tab.activo {
  background: var(--crear-verde);
  color: #041a10;
  box-shadow: 0 0 16px rgba(0, 231, 123, .28);
}

/* Botón crear, compacto y a la derecha. */
body.creator-page.estudio-playground .pg-chips .creator-generar {
  min-width: 0;
  min-height: 40px;
  grid-template-columns: auto auto;
  gap: 0 .4rem;
  padding: .4rem .9rem;
  border-radius: 999px;
}

body.creator-page.estudio-playground .pg-chips .creator-generar-texto { font-size: .78rem; }
body.creator-page.estudio-playground .pg-chips .creator-generar-costo { font-size: .66rem; }

body.creator-page.estudio-playground .pg-chips #mejorar-idea {
  flex: 0 0 auto;
  min-height: 36px;
  border-radius: 999px;
}

/* El costo estimado se lee junto al botón, sin ocupar una fila entera. */
body.creator-page.estudio-playground .creator-cotizacion {
  flex: 0 0 auto;
  padding: .3rem .55rem;
  border-radius: 999px;
  font-size: .68rem;
}

body.creator-page.estudio-playground .creator-cotizacion small { display: none; }

/* ---------- 6. Emergentes ---------- */

body.creator-page.estudio-playground .pg-emergentes {
  position: relative;
  height: 0;
}

body.creator-page.estudio-playground .pg-emergente {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 70;
  width: min(430px, calc(100vw - 3rem));
  max-height: min(58vh, 520px);
  margin-bottom: .6rem;
  padding: .9rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(241, 255, 248, .14);
  border-radius: var(--pg-radio);
  background: rgba(9, 13, 11, .97);
  backdrop-filter: blur(26px);
  box-shadow: 0 -1px 0 var(--pg-filo) inset, 0 26px 60px rgba(0, 0, 0, .6);
  animation: pg-surgir 160ms cubic-bezier(.22, 1, .36, 1);
}

/* El emergente del motor necesita más sitio: son tarjetas con precio. */
body.creator-page.estudio-playground .pg-emergente[data-ancho="grande"] { width: min(640px, calc(100vw - 3rem)); }

body.creator-page.estudio-playground .pg-emergente[hidden] { display: none; }

@keyframes pg-surgir {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.creator-page.estudio-playground .pg-emergente { animation: none; }
}

/* Dentro del emergente, el panel de siempre pierde su caja (ya la pone el
   emergente) para no tener dos marcos uno dentro de otro. */
body.creator-page.estudio-playground .pg-emergente .creator-panel-seccion {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

body.creator-page.estudio-playground .pg-emergente .creator-seccion-cabecera { margin-bottom: .6rem; }
body.creator-page.estudio-playground .pg-emergente .creator-seccion-cabecera h2 { font-size: .92rem; }

/* ---------- 7. Galería a pantalla completa ---------- */

body.creator-page.estudio-playground .creator-biblioteca-cabecera {
  position: sticky;
  top: 66px;
  z-index: 30;
  padding-block: .6rem;
  background: linear-gradient(180deg, var(--crear-fondo) 72%, transparent);
}

/* Rejilla más densa: en el playground se compara, no se contempla. */
body.creator-page.estudio-playground .creator-resultados {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .7rem;
}

/* El cartel de galería vacía se estiraba hasta ocupar todo el lienzo y su
   botón acababa DEBAJO de la barra flotante, imposible de tocar. Aquí se
   queda a media altura, siempre por encima de la barra. */
body.creator-page.estudio-playground .creator-vacio {
  min-height: 0;
  max-width: 560px;
  margin-inline: auto;
  padding-block: clamp(1rem, 5vh, 2.5rem);
}

/* La barra se centra sobre el LIENZO, no sobre la ventana: a partir de
   1080 px la barra lateral de mundos es permanente y ocupa su hueco. */
@media (min-width: 1080px) {
  body.creator-page.estudio-playground .creator-composer {
    left: calc(var(--crear-sidebar) + 1rem);
  }
}

/* (Ya no hay inspector al que dejarle sitio: la barra usa todo el lienzo.) */

/* ---------- 7 ter. Biblioteca: Creaciones | Archivos ---------- */

body.creator-page.estudio-playground .pg-biblio-pestanas {
  display: inline-flex;
  gap: .15rem;
  padding: .16rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blanco-luz) 6%, transparent);
}

body.creator-page.estudio-playground .pg-biblio-pestana {
  min-height: 32px;
  padding: .3rem .8rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--crear-secundario);
  font-size: .74rem;
  font-weight: 720;
  cursor: pointer;
}

body.creator-page.estudio-playground .pg-biblio-pestana[aria-selected="true"] {
  background: var(--crear-verde);
  color: #041a10;
}

body.creator-page.estudio-playground .pg-biblio-ayuda {
  margin-bottom: .7rem;
  color: var(--crear-secundario);
  font-size: .76rem;
}

/* En la pestaña de Archivos las miniaturas dejan de ser una tira estrecha:
   es una rejilla de verdad, con sitio para ver y renombrar. */
body.creator-page.estudio-playground .pg-biblio-panel #misfotos-tira {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: .6rem;
  overflow: visible;
}

body.creator-page.estudio-playground .pg-biblio-panel .creator-misfoto {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
}

body.creator-page.estudio-playground .pg-biblio-panel .creator-misfoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Etiqueta del apodo: la que se invoca luego con @ en el prompt. */
body.creator-page.estudio-playground .pg-apodo {
  position: absolute;
  left: .35rem;
  right: .35rem;
  bottom: .35rem;
  padding: .18rem .4rem;
  border-radius: 999px;
  background: rgba(6, 12, 9, .82);
  backdrop-filter: blur(8px);
  color: var(--crear-verde-tinta);
  font-size: .64rem;
  font-weight: 760;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
}

body.creator-page.estudio-playground .pg-apodo:hover {
  background: rgba(0, 231, 123, .22);
  color: var(--blanco-luz);
}

/* En la tira pequeña (dentro del emergente de Referencias) el apodo estorba. */
body.creator-page.estudio-playground .pg-emergente .pg-apodo { display: none; }

/* ---------- 7 bis. Barra lateral ---------- */

/* "Entra para ver tu saldo" salía cortado a media palabra (132 px de texto
   en 94 px de hueco). El bloque de créditos no dejaba encoger a su texto. */
body.creator-page.estudio-playground .creator-creditos,
body.creator-page.estudio-playground .creator-perfil-enlace { min-width: 0; }

body.creator-page.estudio-playground .creator-creditos strong,
body.creator-page.estudio-playground .creator-creditos small {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* La estrellita del saldo se recortaba (16 px de glifo en 11 de caja). */
body.creator-page.estudio-playground .creator-creditos-icono {
  flex: 0 0 auto;
  width: auto;
  min-width: 1.1em;
  overflow: visible;
  text-align: center;
}

/* ---------- 8. Inspector ---------- */

/* La barra lateral de mundos NO se toca: en la Fase 1.5 pasó a ser un cajón
   que se abre con su botón en todos los tamaños. Forzarla a permanente
   dejaba 254 px reservados en la rejilla y sacaba scroll horizontal. */

/* El inspector solo cabe con holgura en pantallas anchas; por debajo, la
   galería y la barra flotante mandan (sus datos siguen en cada tarjeta).
   Al ocultarlo hay que RETIRAR TAMBIÉN SU COLUMNA: con display:none la
   columna seguía reservada y la galería se quedaba 276 px corta, sin que
   se viera por qué. */
/* (El inspector ya no existe en ningún tamaño: ver la PARTE COMÚN.) */

/* ---------- 9. Móvil ---------- */

/* Con la navegación inferior en pantalla (hasta 899 px) la barra tiene que
   subirse por encima: si no, se le sienta justo encima y tapa Ver/Crear/Perfil. */
@media (max-width: 899px) {
  body.creator-page.estudio-playground .creator-composer {
    bottom: calc(72px + .5rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 719px) {
  body.creator-page.estudio-playground { --pg-barra: 300px; }

  body.creator-page.estudio-playground .creator-composer {
    left: .5rem;
    right: .5rem;
    padding: .7rem;
  }

  /* En un móvil no caben pastillas y acciones en la misma línea (sumaban
     546 px en un hueco de 343): las acciones bajan a su propia fila y el
     botón de crear se estira para ser el objetivo grande y evidente. */
  body.creator-page.estudio-playground .pg-barra { flex-wrap: wrap; }

  body.creator-page.estudio-playground .pg-chips { flex: 1 1 100%; }

  body.creator-page.estudio-playground .pg-acciones {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  /* El bloque de costo suelto se retira en móvil: el precio ya viaja DENTRO
     del botón de crear ("✦ Crear imagen · 0,07 US$"), así que repetirlo
     costaba 113 px y volvía a echar el botón fuera de la pantalla. */
  body.creator-page.estudio-playground .pg-acciones .creator-cotizacion { display: none; }

  /* Los controles de la fila de acciones suman más que el ancho del móvil
     y el botón de crear acababa fuera. El botón es intocable; el resto cede:
     se encoge y recorta con puntos suspensivos. */
  body.creator-page.estudio-playground .pg-acciones #mejorar-idea {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body.creator-page.estudio-playground .pg-acciones .creator-cotizacion span,
  body.creator-page.estudio-playground .pg-acciones .creator-cotizacion strong {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body.creator-page.estudio-playground .pg-acciones .creator-generar {
    flex: 0 0 auto;
    justify-content: center;
  }

  body.creator-page.estudio-playground .pg-ranuras .creator-referencia-item { width: 54px; height: 54px; }
  body.creator-page.estudio-playground .pg-chips .creator-generar { padding-inline: .7rem; }
  body.creator-page.estudio-playground .creator-resultados { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
}