/* ================================================================
   COCUYO CREAR — estudio cinematográfico
   Comparte la paleta negra, verde esmeralda y marfil de Cocuyo Ver.
   Todo está aislado bajo creator-page.
   ================================================================ */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.oculto { display: none !important; }
.creator-page [hidden] { display: none !important; }

body.creator-page {
  /* Estos valores son solo el respaldo por si tokens.css no llegara: más
     abajo (sección "COCUYO STUDIO") se reasignan a los tokens globales, que
     son la fuente de verdad. Se dejan al día con la paleta aclarada del
     29-jul-2026 para que respaldo y realidad no se contradigan. */
  --crear-fondo: #0b100d;
  --crear-superficie: #151c18;
  --crear-superficie-suave: #1b2320;
  --crear-texto: #f1fff8;
  --crear-secundario: #b4c3ba;
  --crear-borde: #27332c;
  --crear-verde: #00e77b;
  --crear-verde-fuerte: #42f69f;
  --crear-verde-tinta: #8dffc9;
  --crear-sombra: 0 22px 70px rgba(0, 0, 0, .48);
  --crear-sidebar: 254px;
  color-scheme: dark;
  background:
    radial-gradient(circle at 82% -10%, rgba(0, 231, 123, .09), transparent 34rem),
    var(--crear-fondo);
  color: var(--crear-texto);
  min-height: 100dvh;
  padding-top: 0;
  overflow-x: hidden;
}

.creator-page button,
.creator-page input,
.creator-page select,
.creator-page textarea { color: var(--crear-texto); }

/* (El anillo de foco del Estudio ya NO se sustituye: aquí vivía un outline
   verde al 32% = 2,17:1, por debajo del 3:1 que exige WCAG para indicadores.
   Ahora hereda el --anillo-foco de tokens.css, el doble anillo de la casa.) */

.creator-saltar {
  position: fixed;
  top: max(.75rem, env(safe-area-inset-top));
  left: 50%;
  z-index: 1000;
  padding: .7rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 231, 123, .42);
  background: var(--crear-superficie);
  color: var(--crear-verde);
  transform: translate(-50%, -180%);
  transition: transform 160ms ease;
}

.creator-saltar:focus { transform: translate(-50%, 0); }

.creator-shell {
  display: grid;
  grid-template-columns: var(--crear-sidebar) minmax(0, 1fr);
  min-height: 100dvh;
}

/* ---------- Barra de proyectos ---------- */
.creator-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 120;
  width: var(--crear-sidebar);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: calc(1.25rem + env(safe-area-inset-top)) 1rem 1rem;
  border-right: 1px solid var(--crear-borde);
  background: rgba(16, 22, 19, .93);
  backdrop-filter: blur(22px);
}

.creator-marca {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: .35rem;
}

.creator-marca .wordmark {
  color: var(--crear-texto);
  font-size: .96rem;
  letter-spacing: .18em;
}

.creator-marca .wordmark .o-viva {
  color: var(--crear-verde);
  text-shadow: 0 0 12px rgba(0, 200, 107, .32);
}

.creator-icon-btn {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--crear-secundario);
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.creator-icon-btn:hover,
.creator-icon-btn.activo {
  color: var(--crear-verde);
  border-color: var(--crear-borde);
  background: var(--crear-superficie);
}

.creator-cerrar-proyectos { display: none; }

.creator-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .7rem 1rem;
  border: 1px solid var(--crear-borde);
  border-radius: 13px;
  background: var(--crear-superficie);
  color: var(--crear-texto);
  font-weight: 750;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.creator-btn:hover {
  border-color: rgba(0, 231, 123, .46);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .26);
}

.creator-btn:active { transform: scale(.98); }

.creator-btn-primario,
.creator-btn-nuevo {
  border-color: var(--crear-verde);
  background: var(--crear-verde);
  color: #041a10;
}

.creator-btn-nuevo {
  width: 100%;
  justify-content: flex-start;
  box-shadow: 0 8px 24px rgba(0, 231, 123, .15);
}

.creator-proyectos-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .4rem 0;
}

.creator-proyectos-cabecera h2 {
  color: var(--crear-secundario);
  font-size: .71rem;
  letter-spacing: .095em;
  text-transform: uppercase;
}

.creator-proyectos-cabecera span {
  min-width: 23px;
  padding: .15rem .4rem;
  border-radius: 999px;
  background: var(--crear-superficie-suave);
  color: var(--crear-secundario);
  font-size: .68rem;
  text-align: center;
}

.creator-proyectos {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .25rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.creator-proyecto {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  padding: .55rem;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--crear-secundario);
  text-align: left;
}

.creator-proyecto:hover { background: var(--crear-superficie-suave); }

.creator-proyecto.activo {
  border-color: var(--crear-borde);
  background: var(--crear-superficie);
  color: var(--crear-texto);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}

.creator-proyecto-miniatura {
  width: 34px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background:
    radial-gradient(circle at 65% 30%, rgba(0, 231, 123, .8), transparent 18%),
    linear-gradient(145deg, #143c2b, #071c13);
  color: #fff;
  font-size: .7rem;
}

.creator-proyecto-datos {
  min-width: 0;
  display: grid;
  gap: .05rem;
}

.creator-proyecto-datos strong,
.creator-proyecto-datos small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-proyecto-datos strong { font-size: .81rem; }
.creator-proyecto-datos small { color: var(--crear-secundario); font-size: .72rem; }

.creator-sidebar-pie {
  display: grid;
  gap: .7rem;
  padding-top: .85rem;
  border-top: 1px solid var(--crear-borde);
}

.creator-creditos,
.creator-perfil-enlace {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem;
  border-radius: 12px;
}

.creator-creditos { background: var(--crear-superficie-suave); }

.creator-creditos-icono {
  color: var(--crear-verde);
  font-size: 1.2rem;
}

.creator-creditos span,
.creator-perfil-enlace span { min-width: 0; display: grid; }
.creator-creditos small,
.creator-perfil-enlace small { color: var(--crear-secundario); font-size: .72rem; }
.creator-creditos strong,
.creator-perfil-enlace strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }

.creator-perfil-enlace {
  grid-template-columns: auto minmax(0, 1fr) auto;
  color: var(--crear-texto);
}

.creator-perfil-enlace:hover { background: var(--crear-superficie-suave); }

.creator-avatar {
  width: 34px;
  height: 34px;
  display: grid !important;
  place-items: center;
  border-radius: 50%;
  background: var(--crear-verde);
  color: #041a10;
  font-weight: 800;
}

.creator-drawer-fondo { display: none; }

/* ---------- Área principal ---------- */
.creator-workspace {
  grid-column: 2;
  min-width: 0;
  min-height: 100dvh;
}

.creator-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(.65rem + env(safe-area-inset-top)) clamp(1rem, 3vw, 2.4rem) .65rem;
  border-bottom: 1px solid rgba(241, 255, 248, .09);
  background: rgba(11, 16, 13, .84);
  backdrop-filter: blur(18px);
}

.creator-topbar-izq {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .65rem;
}

.creator-abrir-proyectos { display: none; }

.creator-titulo-proyecto { min-width: 0; }

.creator-titulo-proyecto input {
  width: min(31vw, 360px);
  min-width: 150px;
  min-height: 44px;
  padding: .5rem .65rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  font-size: .9rem;
  font-weight: 780;
  text-overflow: ellipsis;
}

.creator-titulo-proyecto input:hover,
.creator-titulo-proyecto input:focus {
  border-color: var(--crear-borde);
  background: var(--crear-superficie);
}

.creator-guardado {
  color: var(--crear-secundario);
  font-size: .72rem;
  white-space: nowrap;
}

.creator-topnav {
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .25rem;
  border: 1px solid var(--crear-borde);
  border-radius: 999px;
  background: var(--crear-superficie);
}

.creator-topnav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: .46rem .9rem;
  border-radius: 999px;
  color: var(--crear-secundario);
  font-size: .78rem;
  font-weight: 730;
}

.creator-topnav a:hover { color: var(--crear-texto); }

.creator-topnav a.activo {
  background: var(--crear-verde);
  color: #041a10;
}

.creator-main {
  min-height: calc(100dvh - 66px);
  display: flex;
  flex-direction: column;
}

.creator-lienzo {
  width: min(100%, 1300px);
  min-height: 0;
  flex: 1 1 auto;
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2.3rem);
}

.creator-lienzo-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.creator-estudio-cabecera {
  width: min(100%, 1640px);
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.3rem) clamp(1.25rem, 3vw, 2.8rem) 0;
}

.creator-kicker {
  margin-bottom: .25rem;
  color: var(--crear-verde);
  font-size: .7rem;
  font-weight: 820;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.creator-lienzo h1,
.creator-estudio-cabecera h1 {
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}

.creator-vista-controles {
  display: flex;
  padding: .2rem;
  border: 1px solid var(--crear-borde);
  border-radius: 13px;
  background: var(--crear-superficie);
}

/* GALERÍA DE CREACIONES.
   Antes eran 2 columnas fijas en móvil y 4 en escritorio, así que cada pieza
   salía ENORME y apenas cabían tres o cuatro en pantalla: para ver lo que
   habías hecho tocaba bajar y bajar. El dueño lo pidió al revés (27-jul-2026):
   recuadros PEQUEÑOS, como una galería de fotos de verdad.
   Con auto-fill + minmax la cuadrícula se llena sola con las que quepan, así
   que el mismo código sirve para un móvil estrecho y para un monitor ancho
   sin listas de puntos de ruptura que mantener. */
.creator-resultados {
  min-height: clamp(315px, 48vh, 650px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: .55rem;
  align-content: start;
}

.creator-vacio {
  grid-column: 1 / -1;
  width: min(100%, 540px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  margin: auto;
  padding: clamp(2rem, 7vw, 4.5rem) 1.2rem;
  color: var(--crear-secundario);
  text-align: center;
}

.creator-vacio h2 {
  color: var(--crear-texto);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.creator-vacio p {
  max-width: 470px;
  font-size: .9rem;
}

.creator-orbita {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin-bottom: .5rem;
  border: 1px solid rgba(0, 231, 123, .28);
  border-radius: 50%;
  background: rgba(0, 231, 123, .07);
}

.creator-orbita::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(0, 231, 123, .34);
  border-radius: 50%;
  animation: creator-giro 10s linear infinite;
}

.creator-orbita span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--crear-verde);
  box-shadow: 0 0 22px rgba(0, 231, 123, .55);
}

.creator-orbita i {
  position: absolute;
  top: 9px;
  left: 34px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--crear-verde);
  transform-origin: 2px 27px;
  animation: creator-giro 5s linear infinite;
}

@keyframes creator-giro { to { transform: rotate(360deg); } }

.creator-sugerencia {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .35rem;
  padding: .65rem .9rem;
  border: 1px solid var(--crear-borde);
  border-radius: 999px;
  background: var(--crear-superficie);
  color: var(--crear-verde-tinta);
  font-size: .76rem;
  font-weight: 730;
}

.creator-sugerencia:hover { border-color: rgba(0, 231, 123, .5); }

/* ---------- Resultado / tarea ---------- */
.creator-resultado {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--crear-borde);
  border-radius: 18px;
  background: var(--crear-superficie);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .3);
}

.creator-resultado-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 70% 20%, rgba(0, 231, 123, .13), transparent 30%),
    linear-gradient(145deg, #101713, #080c0a);
}

.creator-resultado[data-aspecto="9:16"] .creator-resultado-media {
  width: min(100%, 320px);
  aspect-ratio: 9 / 16;
  margin-inline: auto;
}

.creator-resultado[data-aspecto="1:1"] .creator-resultado-media { aspect-ratio: 1; }
.creator-resultado[data-aspecto="4:3"] .creator-resultado-media { aspect-ratio: 4 / 3; }
.creator-resultado[data-aspecto="3:4"] .creator-resultado-media { aspect-ratio: 3 / 4; }
.creator-resultado[data-aspecto="3:2"] .creator-resultado-media { aspect-ratio: 3 / 2; }
.creator-resultado[data-aspecto="2:3"] .creator-resultado-media { aspect-ratio: 2 / 3; }
.creator-resultado[data-aspecto="21:9"] .creator-resultado-media { aspect-ratio: 21 / 9; }

.creator-resultado-media img,
.creator-resultado-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #08110c;
}

.creator-resultado-espera {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
}

.creator-resultado-espera div { display: grid; justify-items: center; gap: .7rem; }

.creator-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(0, 231, 123, .18);
  border-top-color: var(--crear-verde);
  border-radius: 50%;
  animation: creator-giro 850ms linear infinite;
}

.creator-resultado-espera strong { font-size: .85rem; }
.creator-resultado-espera small { max-width: 270px; color: var(--crear-secundario); }

.creator-resultado-pie {
  display: grid;
  gap: .35rem;
  padding: .9rem 1rem 1rem;
}

.creator-resultado-pie p {
  overflow: hidden;
  color: var(--crear-texto);
  font-size: .8rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-resultado-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  color: var(--crear-secundario);
  font-size: .75rem;
}

.creator-estado-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--crear-verde-tinta);
  font-weight: 750;
}

.creator-estado-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crear-verde);
}

.creator-resultado.error .creator-estado-chip { color: #ff8a98; }
.creator-resultado.error .creator-estado-chip::before { background: #e44355; }

/* ---------- Compositor ---------- */
.creator-composer {
  z-index: 45;
  width: min(calc(100% - clamp(2rem, 6vw, 5rem)), 1120px);
  display: grid;
  gap: .9rem;
  align-self: center;
  margin: 0 auto 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(241, 255, 248, .12);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(24, 32, 27, .98), rgba(17, 23, 20, .98));
  box-shadow: var(--crear-sombra);
  backdrop-filter: blur(18px);
}

.creator-composer-cabecera {
  display: flex;
  /* wrap: a 360px, Imagen/Video + Fácil/Avanzado no cabían y el overflow-x
     hidden del body recortaba el selector de modo EN SILENCIO. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.creator-tabs {
  display: flex;
  gap: .25rem;
  padding: .18rem;
  justify-self: start;
  border-radius: 10px;
  background: var(--crear-superficie-suave);
}

.creator-tab {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .85rem;
  border-radius: 8px;
  color: var(--crear-secundario);
  font-size: .76rem;
  font-weight: 740;
}

.creator-tab.activo {
  background: var(--crear-superficie);
  color: var(--crear-verde);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .26);
}

.creator-estudio-distintivo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .65rem;
  border: 1px solid var(--crear-borde);
  border-radius: 999px;
  color: var(--crear-secundario);
  font-size: .6875rem;
  font-weight: 760;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.creator-estudio-distintivo i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crear-verde);
  box-shadow: 0 0 10px rgba(0, 231, 123, .65);
}

.creator-prompt-fila {
  position: relative;
  min-width: 0;
}

.creator-prompt {
  position: relative;
  min-width: 0;
  display: grid;
  gap: .35rem;
}

.creator-etiqueta {
  color: var(--crear-secundario);
  font-size: .75rem;
  font-weight: 770;
  letter-spacing: .04em;
}

.creator-prompt textarea {
  width: 100%;
  min-height: 104px;
  max-height: 230px;
  resize: vertical;
  padding: .85rem .95rem 1.65rem;
  border: 1px solid var(--crear-borde);
  border-radius: 13px;
  background:
    radial-gradient(circle at 100% 0, rgba(0, 231, 123, .045), transparent 12rem),
    #080c0a;
  color: var(--crear-texto);
  font-size: .92rem;
  line-height: 1.5;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.creator-prompt textarea:focus {
  border-color: rgba(0, 231, 123, .48);
  box-shadow: inset 0 0 0 1px rgba(0, 231, 123, .08);
}

.creator-prompt textarea::placeholder { color: #8fa197; }

.creator-contador {
  position: absolute;
  right: .75rem;
  bottom: .4rem;
  color: #94a89c;
  font-size: .6875rem;
  pointer-events: none;
}

.creator-opciones {
  min-width: 0;
  display: grid;
  gap: .75rem;
}

.creator-panel-seccion {
  min-width: 0;
  padding: .85rem;
  border: 1px solid rgba(241, 255, 248, .09);
  border-radius: 15px;
  background: rgba(5, 8, 6, .56);
}

.creator-seccion-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .75rem;
}

.creator-seccion-cabecera > div {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: .65rem;
}

.creator-numero-paso {
  flex: 0 0 auto;
  padding-top: .1rem;
  color: rgba(0, 231, 123, .68);
  font-size: .62rem;
  font-weight: 840;
  letter-spacing: .08em;
}

.creator-seccion-cabecera h2 {
  color: var(--crear-texto);
  font-size: .92rem;
  line-height: 1.25;
}

.creator-seccion-cabecera p:not(.creator-numero-paso) {
  margin-top: .12rem;
  color: var(--crear-secundario);
  font-size: .75rem;
  line-height: 1.35;
}

.creator-recomendado,
.creator-opcional {
  flex: 0 0 auto;
  padding: .28rem .48rem;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 790;
  white-space: nowrap;
}

.creator-recomendado {
  border: 1px solid rgba(0, 231, 123, .22);
  background: rgba(0, 231, 123, .08);
  color: var(--crear-verde-tinta);
}

.creator-opcional {
  border: 1px solid var(--crear-borde);
  color: var(--crear-secundario);
}

.creator-campo {
  min-width: 0;
  display: grid;
  gap: .25rem;
}

.creator-campo > span {
  padding-left: .25rem;
  color: var(--crear-secundario);
  font-size: .75rem;
  font-weight: 730;
}

.creator-campo select,
.creator-campo input:not([type="range"]),
.creator-campo textarea {
  width: 100%;
  min-height: 44px;
  padding: .55rem 2rem .55rem .7rem;
  border: 1px solid var(--crear-borde);
  border-radius: 9px;
  background: var(--crear-superficie);
  color: var(--crear-texto);
  font-size: .73rem;
}

.creator-campo textarea {
  min-height: 72px;
  padding-right: .7rem;
  resize: vertical;
  line-height: 1.45;
}

.creator-campo select:disabled,
.creator-campo input:disabled,
.creator-campo textarea:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.creator-campo-modelo > span:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.creator-select-envoltorio {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 52px;
  overflow: hidden;
  border: 1px solid rgba(0, 231, 123, .25);
  border-radius: 12px;
  background:
    linear-gradient(115deg, rgba(0, 231, 123, .07), transparent 48%),
    var(--crear-superficie);
}

.creator-modelo-marca {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-left: .55rem;
  border: 1px solid rgba(0, 231, 123, .24);
  border-radius: 9px;
  background: rgba(0, 231, 123, .08);
  color: var(--crear-verde);
}

.creator-select-envoltorio select {
  z-index: 1;
  min-height: 50px;
  padding: .65rem .45rem;
  border: 0;
  outline: 0;
  background: transparent;
  appearance: none;
  font-size: .82rem;
  font-weight: 760;
}

.creator-select-envoltorio > svg {
  margin-right: .7rem;
  color: var(--crear-secundario);
  pointer-events: none;
}

.creator-modelos-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .48rem;
  max-height: 285px;
  overflow-y: auto;
  padding: .08rem;
  scrollbar-width: thin;
}

.creator-modelo-tarjeta {
  position: relative;
  min-width: 0;
  min-height: 94px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: .08rem .5rem;
  align-content: start;
  padding: .62rem;
  overflow: hidden;
  border: 1px solid var(--crear-borde);
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0, rgba(0, 231, 123, .055), transparent 55%),
    rgba(21, 28, 24, .92);
  color: var(--crear-texto);
  text-align: left;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.creator-modelo-tarjeta:hover {
  border-color: rgba(0, 231, 123, .32);
  transform: translateY(-1px);
}

.creator-modelo-tarjeta[aria-checked="true"] {
  border-color: rgba(0, 231, 123, .72);
  background:
    radial-gradient(circle at 100% 0, rgba(0, 231, 123, .13), transparent 58%),
    #0d1511;
  box-shadow: inset 0 0 0 1px rgba(0, 231, 123, .08);
}

.creator-modelo-icono {
  grid-row: 1 / span 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(241, 255, 248, .13);
  border-radius: 10px;
  background: #151b18;
  color: #effff6;
  font-size: .72rem;
  font-weight: 880;
  letter-spacing: -.02em;
}

.creator-modelo-icono[data-icono="cocuyo"] {
  border-color: rgba(0, 231, 123, .3);
  background: rgba(0, 231, 123, .09);
  color: var(--crear-verde);
  text-shadow: 0 0 10px rgba(0, 231, 123, .42);
}

.creator-modelo-icono[data-icono="grok"] { background: #f0f3f1; color: #080a09; }
.creator-modelo-icono[data-icono="google"] {
  background: linear-gradient(135deg, #4285f4, #34a853 47%, #fbbc05 72%, #ea4335);
  color: #fff;
}
.creator-modelo-icono[data-icono="openai"] { background: #eef2f0; color: #0b1510; }
.creator-modelo-icono[data-icono="seedance"] {
  background: linear-gradient(145deg, #5b42ff, #ff4ba8);
  color: #fff;
}
.creator-modelo-icono[data-icono="kling"] {
  background: linear-gradient(145deg, #d8ff36, #7ecc00);
  color: #101807;
}
.creator-modelo-icono[data-icono="veo"] {
  background: linear-gradient(145deg, #3888ff, #8d4fff);
  color: #fff;
}

.creator-modelo-nombre {
  min-width: 0;
  overflow: hidden;
  color: var(--crear-texto);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-modelo-autor {
  min-width: 0;
  overflow: hidden;
  color: #788a80;
  font-size: .62rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-modelo-pie {
  min-width: 0;
  display: flex;
  align-self: end;
  align-items: center;
  justify-content: space-between;
  gap: .35rem;
  padding-top: .3rem;
}

.creator-modelo-precio {
  min-width: 0;
  overflow: hidden;
  color: var(--crear-verde-tinta);
  font-size: .65rem;
  font-weight: 790;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-modelo-estado {
  flex: 0 0 auto;
  padding: .18rem .32rem;
  border: 1px solid rgba(241, 255, 248, .1);
  border-radius: 999px;
  color: #82948a;
  font-size: .54rem;
  font-weight: 780;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.creator-modelo-tarjeta[data-disponible="true"] .creator-modelo-estado {
  border-color: rgba(0, 231, 123, .22);
  background: rgba(0, 231, 123, .07);
  color: var(--crear-verde-tinta);
}

.creator-catalogo-nota {
  margin-top: .45rem;
  color: #718078;
  font-size: .625rem;
  line-height: 1.4;
}

.creator-modelo-descripcion {
  margin-top: .6rem;
  color: var(--crear-secundario);
  font-size: .75rem;
  line-height: 1.45;
}

.creator-capacidades {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .55rem;
}

.creator-capacidades span {
  padding: .3rem .48rem;
  border: 1px solid var(--crear-borde);
  border-radius: 999px;
  background: rgba(16, 23, 19, .72);
  color: #b8c8bf;
  font-size: .6875rem;
  font-weight: 680;
}

.creator-referencias-lista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(154px, 1fr);
  gap: .55rem;
  overflow-x: auto;
  padding: .05rem .05rem .4rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.creator-referencia-item {
  position: relative;
  min-width: 0;
  min-height: 84px;
  scroll-snap-align: start;
}

.creator-referencia,
.creator-referencia-ranura {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 84px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem;
  border: 1px dashed rgba(180, 195, 186, .4);
  border-radius: 12px;
  background: rgba(16, 23, 19, .7);
  color: var(--crear-secundario);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.creator-referencia:hover,
.creator-referencia-ranura:hover {
  border-color: rgba(0, 231, 123, .58);
  background: rgba(0, 231, 123, .055);
}

.creator-referencia.arrastrando,
.creator-referencia-ranura.arrastrando {
  border-color: var(--crear-verde);
  background: rgba(0, 231, 123, .11);
  box-shadow: inset 0 0 0 1px rgba(0, 231, 123, .18);
}

.creator-referencia:active,
.creator-referencia-ranura:active { transform: scale(.985); }

.creator-referencia input,
.creator-referencia-ranura input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.creator-referencia:focus-within,
.creator-referencia-ranura:focus-within {
  outline: 3px solid rgba(0, 231, 123, .32);
  outline-offset: 2px;
}

.creator-referencia-vacia {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .65rem;
  pointer-events: none;
}

.creator-referencia-vacia > span:last-child,
.creator-referencia-ranura > span:last-child {
  min-width: 0;
  display: grid;
  gap: .12rem;
}

.creator-referencia-vacia strong,
.creator-referencia-ranura strong {
  overflow: hidden;
  color: var(--crear-texto);
  font-size: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-referencia-vacia small,
.creator-referencia-ranura small {
  color: var(--crear-secundario);
  font-size: .6875rem;
  line-height: 1.3;
}

.creator-referencia-icono {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 231, 123, .22);
  border-radius: 9px;
  background: rgba(0, 231, 123, .07);
  color: var(--crear-verde);
  font-size: .72rem;
  font-style: normal;
  font-weight: 820;
}

.creator-referencia-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(0, 231, 123, .34);
  border-radius: 12px;
  background: #07100b;
  object-fit: cover;
  pointer-events: none;
}

.creator-referencia-preview-local {
  display: block;
}

.creator-referencia-preview-local > img,
.creator-referencia-preview-local > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creator-referencia-preview-local > span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(0, 231, 123, .14), #07100b 70%);
  color: var(--crear-verde);
  font-size: 1.4rem;
}

.creator-referencia-preview-local > small {
  position: absolute;
  right: .35rem;
  bottom: .35rem;
  left: .35rem;
  overflow: hidden;
  padding: .28rem .4rem;
  border-radius: 7px;
  background: rgba(11, 16, 13, .78);
  color: var(--crear-texto);
  font-size: .6875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.creator-referencia-previews {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  padding: .3rem;
  border: 1px solid rgba(0, 231, 123, .34);
  border-radius: 12px;
  background: #07100b;
  scrollbar-width: thin;
  pointer-events: none;
}

.creator-referencia-preview-item {
  position: relative;
  min-width: 74px;
  overflow: hidden;
  flex: 1 0 74px;
  border-radius: 9px;
  background: #0d1712;
}

.creator-referencia-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creator-referencia-preview-item > span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--crear-verde);
  font-size: 1.25rem;
}

.creator-referencia-preview-item small {
  position: absolute;
  right: .2rem;
  bottom: .2rem;
  left: .2rem;
  overflow: hidden;
  padding: .18rem .26rem;
  border-radius: 6px;
  background: rgba(11, 16, 13, .78);
  color: var(--crear-texto);
  font-size: .625rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-referencia-eliminar-item {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 0 9px 0 12px;
  background: rgba(11, 16, 13, .86);
  color: var(--crear-texto);
  font-size: 1.1rem;
  pointer-events: auto;
}

.creator-referencia-eliminar-item:hover {
  color: #ffb1ba;
}

.creator-referencia-audio {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 3.2rem .7rem .75rem;
  color: var(--crear-texto);
}

.creator-referencia-audio > span {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 231, 123, .12);
  color: var(--crear-verde);
}

.creator-referencia-audio strong {
  overflow: hidden;
  font-size: .6875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-referencia-eliminar {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 4;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(241, 255, 248, .18);
  border-radius: 11px;
  background: rgba(11, 16, 13, .82);
  color: var(--crear-texto);
  font-size: 1.15rem;
  line-height: 1;
  backdrop-filter: blur(10px);
}

.creator-referencia-eliminar:hover {
  border-color: rgba(255, 136, 148, .55);
  color: #ffb1ba;
}

.creator-referencias-estado {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  margin-top: .35rem;
  color: #788a80;
  font-size: .7rem;
  line-height: 1.4;
}

.creator-referencias-estado::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  margin-top: .32rem;
  border-radius: 50%;
  background: var(--crear-verde);
}

.creator-ajustes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
}

.creator-avanzado {
  padding: 0;
}

.creator-avanzado summary {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .65rem;
  padding: .7rem .85rem;
  color: var(--crear-texto);
  cursor: pointer;
  list-style: none;
  font-size: .8rem;
  font-weight: 750;
}

.creator-avanzado summary:focus-visible {
  outline: 3px solid rgba(0, 231, 123, .72);
  outline-offset: 2px;
}

.creator-avanzado summary::-webkit-details-marker { display: none; }

.creator-avanzado summary > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.creator-avanzado summary small {
  color: var(--crear-secundario);
  font-size: .7rem;
  font-weight: 620;
}

.creator-avanzado summary > svg {
  color: var(--crear-secundario);
  transition: transform 170ms ease;
}

.creator-avanzado[open] summary > svg { transform: rotate(180deg); }

.creator-avanzado-icono {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(0, 231, 123, .07);
  color: var(--crear-verde);
  font-size: 1rem;
}

.creator-avanzado-contenido {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  padding: .15rem .85rem .85rem;
  border-top: 1px solid rgba(241, 255, 248, .07);
}

.creator-avanzado-contenido > * { margin-top: .7rem; }
.creator-campo-ancho { grid-column: 1 / -1; }

.creator-rango > span {
  display: flex;
  justify-content: space-between;
  gap: .7rem;
}

.creator-rango output {
  color: var(--crear-verde-tinta);
  font-variant-numeric: tabular-nums;
}

.creator-rango input[type="range"] {
  width: 100%;
  min-height: 44px;
  accent-color: var(--crear-verde);
}

/* Deslizador de la duración del video. Mismo verde y misma zona táctil que
   el resto de rangos; el número va al lado de la etiqueta "Duración" para
   que se lea mientras se arrastra sin mirar a otro sitio. */
.creator-duracion-rango {
  width: 100%;
  min-height: 44px;
  accent-color: var(--crear-verde);
}

.creator-duracion-valor {
  color: var(--crear-verde-tinta);
  font-variant-numeric: tabular-nums;
  margin-left: .35rem;
}

.creator-interruptor {
  min-height: 52px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  cursor: pointer;
}

.creator-interruptor input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.creator-interruptor > span[aria-hidden] {
  position: relative;
  width: 42px;
  height: 24px;
  border: 1px solid var(--crear-borde);
  border-radius: 999px;
  background: #151d18;
  transition: background 150ms ease, border-color 150ms ease;
}

.creator-interruptor > span[aria-hidden]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #718078;
  transition: transform 150ms ease, background 150ms ease;
}

.creator-interruptor input:checked + span[aria-hidden] {
  border-color: var(--crear-verde);
  background: rgba(0, 231, 123, .16);
}

.creator-interruptor input:checked + span[aria-hidden]::after {
  background: var(--crear-verde);
  transform: translateX(18px);
}

.creator-interruptor input:focus-visible + span[aria-hidden] {
  outline: 3px solid rgba(0, 231, 123, .32);
  outline-offset: 2px;
}

.creator-interruptor > span:last-child {
  min-width: 0;
  display: grid;
  gap: .08rem;
}

.creator-interruptor strong { font-size: .78rem; }
.creator-interruptor small { color: var(--crear-secundario); font-size: .6875rem; }

.creator-accion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, auto);
  align-items: stretch;
  gap: .65rem;
}

.creator-cotizacion {
  min-width: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .75rem;
  border: 1px solid var(--crear-borde);
  border-radius: 12px;
  background: var(--crear-superficie-suave);
  color: var(--crear-secundario);
}

.creator-cotizacion > span:last-child {
  min-width: 0;
  display: grid;
  gap: .08rem;
}

.creator-cotizacion small {
  font-size: .6875rem;
  font-weight: 690;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.creator-cotizacion strong {
  overflow: hidden;
  color: var(--crear-texto);
  font-size: .8rem;
  font-weight: 720;
  line-height: 1.25;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.creator-cotizacion-punto {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--crear-verde);
  box-shadow: 0 0 8px rgba(0, 231, 123, .45);
}

.creator-cotizacion.error .creator-cotizacion-punto { background: #e44355; box-shadow: none; }
.creator-cotizacion.estimada .creator-cotizacion-punto {
  background: #f1bf59;
  box-shadow: 0 0 8px rgba(241, 191, 89, .35);
}

.creator-generar {
  min-width: 170px;
  min-height: 54px;
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  justify-content: center;
  gap: .08rem .42rem;
  padding: .65rem 1rem;
  border-radius: 12px;
  background: var(--crear-verde);
  color: #041a10;
  font-weight: 820;
  box-shadow: 0 10px 30px rgba(0, 231, 123, .2);
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.creator-generar:hover:not(:disabled) {
  background: #00d875;
  transform: translateY(-1px);
}

.creator-generar:active:not(:disabled) { transform: translateY(0) scale(.98); }

.creator-generar:disabled {
  background: #212b25;
  color: #94a89c;
  box-shadow: none;
  cursor: not-allowed;
}

.creator-generar-icono { grid-row: 1 / span 2; align-self: center; font-size: 1.1rem; }
.creator-generar-texto { font-size: .82rem; }
.creator-generar-costo { justify-self: start; font-size: .7rem; font-weight: 650; opacity: .78; }

/* Mensajes con TONO: error (rojo, el de siempre), ok (verde, éxitos) y
   aviso (neutro, guías). Antes todo salía en rojo — incluido "Señal
   captada ✦ Tu mundo está listo", el momento cumbre. */
.creator-mensaje {
  padding: .6rem .75rem;
  border: 1px solid rgba(255, 136, 148, .34);
  border-radius: 10px;
  background: rgba(100, 21, 34, .22);
  color: #ffb1ba;
  font-size: .75rem;
}
.creator-mensaje--ok {
  border-color: color-mix(in srgb, var(--verde-cocuyo) 40%, transparent);
  background: color-mix(in srgb, var(--verde-cocuyo) 12%, transparent);
  color: var(--verde-cocuyo);
}
.creator-mensaje--aviso {
  border-color: var(--crear-borde);
  background: color-mix(in srgb, var(--blanco-luz) 6%, transparent);
  color: var(--crear-secundario);
}

@media (min-width: 1080px) {
  body.creator-page .creator-main {
    width: min(100%, 1640px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(350px, 410px);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "heading heading"
      "canvas controls";
    align-items: start;
    margin-inline: auto;
  }

  body.creator-page .creator-estudio-cabecera {
    grid-area: heading;
  }

  body.creator-page .creator-lienzo {
    grid-area: canvas;
    width: 100%;
    min-width: 0;
    padding-top: .5rem;
  }

  body.creator-page .creator-composer {
    grid-area: controls;
    position: sticky;
    top: calc(var(--app-header, 66px) + 1rem);
    width: calc(100% - 1rem);
    max-height: calc(100dvh - var(--app-header, 66px) - 2rem);
    align-self: start;
    margin: 1rem 1rem 1rem 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .creator-ajustes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.creator-nav { display: none; }

/* ---------- Exclusión de TV ---------- */
.creator-tv-aviso { display: none; }

html.modo-tv .creator-shell,
html.modo-tv .creator-nav,
html.modo-tv .creator-saltar { display: none !important; }

html.modo-tv .creator-tv-aviso {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  background:
    radial-gradient(circle at 50% 30%, rgba(0, 231, 123, .16), transparent 26rem),
    #07100b;
  color: #eafff4;
  text-align: center;
}

.creator-tv-aviso h1 { font-size: clamp(2rem, 5vw, 4rem); }
.creator-tv-aviso p { max-width: 680px; color: #a9bbb1; font-size: clamp(1rem, 2vw, 1.35rem); }
.creator-tv-icono {
  color: var(--crear-verde);
  font-size: 3rem;
  text-shadow: 0 0 26px rgba(0, 231, 123, .48);
}

/* ---------- Tablet y móvil ---------- */
@media (max-width: 899px) {
  /* La cápsula de nav real mide ~74px + su bottom: 72px se quedaba corto. */
  body.creator-page { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }

  .creator-shell { display: block; min-height: auto; }

  .creator-sidebar {
    width: min(84vw, 300px);
    transform: translateX(-105%);
    box-shadow: 24px 0 55px rgba(0, 0, 0, .46);
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
  }

  body.creator-proyectos-abiertos { overflow: hidden; }
  body.creator-proyectos-abiertos .creator-sidebar { transform: translateX(0); }

  .creator-cerrar-proyectos { display: inline-grid; }

  .creator-drawer-fondo {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: block;
    background: rgba(0, 0, 0, .64);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
  }

  body.creator-proyectos-abiertos .creator-drawer-fondo {
    opacity: 1;
    pointer-events: auto;
  }

  .creator-workspace { min-height: auto; }

  .creator-topbar {
    min-height: 58px;
    padding: calc(.5rem + env(safe-area-inset-top)) .7rem .5rem;
  }

  .creator-abrir-proyectos { display: inline-grid; }
  .creator-topnav,
  .creator-guardado { display: none; }

  .creator-titulo-proyecto { flex: 1; }
  .creator-titulo-proyecto input { width: 100%; max-width: none; }

  .creator-main {
    min-height: calc(100dvh - 130px);
    padding-bottom: 88px;
  }

  .creator-estudio-cabecera {
    width: 100%;
    margin-bottom: .35rem;
    padding: 1rem .85rem 0;
  }

  .creator-lienzo {
    min-height: 300px;
    padding: 1.2rem .85rem 1rem;
  }

  .creator-vista-controles { display: none; }
  .creator-resultados { min-height: 42vh; gap: .5rem; }

  .creator-composer {
    position: static;
    width: calc(100% - 1rem);
    margin: .65rem auto .5rem;
    padding: .7rem;
    border-radius: 18px;
  }

  .creator-accion {
    position: fixed;
    right: .5rem;
    bottom: calc(76px + env(safe-area-inset-bottom));
    left: .5rem;
    z-index: 95;
    padding: .45rem;
    border: 1px solid rgba(241, 255, 248, .12);
    border-radius: 16px;
    background: rgba(7, 10, 8, .94);
    box-shadow: 0 -12px 38px rgba(0, 0, 0, .42);
    backdrop-filter: blur(18px);
  }

  body.creator-page input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  body.creator-page select,
  body.creator-page textarea {
    font-size: 16px;
  }

  body.creator-page .creator-titulo-proyecto input {
    min-height: 44px;
  }

  .creator-nav {
    display: flex;
    border-color: var(--crear-borde);
    background: rgba(6, 9, 7, .94);
  }

  .creator-nav a { color: var(--crear-secundario); }
  .creator-nav a.activo { color: var(--crear-texto); text-shadow: none; }
  .creator-nav a.activo::before { background: var(--crear-verde); box-shadow: none; }
}

@media (max-width: 620px) {
  .creator-lienzo-cabecera { align-items: flex-end; margin-bottom: .6rem; }
  .creator-lienzo h1,
  .creator-estudio-cabecera h1 { font-size: 1.52rem; }

  /* La cuadricula ya se adapta sola (auto-fill): forzar 1 columna aqui
     devolvia los recuadros gigantes que el dueno pidio quitar. */
  .creator-vacio { padding-block: 2.3rem; }
  .creator-orbita { width: 60px; height: 60px; }
  .creator-orbita i { top: 7px; left: 28px; transform-origin: 2px 23px; }

  .creator-composer { gap: .55rem; }
  .creator-prompt textarea { min-height: 116px; }
  .creator-panel-seccion { padding: .75rem; }
  .creator-ajustes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-avanzado-contenido { grid-template-columns: 1fr; }
  .creator-campo-ancho { grid-column: auto; }

  .creator-accion {
    grid-template-columns: minmax(0, 1fr) minmax(144px, auto);
  }

  .creator-cotizacion { min-height: 50px; }
  .creator-cotizacion small { display: none; }

  .creator-generar {
    min-width: 144px;
    min-height: 50px;
  }
}

@media (max-width: 390px) {
  .creator-kicker { display: none; }
  .creator-lienzo h1,
  .creator-estudio-cabecera h1 { font-size: 1.3rem; }
  .creator-vacio p { font-size: .8rem; }
  .creator-sugerencia { font-size: .7rem; }
  .creator-estudio-distintivo { display: none; }
  .creator-ajustes-grid { grid-template-columns: 1fr; }
  .creator-accion { grid-template-columns: minmax(0, 1fr) 132px; }
  .creator-generar { min-width: 132px; padding-inline: .7rem; }
  .creator-cotizacion { padding-inline: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .creator-orbita::before,
  .creator-orbita i,
  .creator-spinner { animation-duration: 2s; }

  .creator-sidebar,
  .creator-drawer-fondo { transition: none; }
}

/* --- Menú de cuenta (avatar de la barra superior) --- */

.creator-cuenta { position: relative; }

.creator-cuenta-menu {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 60;
  width: min(300px, calc(100vw - 2rem));
  display: grid;
  gap: .5rem;
  padding: .8rem;
  border: 1px solid var(--crear-borde);
  border-radius: 15px;
  background: var(--crear-superficie);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
}

.creator-cuenta-quien {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--crear-borde);
}

.creator-cuenta-quien span:last-child { min-width: 0; display: grid; }
.creator-cuenta-quien strong { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-cuenta-quien small { color: var(--crear-secundario); font-size: .72rem; }

.creator-cuenta-creditos {
  display: grid;
  gap: .5rem;
  padding: .7rem;
  border-radius: 12px;
  background: var(--crear-superficie-suave);
}

.creator-cuenta-creditos-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--crear-secundario);
}

.creator-cuenta-creditos-fila strong { color: var(--crear-texto); font-size: .95rem; }

/* Medidor de puntos: 30 luces que se encienden según el saldo */
.creator-medidor { display: flex; flex-wrap: wrap; gap: 3px; }

.creator-medidor i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
}

.creator-medidor i.encendida {
  background: var(--crear-verde);
  box-shadow: 0 0 6px rgba(0, 231, 123, .6);
}

.creator-cuenta-recargar { width: 100%; min-height: 40px; font-size: .8rem; }

.creator-cuenta-espacio {
  display: grid;
  gap: .4rem;
  padding: .6rem .7rem;
  border-radius: 12px;
  background: var(--crear-superficie-suave);
}

.creator-barra-espacio {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}

.creator-barra-espacio span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--crear-verde);
  box-shadow: 0 0 8px rgba(0, 231, 123, .5);
  transition: width 400ms ease;
}

.creator-cuenta-opcion {
  display: block;
  width: 100%;
  padding: .55rem .6rem;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--crear-texto);
  font: inherit;
  font-size: .82rem;
  text-align: left;
  cursor: pointer;
}

.creator-cuenta-opcion:hover { background: var(--crear-superficie-suave); }
.creator-cuenta-salir { color: #FF6B6B; }

.creator-cuenta-version {
  padding: .2rem .6rem 0;
  color: var(--crear-secundario);
  font-size: .66rem;
  opacity: .7;
}

/* --- Mis fotos: biblioteca de referencias reutilizables --- */

.creator-misfotos {
  margin-bottom: .8rem;
  padding: .7rem;
  border: 1px solid var(--crear-borde);
  border-radius: 13px;
  background: var(--crear-superficie-suave);
}

.creator-misfotos-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .55rem;
}

.creator-misfotos-cabecera strong { font-size: .82rem; }
.creator-misfotos-cabecera small { color: var(--crear-secundario); font-size: .72rem; }

.creator-misfotos-tira {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .2rem;
}

.creator-misfoto {
  position: relative;
  flex: none;
  width: 66px;
  height: 66px;
  padding: 0;
  border: 1px solid var(--crear-borde);
  border-radius: 11px;
  overflow: hidden;
  background: var(--crear-superficie);
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease;
}

.creator-misfoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.creator-misfoto:hover { border-color: rgba(0, 231, 123, .5); }
.creator-misfoto:active { transform: scale(.95); }
.creator-misfoto[disabled] { opacity: .5; cursor: progress; }

.creator-misfoto-quitar {
  position: absolute;
  top: 2px;
  right: 2px;
  /* 28px visibles + área táctil ampliada (::before) — 20px era imposible
     de acertar con el pulgar. */
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(12, 18, 15, .82);
  color: var(--crear-texto);
  font-size: .7rem;
  line-height: 1;
  cursor: pointer;
}

.creator-misfoto-quitar:hover { background: rgba(12, 18, 15, .95); }

/* --- Barra de progreso estimado de una creación --- */

.creator-progreso {
  /* Para una espera de MINUTOS, una rayita de 5px era casi no informar. */
  width: min(280px, 82%);
  height: 8px;
  margin: .7rem auto .5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}

.creator-progreso span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 231, 123, .55), var(--crear-verde));
  box-shadow: 0 0 10px rgba(0, 231, 123, .45);
  transition: width 900ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .creator-progreso span { transition: none; }
}

/* --- Monedero: recarga de créditos (botón lateral + diálogo) --- */

.creator-btn-recargar {
  margin-left: auto;
  flex: none;
  min-height: 44px;
  padding: .35rem .7rem;
  font-size: .74rem;
  color: var(--crear-verde);
  border-color: rgba(0, 231, 123, .4);
  background: transparent;
}

.creator-recarga-fondo {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(2, 6, 4, .74);
  backdrop-filter: blur(4px);
}

.creator-recarga {
  width: min(430px, 100%);
  max-height: min(560px, 92vh);
  overflow-y: auto;
  display: grid;
  gap: .85rem;
  padding: 1.1rem;
  border: 1px solid var(--crear-borde);
  border-radius: 16px;
  background: var(--crear-superficie);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
}

.creator-recarga-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.creator-recarga-cabecera h2 { font-size: 1rem; }

.creator-recarga-nota,
.creator-recarga-pie {
  color: var(--crear-secundario);
  font-size: .74rem;
  line-height: 1.5;
}

.creator-recarga-lista { display: grid; gap: .55rem; }

.creator-recarga-paquete {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .75rem .85rem;
  border: 1px solid var(--crear-borde);
  border-radius: 13px;
  background: var(--crear-superficie-suave);
  color: var(--crear-texto);
  transition: border-color 140ms ease, transform 140ms ease;
}

.creator-recarga-paquete:hover { border-color: rgba(0, 231, 123, .46); }
.creator-recarga-paquete:active { transform: scale(.98); }
.creator-recarga-paquete[disabled] { opacity: .55; cursor: not-allowed; }

.creator-recarga-paquete > span:first-child {
  min-width: 0;
  display: grid;
  text-align: left;
}

.creator-recarga-paquete small { color: var(--crear-secundario); font-size: .72rem; }
.creator-recarga-paquete strong { font-size: .85rem; }

.creator-recarga-precio {
  flex: none;
  font-weight: 800;
  color: var(--crear-verde);
}

.creator-recarga-mensaje {
  min-height: 1em;
  color: var(--crear-verde);
  font-size: .76rem;
}

.creator-recarga-cargando { color: var(--crear-secundario); font-size: .76rem; }

/* ================================================================
   COCUYO STUDIO — composición editorial 2026
   Un estudio tranquilo: controles, lienzo, detalles y biblioteca.
   Estas reglas refinan la estructura anterior sin cambiar sus contratos.
   ================================================================ */

body.creator-page {
  /* UNA SOLA FUENTE DE COLOR: el estudio no tiene paleta propia, hereda la
     de tokens.css. Faltaban aquí el texto y el secundario, que seguían
     clavados arriba con los valores viejos: al aclarar la casa, el estudio
     se habría quedado con el gris de la versión anterior. */
  --crear-fondo: var(--negro-abismo);
  --crear-superficie: var(--negro-elevado);
  --crear-superficie-suave: var(--negro-borde);
  --crear-borde: var(--negro-borde);
  --crear-texto: var(--blanco-luz);
  --crear-secundario: var(--gris-niebla);
  --crear-verde: var(--verde-cocuyo);
  --crear-verde-fuerte: var(--verde-cocuyo);
  background:
    radial-gradient(circle at 64% -18%, color-mix(in srgb, var(--verde-cocuyo) 8%, transparent), transparent 32rem),
    var(--negro-abismo);
}

.creator-shell {
  display: block;
  min-height: 100dvh;
}

.creator-workspace {
  grid-column: auto;
  width: 100%;
}

/* Los proyectos dejan de ocupar espacio permanente: son un drawer en todos
   los tamaños y el mismo botón/flujo accesible los abre en cualquier equipo. */
.creator-sidebar {
  width: min(88vw, 320px);
  transform: translateX(-105%);
  border-right-color: color-mix(in srgb, var(--blanco-luz) 12%, transparent);
  background: color-mix(in srgb, var(--negro-elevado) 97%, transparent);
  box-shadow: 28px 0 70px color-mix(in srgb, var(--negro-abismo) 52%, transparent);
  transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
}

body.creator-proyectos-abiertos { overflow: hidden; }
body.creator-proyectos-abiertos .creator-sidebar { transform: translateX(0); }

.creator-cerrar-proyectos,
.creator-abrir-proyectos { display: inline-grid; }

.creator-drawer-fondo {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: block;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--negro-abismo) 68%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

body.creator-proyectos-abiertos .creator-drawer-fondo {
  opacity: 1;
  pointer-events: auto;
}

/* Cabecera de marca: el wordmark original se mantiene intacto. */
body.creator-page .creator-topbar {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
  gap: 1.2rem;
  padding: calc(.65rem + env(safe-area-inset-top)) clamp(1rem, 2vw, 2rem) .65rem;
  background: color-mix(in srgb, var(--negro-abismo) 91%, transparent);
  border-bottom-color: color-mix(in srgb, var(--blanco-luz) 9%, transparent);
}

.creator-topbar-marca,
.creator-topbar-proyecto {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .7rem;
}

.creator-topbar-proyecto { justify-content: flex-end; }

.creator-topbar-logo {
  flex: 0 0 auto;
  color: var(--blanco-luz);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.creator-topbar-logo .o-viva {
  color: var(--crear-verde);
  text-shadow: var(--glow-medio);
}

/* "STUDIO" pegado al wordmark (dueño, 28-jul-2026): el nombre del
   estudio vive junto al logo de arriba y no se repite en el lienzo. */
.creator-logo-studio {
  margin-left: .55em;
  font-size: .58em;
  font-weight: 700;
  letter-spacing: .34em;
  color: var(--crear-verde);
  text-shadow: var(--glow-suave);
  text-transform: uppercase;
}

.creator-topbar .creator-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

body.creator-page .creator-topnav {
  align-self: stretch;
  gap: 1.65rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.creator-page .creator-topnav a {
  position: relative;
  min-height: 52px;
  padding: .45rem .25rem;
  border-radius: 0;
  color: var(--gris-niebla);
  font-size: .84rem;
  font-weight: 690;
}

body.creator-page .creator-topnav a.activo {
  background: transparent;
  color: var(--crear-verde-fuerte);
}

body.creator-page .creator-topnav a.activo::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 99px;
  background: var(--crear-verde);
  box-shadow: var(--glow-suave);
}

.creator-topbar-proyecto .creator-titulo-proyecto input {
  width: min(17vw, 220px);
  min-width: 124px;
  color: var(--blanco-luz);
  font-size: .76rem;
  text-align: right;
}

.creator-topbar-proyecto .creator-guardado { display: none; }

.creator-topbar-perfil {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
}

.creator-topbar-perfil .creator-avatar {
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--verde-cocuyo) 42%, transparent);
  background: color-mix(in srgb, var(--verde-profundo) 58%, var(--negro-elevado));
  color: var(--crear-verde-fuerte);
}

.creator-main {
  min-height: calc(100dvh - 72px);
}

.creator-biblioteca-cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .7rem;
}

.creator-biblioteca-cabecera p,
.creator-inspector-cabecera p {
  margin-bottom: .16rem;
  color: var(--gris-humo);
  font-size: .63rem;
  font-weight: 790;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.creator-biblioteca-cabecera h2,
.creator-inspector-cabecera h2 {
  color: var(--crear-texto);
  font-size: .95rem;
  line-height: 1.2;
}

.creator-biblioteca-cabecera > span {
  color: var(--gris-humo);
  font-size: .68rem;
}

.creator-resultados {
  min-height: clamp(380px, 66vh, 760px);
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: .6rem;
  align-content: start;
}

.creator-vacio {
  width: 100%;
  min-height: clamp(360px, 62vh, 690px);
  border: 1px solid var(--crear-borde);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--verde-cocuyo) 8%, transparent), transparent 16rem),
    linear-gradient(145deg,
      color-mix(in srgb, var(--negro-elevado) 72%, transparent),
      color-mix(in srgb, var(--negro-abismo) 92%, transparent));
}

.creator-resultado {
  border-radius: 15px;
  background: var(--negro-elevado);
  box-shadow: 0 14px 38px color-mix(in srgb, var(--negro-abismo) 26%, transparent);
  transition: border-color 160ms ease, transform 160ms ease;
}

.creator-resultado.seleccionado {
  border-color: color-mix(in srgb, var(--verde-cocuyo) 68%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--verde-cocuyo) 10%, transparent),
    0 18px 46px color-mix(in srgb, var(--negro-abismo) 35%, transparent);
}

/* ⚠️ AQUÍ ESTABA EL RECUADRO GIGANTE. La primera creación ocupaba la fila
   entera (grid-column: 1/-1) con 58vh de alto, así que al abrir la galería
   solo se veía UNA pieza y había que bajar para todo lo demás. El dueño pidió
   recuadros pequeños (27-jul-2026): la primera ya no es especial. La pieza
   grande se mira en el inspector de la derecha, que para eso está. Todas
   cuadradas, que es lo que deja leer una galería de un vistazo. */
.creator-resultado:first-of-type {
  border-radius: 13px;
}

.creator-resultado .creator-resultado-media {
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  margin: 0;
}

.creator-resultado .creator-resultado-media img,
.creator-resultado .creator-resultado-media video {
  object-fit: cover;
}

.creator-resultado .creator-resultado-pie {
  padding: .4rem .45rem .5rem;
}

.creator-resultado .creator-resultado-pie > p {
  font-size: .66rem;
}

.creator-resultado-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .55rem;
}

.creator-resultado-meta > span:nth-child(2) {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-resultado-detalles {
  min-height: 40px;
  padding: .35rem .55rem;
  border: 1px solid var(--crear-borde);
  border-radius: 9px;
  background: color-mix(in srgb, var(--negro-elevado) 82%, var(--negro-borde));
  color: var(--blanco-luz);
  font-size: .66rem;
  font-weight: 740;
}

.creator-resultado-detalles:hover,
.creator-resultado-detalles[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--verde-cocuyo) 48%, transparent);
  color: var(--crear-verde-fuerte);
}

/* Inspector contextual. */
.creator-inspector {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--crear-borde);
  border-radius: 16px;
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--negro-elevado) 96%, transparent),
      color-mix(in srgb, var(--negro-abismo) 98%, transparent));
  box-shadow: 0 18px 52px color-mix(in srgb, var(--negro-abismo) 28%, transparent);
}

.creator-inspector-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .6rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--blanco-luz) 8%, transparent);
}

.creator-inspector-estado {
  padding: .24rem .4rem;
  border: 1px solid color-mix(in srgb, var(--verde-cocuyo) 20%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--verde-cocuyo) 7%, transparent);
  color: var(--crear-verde-fuerte);
  font-size: .59rem;
  font-weight: 760;
}

.creator-inspector-lista {
  display: grid;
  gap: .25rem;
}

.creator-inspector-lista > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: .55rem;
  align-items: baseline;
  padding: .58rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--blanco-luz) 6%, transparent);
}

.creator-inspector-lista dt {
  color: var(--gris-humo);
  font-size: .65rem;
}

.creator-inspector-lista dd {
  overflow: hidden;
  color: var(--blanco-luz);
  font-size: .7rem;
  font-weight: 700;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-inspector-acciones { display: grid; gap: .55rem; }

.creator-inspector-accion {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem .75rem;
  border: 1px solid var(--crear-borde);
  border-radius: 11px;
  background: color-mix(in srgb, var(--negro-elevado) 84%, var(--negro-borde));
  color: var(--blanco-luz);
  font-size: .7rem;
  font-weight: 750;
  text-align: center;
}

.creator-inspector-accion:hover:not([disabled]):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--verde-cocuyo) 50%, transparent);
  color: var(--crear-verde-fuerte);
}

.creator-inspector-accion-principal {
  border-color: color-mix(in srgb, var(--verde-cocuyo) 40%, transparent);
}

.creator-inspector-accion[disabled],
.creator-inspector-accion[aria-disabled="true"] {
  opacity: .42;
  cursor: not-allowed;
}

.creator-inspector-ayuda {
  color: var(--gris-humo);
  font-size: .66rem;
  line-height: 1.48;
}

/* El compositor se vuelve una columna de controles compacta. */
.creator-composer {
  border-radius: 17px;
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--negro-elevado) 99%, transparent),
      color-mix(in srgb, var(--negro-abismo) 99%, transparent));
}

.creator-composer-cabecera {
  padding-bottom: .65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--blanco-luz) 7%, transparent);
}

.creator-tabs {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--crear-borde);
  border-radius: 12px;
  background: var(--negro-abismo);
}

.creator-tab { justify-content: center; }

.creator-estudio-distintivo { display: none; }

.creator-panel-seccion {
  padding: .75rem;
  border-radius: 13px;
  background: color-mix(in srgb, var(--negro-abismo) 56%, transparent);
}

.creator-seccion-cabecera p:not(.creator-numero-paso) { display: none; }
.creator-seccion-cabecera { margin-bottom: .58rem; }

.creator-modelos-grid {
  max-height: 186px;
  gap: .4rem;
}

.creator-modelo-tarjeta {
  min-height: 82px;
  padding: .52rem;
}

.creator-modelo-descripcion,
.creator-catalogo-nota,
.creator-capacidades { display: none; }

.creator-referencias-lista {
  grid-auto-columns: minmax(126px, 1fr);
}

.creator-referencia-item,
.creator-referencia,
.creator-referencia-ranura { min-height: 76px; }

.creator-prompt textarea {
  min-height: 112px;
  border-radius: 12px;
}

@media (min-width: 1080px) {
  body.creator-page .creator-main {
    width: min(100%, 1920px);
    display: grid;
    /* SIN pista de inspector: el panel "Detalles" está apagado con
       display:none !important (crear-playground.css) y su columna quedaba
       VACÍA a la derecha del lienzo entre 1280 y 1400px. */
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "controls canvas";
    gap: .85rem;
    align-items: start;
    margin-inline: auto;
    padding: .85rem;
  }

  body.creator-page .creator-estudio-cabecera { display: none; }

  body.creator-page .creator-composer {
    grid-area: controls;
    position: sticky;
    top: 86px;
    width: 100%;
    max-height: calc(100dvh - 100px);
    margin: 0;
    padding: .78rem;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  body.creator-page .creator-lienzo {
    grid-area: canvas;
    width: 100%;
    min-width: 0;
    padding: 0;
  }

  body.creator-page .creator-inspector {
    grid-area: inspector;
    position: sticky;
    top: 86px;
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
  }

  body.creator-page .creator-accion {
    position: sticky;
    bottom: -.8rem;
    z-index: 8;
    margin: 0 -.2rem -.2rem;
    padding: .55rem .2rem .2rem;
    background: linear-gradient(
      to bottom,
      transparent,
      color-mix(in srgb, var(--negro-abismo) 98%, transparent) 34%
    );
  }
}

@media (max-width: 1280px) and (min-width: 1080px) {
  body.creator-page .creator-main {
    grid-template-columns: minmax(300px, 330px) minmax(0, 1fr);
    grid-template-areas: "controls canvas";
  }

  body.creator-page .creator-inspector {
    grid-area: auto;
    grid-column: 1 / -1;
    grid-row: 2;
    position: static;
    max-height: none;
    grid-template-columns: minmax(190px, .8fr) minmax(0, 2fr) minmax(180px, .8fr);
    align-items: start;
  }

  body.creator-page .creator-inspector-lista {
    grid-template-columns: repeat(5, minmax(100px, 1fr));
  }

  body.creator-page .creator-inspector-lista > div {
    grid-template-columns: 1fr;
  }

  body.creator-page .creator-inspector-lista dd { text-align: left; }
  .creator-resultados { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

@media (max-width: 1079px) {
  .creator-main {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .creator-composer { order: 1; }
  .creator-lienzo { order: 2; }
  .creator-inspector {
    order: 3;
    width: calc(100% - clamp(2rem, 6vw, 4rem));
    margin: 0 auto clamp(5rem, 10vw, 7rem);
  }
  .creator-estudio-cabecera { order: 0; }
}

@media (max-width: 899px) {
  body.creator-page .creator-topbar {
    min-height: 62px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: .65rem;
  }

  .creator-topbar-marca { min-width: 0; }
  .creator-topbar-logo { font-size: .93rem; }
  .creator-topbar-proyecto { gap: .4rem; }
  .creator-topbar-proyecto .creator-titulo-proyecto,
  .creator-topbar-proyecto .creator-guardado { display: none; }

  /* 2 columnas cómodas en móvil: a 104px cada tarjeta debía alojar prompt,
     meta y DOS botones de 42px — no cabían. */
  .creator-resultados { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  .creator-resultado:first-of-type .creator-resultado-media {
    min-height: auto;
  }
}

@media (max-width: 620px) {
  .creator-biblioteca-cabecera > span { display: none; }
  /* La cuadricula ya se adapta sola (auto-fill): forzar 1 columna aqui
     devolvia los recuadros gigantes que el dueno pidio quitar. */
  .creator-resultado:first-of-type { grid-column: auto; }
  .creator-resultado-meta { grid-template-columns: auto minmax(0, 1fr); }
  .creator-resultado-meta > span:nth-child(2) { text-align: right; }
  .creator-resultado-detalles {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
  }
  .creator-inspector {
    width: calc(100% - 1.25rem);
    padding: .85rem;
  }
}


/* --- Al terminar una creación: Ver ahora / Descargar --- */

.creator-resultado-acciones {
  display: flex;
  gap: .5rem;
  padding: 0 .75rem .75rem;
}

.creator-resultado-acciones .creator-btn {
  flex: 1;
  min-height: 42px;
  font-size: .82rem;
}

/* --- Visor a pantalla completa --- */

.creator-visor {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(2, 6, 4, .92);
  backdrop-filter: blur(6px);
}

.creator-visor-caja {
  position: relative;
  max-width: min(1100px, 100%);
  max-height: 92vh;
  display: flex;
}

.creator-visor-caja img,
.creator-visor-caja video {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  background: #000;
}

.creator-visor-cerrar {
  position: absolute;
  /* DENTRO de la caja (antes sobresalía y en móvil podía quedar bajo el
     notch o fuera de pantalla) y con los 44px táctiles de rigor. */
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--crear-borde);
  background: var(--crear-superficie);
  color: var(--crear-texto);
  font-size: 1rem;
  cursor: pointer;
}

.creator-visor-cerrar:hover { border-color: var(--crear-verde); }


/* ============================================================
   MONTAJES CON TU FOTO (28-jul-2026): chips de ideas de un toque.
   Pastillas con el verde de la casa, brillo al pasar y un pelin
   de "levantarse" al tocarlas. Los chips los puebla pg-crear.js.
   ============================================================ */
.creator-montajes {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--crear-borde);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--crear-verde-tinta) 0%, transparent 55%),
    var(--crear-superficie);
}
.creator-montajes.oculto { display: none; }
.creator-montajes-titulo {
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--crear-texto);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.creator-montajes-titulo small {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--crear-secundario);
}
.creator-montajes-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.creator-montaje-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--crear-borde);
  background: var(--crear-superficie-suave);
  color: var(--crear-texto);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease,
              box-shadow .15s ease, background .15s ease;
}
.creator-montaje-emoji { font-size: 1.05rem; }
.creator-montaje-chip:hover,
.creator-montaje-chip:focus-visible {
  border-color: var(--crear-verde);
  /* Verde translúcido, NO --crear-verde-tinta de fondo: la menta clara con
     texto claro daba 1,19:1 (texto invisible). Y la sombra era CSS inválido
     (--crear-sombra ya es una sombra completa) que se descartaba entera. */
  background: color-mix(in srgb, var(--verde-cocuyo) 14%, transparent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transform: translateY(-1px);
  outline: none;
}
.creator-montaje-chip:active { transform: translateY(0) scale(0.98); }


/* ============================================================
   FORMATO CON CUADRITOS + MOTOR OCULTO (28-jul-2026).
   El select de formato vive oculto (manda su valor); el usuario
   toca un cuadrito con la forma real. El panel del motor ya no
   se enseña: la casa elige el motor y el usuario ve el precio.
   ============================================================ */
.creator-campo-formato-oculto { display: none; }
.creator-modelo-panel[hidden] { display: none; }
.creator-aspectos-campo { grid-column: 1 / -1; }
.creator-aspectos { display: flex; flex-wrap: wrap; gap: 8px; }
.creator-aspecto-cuadro {
  display: grid; justify-items: center; align-content: end; gap: 6px;
  min-width: 62px; padding: 10px 10px 8px;
  border-radius: 12px;
  border: 1px solid var(--crear-borde);
  background: var(--crear-superficie-suave);
  color: var(--crear-secundario);
  font-size: 0.72rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease,
              transform .15s ease, box-shadow .15s ease;
}
.creator-aspecto-cuadro .marco {
  height: 26px;
  border: 2px solid currentColor;
  border-radius: 4px;
  opacity: .9;
}
.creator-aspecto-cuadro:hover,
.creator-aspecto-cuadro:focus-visible {
  border-color: var(--crear-verde);
  transform: translateY(-1px);
  outline: none;
}
.creator-aspecto-cuadro[aria-pressed="true"] {
  border-color: var(--crear-verde);
  /* El formato ELEGIDO se lee (antes: texto y marco casi blancos sobre
     menta clara — el seleccionado era el único ilegible). */
  background: color-mix(in srgb, var(--verde-cocuyo) 16%, transparent);
  color: var(--crear-texto);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verde-cocuyo) 55%, transparent);
}



/* ============================================================
   MEJORAR MI IDEA (28-jul-2026, modo avanzado): boton discreto
   bajo el prompt. Claude reescribe la idea como prompt pro.
   ============================================================ */
.creator-mejorar {
  justify-self: start;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--crear-borde);
  background: var(--crear-superficie-suave);
  color: var(--crear-texto);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.creator-mejorar:hover:not(:disabled),
.creator-mejorar:focus-visible {
  border-color: var(--crear-verde);
  background: color-mix(in srgb, var(--verde-cocuyo) 14%, transparent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  outline: none;
}
.creator-mejorar:disabled { opacity: .6; cursor: wait; }
.creator-mejorar.oculto { display: none; }



/* ============================================================
   MODO NORMAL "ultra sencillo" (28-jul-2026): sin proyectos
   (la barra lateral y el titulo son del modo avanzado) y con el
   cuadro de texto oculto hasta tocar "Escribir mi idea".
   ============================================================ */
body.estudio-simple .creator-shell { grid-template-columns: 1fr; }
body.estudio-simple .creator-sidebar,
body.estudio-simple .creator-abrir-proyectos,
body.estudio-simple .creator-titulo-proyecto,
body.estudio-simple #estado-guardado,
body.estudio-simple .creator-drawer-fondo { display: none !important; }
.creator-prompt-fila.oculto { display: none; }
.creator-montaje-chip--libre { border-style: dashed; color: var(--crear-secundario); }
.creator-montaje-chip--libre:hover { border-style: solid; }



/* ============================================================
   NIVEL DEL ESTUDIO (28-jul-2026): pastilla Facil/Avanzado a la
   vista, junto a las pestanas Imagen/Video.
   ============================================================ */
.creator-nivel {
  display: inline-flex; gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--crear-borde);
  background: var(--crear-superficie-suave);
}
.creator-nivel-boton {
  border: 0;
  background: transparent;
  color: var(--crear-secundario);
  font-size: .8rem; font-weight: 700;
  min-height: 40px;   /* con los 4px de padding del contenedor: 44+ táctiles */
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.creator-nivel-boton:hover { color: var(--crear-texto); }
.creator-nivel-boton[aria-pressed="true"] {
  /* El modo ACTIVO (Fácil/Avanzado) se lee: verde translúcido, no menta
     clara con texto claro (1,19:1, la etiqueta desaparecía). */
  background: color-mix(in srgb, var(--verde-cocuyo) 18%, transparent);
  color: var(--crear-texto);
  box-shadow: inset 0 0 0 1px var(--crear-verde);
}



/* ============================================================
   GALERÍA PLEGABLE EN MODO FÁCIL (Fase 1 hiper-fácil, dueño
   28-jul-2026, punto 7): el estudio fácil es solo para crear y la
   rejilla histórica queda plegada tras el botón "🪲 Mis creaciones
   (N)" (lo crea pg-crear.js; pliega con data-historial en las
   tarjetas + la clase body.galeria-abierta; las tarjetas solo se
   ocultan con [hidden], así que siguen vivas y su sondeo intacto).
   Mientras está plegada, el contenedor NO puede reservar los 66vh
   de galería: quedaría un hueco vacío enorme en medio del estudio.
   En Avanzado la galería sigue siempre visible con las miniaturas
   compactas (auto-fill ~132px) que la casa definió el 27-jul-2026.
   ============================================================ */
body.estudio-simple:not(.galeria-abierta) .creator-resultados {
  min-height: 0;
}



/* ============================================================
   PLAYGROUND AVANZADO — COMPOSITOR FIJO ABAJO (Fase 1.5, dueño
   28-jul-2026; referencia: Picsart AI Playground). SOLO modo
   AVANZADO (body sin .estudio-simple): el estudio fácil de la
   Fase 1 no se toca.
   La barra reúne, de arriba abajo: prompt libre, ranuras de
   referencia, pestañas Imagen/Video + nivel, el selector de motor
   como pastillas, los ajustes y —siempre pegada al fondo— la fila
   de precio + "✦ Sintonizar". Es la misma .creator-composer de
   siempre reordenada con `order`: no hay lógica nueva.
   ============================================================ */
body.creator-page:not(.estudio-simple) .creator-prompt-fila { order: -1; }
body.creator-page:not(.estudio-simple) .creator-referencias-panel { order: -1; }

/* El motor como pastillas horizontales (chip/pill) dentro de la barra. */
body.creator-page:not(.estudio-simple) .creator-modelos-grid {
  display: flex;
  max-height: none;
  gap: .4rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: .15rem;
}
body.creator-page:not(.estudio-simple) .creator-modelo-tarjeta {
  min-height: 44px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .45rem;
  padding: .4rem .7rem;
  border-radius: 999px;
}
body.creator-page:not(.estudio-simple) .creator-modelo-autor,
body.creator-page:not(.estudio-simple) .creator-modelo-estado { display: none; }
body.creator-page:not(.estudio-simple) .creator-modelo-icono {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}
body.creator-page:not(.estudio-simple) .creator-modelo-pie {
  align-self: center;
  padding-top: 0;
}

/* Escritorio: la consola fija abajo; la rejilla y el inspector ocupan
   toda la altura (con aire abajo para que la barra no tape la última
   fila de creaciones). */
@media (min-width: 1080px) {
  body.creator-page:not(.estudio-simple) .creator-main {
    grid-template-columns: minmax(0, 1fr) minmax(205px, 235px);
    grid-template-areas: "canvas inspector";
    padding-bottom: calc(min(44dvh, 400px) + 1.7rem);
  }

  body.creator-page:not(.estudio-simple) .creator-composer {
    position: fixed;
    right: .85rem;
    bottom: .85rem;
    left: .85rem;
    z-index: 70;
    width: auto;
    max-height: min(44dvh, 400px);
    margin: 0;
  }
}

/* Tableta y móvil: el lienzo manda (la rejilla primero), la consola se
   apila como barra fija abajo y la fila de precio queda pegada al fondo
   de la barra, no de la pantalla. */
@media (max-width: 1079px) {
  body.creator-page:not(.estudio-simple) .creator-lienzo { order: 1; }
  body.creator-page:not(.estudio-simple) .creator-inspector { order: 2; }

  body.creator-page:not(.estudio-simple) .creator-composer {
    position: fixed;
    right: .5rem;
    bottom: .5rem;
    left: .5rem;
    z-index: 96;
    width: auto;
    max-height: 42dvh;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  body.creator-page:not(.estudio-simple) .creator-main {
    padding-bottom: calc(42dvh + 1rem);
  }

  body.creator-page:not(.estudio-simple) .creator-accion {
    position: sticky;
    right: auto;
    bottom: 0;
    left: auto;
    z-index: 8;
    margin: 0 -.2rem -.2rem;
    padding: .45rem .2rem .2rem;
    border: 0;
    border-radius: 0;
    background: linear-gradient(
      to bottom,
      transparent,
      color-mix(in srgb, var(--negro-abismo) 98%, transparent) 34%
    );
    box-shadow: none;
    backdrop-filter: none;
  }
}

@media (max-width: 899px) {
  /* La barra del playground queda sobre la navegación inferior, donde
     antes flotaba la fila de precio. */
  body.creator-page:not(.estudio-simple) .creator-composer {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
  body.creator-page:not(.estudio-simple) .creator-main {
    padding-bottom: calc(42dvh + 84px);
  }
}



/* ============================================================
   PLAYGROUND AVANZADO — SIDEBAR DE MUNDOS (Fase 1.5, dueño
   28-jul-2026). En escritorio (≥1080px) el panel de proyectos
   ("Mis mundos") deja de ser un drawer y se queda fijo a la
   izquierda, como en el playground de referencia: lista de
   mundos + "＋ Nuevo mundo" + saldo. En tableta y móvil sigue
   siendo el drawer accesible de siempre (hamburguesa).
   El JS le quita el `inert` en cuanto la pantalla pasa de
   1080px (mediaProyectos, rama avanzada de pg-crear.js): sin ese
   cambio el sidebar se vería pero no se podría tocar.
   ============================================================ */
@media (min-width: 1080px) {
  body.creator-page:not(.estudio-simple) .creator-sidebar {
    width: var(--crear-sidebar);
    transform: none;
    border-right-color: var(--crear-borde);
    box-shadow: none;
  }

  /* Fijo a la vista: la hamburguesa y la X del drawer sobran. */
  body.creator-page:not(.estudio-simple) .creator-abrir-proyectos,
  body.creator-page:not(.estudio-simple) .creator-cerrar-proyectos {
    display: none;
  }

  body.creator-page:not(.estudio-simple) .creator-workspace {
    margin-left: var(--crear-sidebar);
  }

  /* La marca ya vive arriba del sidebar: no se repite en la topbar. */
  body.creator-page:not(.estudio-simple) .creator-topbar-logo {
    display: none;
  }

  /* La consola del playground se estira desde el borde del sidebar. */
  body.creator-page:not(.estudio-simple) .creator-composer {
    left: calc(var(--crear-sidebar) + .85rem);
  }
}



/* ============================================================
   PLAYGROUND AVANZADO — BADGE DEL MOTOR EN TARJETAS (Fase 1.5,
   dueño 28-jul-2026). El span .creator-resultado-motor lo crea
   pg-crear.js SOLO en modo Avanzado (en modo Fácil no existe,
   así que esta regla nunca le afecta): va pegado a la esquina
   superior de la miniatura con el nombre del motor (y los
   segundos en video), verde Cocuyo sobre negro, como un chip.
   La tarjeta (.creator-resultado) ya es position:relative y
   recorta con overflow:hidden, así que el chip vive dentro.
   ============================================================ */
body.creator-page:not(.estudio-simple) .creator-resultado-motor {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  max-width: calc(100% - 12px);
  overflow: hidden;
  padding: .18rem .42rem;
  border: 1px solid color-mix(in srgb, var(--verde-cocuyo) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--negro-abismo) 78%, transparent);
  color: var(--crear-verde-fuerte);
  font-size: .56rem;
  font-weight: 760;
  letter-spacing: .03em;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}


/* ============================================================
   TELON "PROXIMAMENTE" (28-jul-2026): el estudio cerrado al
   publico mientras el streaming se termina. Cortina a pantalla
   completa con la luz de la casa; el equipo entra con
   ?estudio=beta (pg-crear.js).
   ============================================================ */
.estudio-telon {
  position: fixed; inset: 0; z-index: 600;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--verde-cocuyo) 12%, transparent) 0%, transparent 55%),
    var(--crear-fondo);
}
.estudio-telon[hidden] { display: none; }
.estudio-telon-caja {
  max-width: 32rem; text-align: center;
  display: grid; gap: var(--esp-4); justify-items: center;
  padding: clamp(28px, 6vw, 48px);
  border: 1px solid var(--crear-borde);
  border-radius: var(--radio-lg);
  background: var(--crear-superficie);
  /* Antes: "0 18px 60px var(--crear-sombra)" = CSS inválido (la variable YA
     es una sombra completa) → la caja quedaba SIN sombra. */
  box-shadow: var(--sombra-3);
}
.estudio-telon-marca { font-size: 1.05rem; }
.estudio-telon .faros { font-size: 1.35rem; }
.estudio-telon h1 {
  /* La portada pública de la marca merece tamaño de portada (antes 22px
     fijos, menos que un título de tarjeta). */
  font-size: clamp(1.9rem, 6vw, 2.8rem);
  line-height: 1.1; letter-spacing: -.03em;
  color: var(--crear-texto);
}
.estudio-telon p { color: var(--crear-secundario); line-height: 1.6; max-width: 40ch; }
.estudio-telon-lema {
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--verde-cocuyo);
  opacity: .85;
}
body.estudio-cerrado { overflow: hidden; }
/* Con el telón echado, el estudio de detrás NI SE VE NI SE PUEDE ENFOCAR.
   (Antes el estudio cargaba visible y el telón caía cuando bajaban los
   213KB de JS: el público veía un flash del estudio entero; y con el telón
   puesto aún se podía tabular hacia los controles de detrás.) */
body.estudio-cerrado .creator-shell { visibility: hidden; }