/* ==================================================================== GEN JET AI · Espacio SFW — tema + gating del conmutador -------------------------------------------------------------------- Se carga SIEMPRE, y SIEMPRE DESPUÉS de studio.css, pero es INERTE mientras no lleve los atributos del espacio, así que en el espacio actual (main, tema 'default') este fichero no pinta nada. DOS EJES, DOS ATRIBUTOS (no confundirlos): - data-theme="mono" → el TEMA. De él cuelgan los tokens de abajo. El valor lo manda el backend en el catálogo (`spaces.theme`), no se deriva del slug: otro espacio futuro puede reutilizar 'mono' sin tocar este fichero. - data-space="sfw" → el ESPACIO. De él cuelga solo el gating de secciones (qué ítems del sidebar existen). Reparto de responsabilidades (no duplicar en otro sitio): - Los tokens del tema 'mono' se definen AQUÍ y solo aquí. - studio.css / styles.css siguen siendo la única fuente del tema actual: fondo, texto y bordes NO cambian entre espacios. El espacio SFW es el mismo oscuro, solo sin naranja. ==================================================================== */ /* ---- Tokens del tema 'mono' ---- Solo se toca el eje del acento. Todo lo que en el studio usa var(--accent) (barra activa del sidebar, chips, CTAs, eyebrows…) pasa a blanco/gris sin que haya que tocar una sola regla existente. */ :root[data-theme="mono"] { --accent: #ffffff; --accent-soft: rgba(255, 255, 255, .12); /* Contraste de lo que va ENCIMA del acento. Con el acento en blanco esto es lo que salva iconos y checks de desaparecer, así que ninguna regla puede volver a escribir #fff a pelo sobre un fondo de acento. */ --on-accent: #0a0a0c; /* --accent-glow / --accent-ring NO se pueden dejar heredados: en styles.css valen .35 y .5 sobre --accent-rgb, alfas calibradas para un naranja oscuro (luminancia ~0.20). Con el mismo alfa en blanco puro (luminancia 1.0) los halos y los bordes marcados leen ~5x más fuertes y se comen el fondo. Se bajan a poco más de la mitad: el halo (área grande, donde el blow-out es peor) más que el trazo (1px, donde la finura ya compensa). Siguen por encima de --border-medium (.16), que es lo que los mantiene legibles como ÉNFASIS y no como un borde normal. --accent-glow .35 → .18 --accent-ring .50 → .30 Escala coherente con --accent-soft, que ya bajó de .18 a .12 aquí arriba. */ --accent-glow: rgba(255, 255, 255, .18); --accent-ring: rgba(255, 255, 255, .30); /* OBLIGATORIO junto a --accent (ver el comentario del :root de styles.css): es el canal RGB suelto del que cuelgan las decenas de alfas del studio —rgba(var(--accent-rgb), .07), .22, .55…— y también los derivados --accent-glow / --accent-ring. Sin él los sólidos se volverían blancos pero los fondos y halos (fila activa del sidebar, sombras de los iconos) seguirían naranjas. No es un token nuevo del tema: es el mismo --accent en otro formato. */ --accent-rgb: 255, 255, 255; } /* ==================================================================== Conmutador de espacio (píldora del topbar) -------------------------------------------------------------------- FAIL-CLOSED: oculto por defecto. auth.js añade .has-sfw a solo cuando el backend confirma que la organización tiene el espacio; sin esa clase (o con este JS caído) la píldora no existe para el usuario. ==================================================================== */ .space-switch { display: none; } html.has-sfw .space-switch { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border: 1px solid var(--border-medium, rgba(255, 255, 255, .16)); border-radius: 9999px; background: rgba(255, 255, 255, .04); color: var(--text-soft, rgba(255, 255, 255, .85)); font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background .25s var(--ease, ease), border-color .25s var(--ease, ease), color .25s var(--ease, ease); } html.has-sfw .space-switch:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .3); color: #fff; } html.has-sfw .space-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Punto de estado: toma el acento del espacio ACTIVO, así el color de la píldora ya dice en cuál estás (ámbar = actual, blanco = SFW). */ .space-switch__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; } .space-switch__label { line-height: 1; } /* Sufijo del icono de intercambio: pequeño y apagado, no compite con el label. */ .space-switch__swap { display: block; opacity: .5; flex: none; } html.has-sfw .space-switch:hover .space-switch__swap { opacity: .9; } /* ==================================================================== Gating de secciones por espacio (fail-closed) -------------------------------------------------------------------- El !important NO es decorativo: .sidebar__item es `display: grid`, que pisa el `[hidden] { display: none }` del user-agent y también a una regla nuestra de la misma especificidad. Sin él los ítems se seguirían viendo. Mismo patrón que el gating de Video (.has-seedance). Estas tres reglas son PUERTAS INDEPENDIENTES a propósito: 1. Sin el espacio concedido (.has-sfw) no se ve NADA de SFW, ni durante la carga ni si el JS de sesión no llega a correr. 2. En el espacio actual (main), lo de SFW no estorba. 3. En el espacio SFW, las secciones exclusivas del espacio actual (generación, vídeo, auto script) desaparecen. El rebote REAL lo hace navigateTo (SPACE_PAGES); esto solo evita ofrecer un destino que se va a rebotar. ==================================================================== */ html:not(.has-sfw) .sidebar__item[data-page^="sfw-"] { display: none !important; } html[data-space="main"] .sidebar__item[data-page^="sfw-"] { display: none !important; } html[data-space="sfw"] .sidebar__item[data-page="generate"], html[data-space="sfw"] .sidebar__item[data-page="autoscript"], html[data-space="sfw"] .sidebar__item[data-page="seedance"] { display: none !important; } /* Photo Cleaner: beta cerrada (orgs `beta_tester`, .is-beta lo pone auth.js) Y solo admin/owner (.is-admin). Dos puertas independientes, como las de arriba; el rebote real lo hace navigateTo (la sección no está en VA_PAGES) y el backend responde 403. */ html:not(.is-beta) .sidebar__item[data-page="sfw-cleaner"], html:not(.is-admin) .sidebar__item[data-page="sfw-cleaner"] { display: none !important; } /* La etiqueta del grupo sigue la suerte de sus ítems: sin ellos, un encabezado "SFW" suelto sobre el grupo siguiente. */ html:not(.has-sfw) .sidebar__group-label[data-group="sfw"], html[data-space="main"] .sidebar__group-label[data-group="sfw"] { display: none !important; } /* Chips de Prepare (pools GPU del espacio actual): en SFW no hay nada que preparar todavía, y el grupo solo lo gestiona la página Generate — que aquí ni siquiera es alcanzable. */ html[data-space="sfw"] #studio-prep-group { display: none !important; } /* Las pantallas de las secciones SFW reutilizan .placeholder-page de studio.css TAL CUAL: allí ya todo el color pasa por --accent / --accent-rgb, así que el cambio de tokens de arriba las retinta solas. Nada que redefinir aquí. */ /* ==================================================================== Sección Swap (.sw-) — línea de la cuenta en uso + referencias de la identidad -------------------------------------------------------------------- Todo el color pasa por los tokens del studio (--accent, --accent-soft, --on-accent, --text-*, --border-*), así que el bloque de tokens del tema 'mono' de arriba lo retinta solo: aquí no hay ni un naranja ni un blanco de acento escritos a pelo. OJO con el alcance: estas clases NO están gateadas por [data-space]. El bloque de referencias (.sw-refs y sus hijos) lo monta models.js TAMBIÉN dentro de la ficha de la identidad, que vive en el espacio actual. Es el mismo componente en dos sitios: un solo juego de reglas. Regla del espacio SFW: cualquier relleno de acento lleva `color: var(--on-accent)` — con el acento en blanco, un #fff heredado desaparecería. Aquí no hay ningún relleno de acento: los CTAs de esta feature son los del studio (.model-create__btn, que ya lo cumple). ==================================================================== */ /* La sección ocupa TODO el ancho del área de contenido: no hay `max-width`. Antes vivía en una columna de 980px centrada y el resto de la pantalla se quedaba en blanco mientras la lista de trabajos —que estaba abajo del todo— no se veía sin bajar. */ .sw-page { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; width: 100%; padding-bottom: 24px; } /* ==================================================================== Las dos columnas (.sw-work) -------------------------------------------------------------------- Izquierda: preparar (los tres pasos + coste y botón). Derecha: lo que sale. Es un grid de UNA columna por defecto y de dos a partir de 1100px — el punto donde la columna izquierda deja de estrangular las casillas de referencia (cuatro de 180px + huecos) si se le quita la mitad del ancho. `align-items: start` para que la columna derecha NO se estire hasta el alto de la izquierda: una tarjeta de resultados vacía tan alta como todo el formulario parece un error. ==================================================================== */ .sw-work { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; } .sw-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } @media (min-width: 1100px) { .sw-work { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr); gap: 22px; } /* Los resultados se quedan a la vista mientras se prepara el siguiente vídeo: la que scrollea es .sw-page, así que el sticky es relativo a ella. Si la lista crece más que la pantalla, scrollea dentro de su propia tarjeta en vez de empujar la página. */ .sw-col--out { position: sticky; top: 0; max-height: calc(100vh - 190px); } .sw-results { min-height: 0; } .sw-results .sw-jobs { overflow-y: auto; min-height: 0; padding-right: 4px; } } @media (min-width: 1500px) { /* Con mucho ancho el formulario no necesita crecer más: lo que gana sitio es el resultado. */ .sw-work { grid-template-columns: minmax(0, 1fr) minmax(380px, 0.7fr); } /* Y aquí las cuatro casillas SÍ caben en una fila. Solo aquí: entre 1100 y 1500 el mínimo general (180px) las deja en 2×2, que se lee mejor que un 3+1 con una suelta debajo —el mismo motivo por el que ese mínimo existe. Acotado a esta pantalla: en la ficha de la identidad (Models) el bloque tiene todo el ancho del modal y no hace falta. */ #page-sfw-swap .sw-refs { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } } /* ---- La cuenta con la que se paga ---- Con UNA sola cuenta esta fila **no se pinta**: no hay elección que ofrecer, y repetir cuál está puesta era ruido — además de sacar el email del usuario a una pantalla de trabajo. Con dos o más, un selector con el nombre que él les puso y nada más. En su variante de aviso (ninguna cuenta, o ninguna utilizable) lleva salida a Settings, que es donde se gestionan. */ .sw-acct-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 11px 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(255, 255, 255, 0.02); font-size: 13px; line-height: 1.5; color: var(--text-soft); overflow-wrap: anywhere; } .sw-acct-line--warn { border-color: var(--border-medium); color: var(--text-muted); } .sw-acct__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; } /* Botón de texto: no compite con los CTAs de la sección, solo abre Settings. */ .sw-acct-line__go { border: 0; background: none; padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .sw-acct-line__go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---- Selector de identidad ---- */ .sw-field { display: flex; flex-direction: column; gap: 6px; max-width: 320px; } .sw-field__label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); } .sw-select { padding: 9px 12px; border: 1px solid var(--border-medium); border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: var(--text-primary); font-family: inherit; font-size: 13.5px; } .sw-select:focus { outline: none; border-color: var(--accent); } .sw-select:disabled { opacity: 0.55; } .sw-select option { background: var(--bg-secondary); color: var(--text-primary); } .sw-note { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin: 0; } /* ==================================================================== Los tres pasos (.sw-steps) -------------------------------------------------------------------- La columna de preparar, con los tres pasos a la vista: identidad, vídeo de origen y modelo del proveedor. No es un asistente de varias pantallas a propósito — cualquiera de los tres datos se cambia sin volver atrás, y el coste de abajo se recalcula solo. (El paso del fondo ya no existe: el fondo es una foto más de la identidad y vive en el bloque de referencias del paso 1.) El número va en su propia columna (círculo) y el cuerpo al lado, así que la lista se lee como una secuencia aunque cada paso crezca (previsualización de vídeo, casillas de referencia, avisos). ==================================================================== */ /* MISMA TRAMPA que el gating del sidebar, y hay que cerrarla igual: casi todo lo de esta pantalla tiene `display` propio (flex/grid/block), que PISA el `[hidden] { display: none }` del user-agent. Sin esta regla, esconder algo con `el.hidden = true` desde swap.js no esconde nada — y lo que se quedaría a la vista es la zona de soltar junto al vídeo ya subido, o el paso del fondo en un estilo que no lo usa. Se cierra de una vez para toda la sección; acotada a #page-sfw-swap para no tocar el mismo bloque de referencias cuando models.js lo monta dentro de la ficha de la identidad. */ #page-sfw-swap [hidden] { display: none !important; } .sw-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: none; } .sw-step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 18px 20px; border: 1px solid var(--border-soft); border-radius: 16px; background: rgba(255, 255, 255, 0.02); } /* El número es un relleno de acento: con el acento en blanco, el texto de dentro TIENE que ir en --on-accent o desaparece (regla del espacio SFW). */ .sw-step__num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; line-height: 1; margin-top: 2px; } .sw-step__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .sw-step__title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; } .sw-step__opt { margin-left: 7px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); } .sw-step__hint { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); max-width: 540px; margin: 0; } /* Aviso que BLOQUEA el botón (hoy: la identidad sin foto de cara). No es un error del servidor: es una condición que el usuario puede arreglar en esta misma pantalla. */ .sw-flag { margin: 0; padding: 9px 12px; border: 1px solid rgba(232, 90, 90, 0.35); border-radius: 10px; background: rgba(232, 90, 90, 0.08); font-size: 12.5px; line-height: 1.5; color: #e85a5a; } /* Mensajes sueltos de un paso (fallo de subida). SIEMPRE textos fijos: swap.js no pinta nunca el detalle del servidor. */ .sw-msg { margin: 0; font-size: 12px; line-height: 1.5; color: #e85a5a; } /* La misma línea, cuando NO es un fallo sino "esto es lo que falta para poder pulsar". */ .sw-msg--soft { color: var(--text-faint); } /* Procedencias que aún no existen. Se dice lo que hay en vez de ofrecer un botón muerto. */ .sw-soon { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-faint); font-style: italic; } /* ---- Zona de arrastrar/soltar ---- El es el que manda (teclado y ratón acaban en él); el arrastre solo le pasa el fichero. Por eso la zona es focusable y tiene su propio :focus-visible. */ .sw-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 26px 18px; border: 1px dashed var(--border-medium); border-radius: 14px; background: rgba(255, 255, 255, 0.02); text-align: center; cursor: pointer; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); } .sw-drop:hover { border-color: var(--accent-ring); } .sw-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sw-drop.is-over { border-color: var(--accent); background: var(--accent-soft); } .sw-drop.is-busy { opacity: 0.55; cursor: default; } .sw-drop__title { font-size: 13px; font-weight: 600; color: var(--text-primary); } .sw-drop__hint { font-size: 11.5px; line-height: 1.5; color: var(--text-faint); } /* Barra de progreso de la subida (XHR: es progreso REAL, no una animación). */ .sw-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .sw-bar__fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.15s linear; } /* ---- Lo ya subido ---- */ .sw-picked { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--border-medium); border-radius: 14px; background: rgba(255, 255, 255, 0.02); } .sw-picked__video, .sw-picked__img { width: 108px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: rgba(0, 0, 0, 0.35); flex: none; display: block; } .sw-picked__img { aspect-ratio: 4 / 3; width: 132px; } .sw-picked__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .sw-picked__name { font-size: 13px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; } /* El corte a 30 s se avisa AQUÍ, antes de gastar: es un aviso, no un error. */ .sw-picked__warn { font-size: 12px; line-height: 1.5; color: var(--text-soft); } .sw-picked__swap { align-self: flex-start; border: 0; background: none; padding: 0; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .sw-picked__swap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ==================================================================== Coste + lanzamiento -------------------------------------------------------------------- El coste va SIEMPRE encima del botón, con su estado de carga: son créditos del cliente y el botón no se activa hasta que se sabe cuántos. El propio botón repite la cifra, que es lo que se lee justo antes de pulsar. ==================================================================== */ .sw-launch { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 20px; border: 1px solid var(--border-medium); border-radius: 16px; background: rgba(255, 255, 255, 0.03); } .sw-cost { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sw-cost__text { font-size: 13px; line-height: 1.5; color: var(--text-soft); } .sw-cost__retry { border: 0; background: none; padding: 0; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .sw-cost__retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* .model-create__btn ya lleva `color: var(--on-accent)` en studio.css: el relleno de acento en blanco no puede llevar texto blanco heredado. */ .sw-go:disabled { opacity: 0.5; cursor: default; } /* ==================================================================== Lista de trabajos -------------------------------------------------------------------- Un trabajo terminado se pinta con su reproductor: el resultado es lo que el usuario ha venido a ver. Lo que sigue abierto se queda compacto, con el tiempo que lleva. Un fallo NO enseña el texto del servidor (puede arrastrar el nombre del proveedor): una sola frase fija y punto. ==================================================================== */ .sw-jobs { display: flex; flex-direction: column; gap: 10px; } .sw-job { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--border-soft); border-radius: 14px; background: rgba(255, 255, 255, 0.02); } .sw-job--succeeded { border-color: var(--border-medium); } .sw-job__player { width: 132px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: #000; flex: none; display: block; } .sw-job__thumb { width: 56px; aspect-ratio: 9 / 16; border-radius: 10px; background: rgba(255, 255, 255, 0.05); flex: none; } .sw-job__body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; min-width: 0; } .sw-job__meta { font-size: 12.5px; color: var(--text-soft); overflow-wrap: anywhere; } .sw-job__note { font-size: 11.5px; color: var(--text-faint); } .sw-job__error { font-size: 12px; color: #e85a5a; } /* Barra indeterminada: el proveedor no da porcentaje, así que no se finge uno. */ .sw-job__bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; max-width: 220px; } .sw-job__bar-fill { display: block; height: 100%; width: 35%; background: var(--accent); animation: sw-job-scan 1.6s var(--ease, ease) infinite; } @keyframes sw-job-scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } } @media (prefers-reduced-motion: reduce) { .sw-job__bar-fill { animation: none; width: 100%; opacity: 0.35; } } .sw-job__actions { flex: none; } /* ---- Esqueleto ---- Lo que se ve mientras llega la primera lista de trabajos: la MISMA fila, sin datos. Antes había un "Loading…" suelto y la columna cambiaba de forma al llegar los datos. */ .sw-job--skeleton { border-style: dashed; } .sw-skel { display: block; height: 9px; width: 45%; border-radius: 4px; background: rgba(255, 255, 255, 0.07); } .sw-skel--wide { width: 75%; } /* Un latido lento, lo justo para que se lea como "esto está llegando" y no como un fallo. */ .sw-job--skeleton .sw-job__thumb, .sw-skel, .sw-refs.is-loading .sw-ref__thumb { animation: sw-skel-pulse 1.4s ease-in-out infinite; } @keyframes sw-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .sw-job--skeleton .sw-job__thumb, .sw-skel, .sw-refs.is-loading .sw-ref__thumb { animation: none; } } /* ==================================================================== Las tres casillas de referencia (front / back / face) -------------------------------------------------------------------- Compartidas con la ficha de la identidad de la página Models: el markup lo genera createRefsPanel() en models.js y estas reglas son las únicas que lo visten. No añadir un segundo juego en studio.css. ==================================================================== */ .sw-refs { display: grid; /* 180px y no 220: con cuatro fotos, el mínimo anterior partía la fila en 3 + 1 en pantallas normales, y la que se quedaba sola parecía otra cosa. Las cuatro son lo mismo. */ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .sw-refs__status { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin: 0; } /* Sin identidad seleccionada: las casillas se ven apagadas y no aceptan clics, pero el aviso de al lado sigue legible y clicable (por eso no se apaga el contenedor entero). */ .sw-refs.is-locked .sw-ref { opacity: 0.5; } .sw-refs.is-locked .sw-ref__actions { pointer-events: none; } .sw-ref { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 14px; background: rgba(255, 255, 255, 0.02); } .sw-ref.has-img { border-color: var(--border-medium); } .sw-ref.is-busy .sw-ref__actions { opacity: 0.5; pointer-events: none; } .sw-ref__thumb { position: relative; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border-medium); border-radius: 10px; background: rgba(255, 255, 255, 0.03); overflow: hidden; } .sw-ref.has-img .sw-ref__thumb { border-style: solid; } .sw-ref__img { width: 100%; height: 100%; object-fit: cover; display: block; } .sw-ref__img[hidden] { display: none; } .sw-ref__empty { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); } .sw-ref__body { display: flex; flex-direction: column; gap: 5px; } .sw-ref__label { font-size: 13px; font-weight: 600; color: var(--text-primary); } .sw-ref__hint { font-size: 11.5px; line-height: 1.5; color: var(--text-muted); } .sw-ref__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; } .sw-ref__btn { padding: 6px 12px; border: 1px solid var(--border-medium); border-radius: 9999px; background: rgba(255, 255, 255, 0.04); color: var(--text-soft); font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; transition: border-color 0.25s var(--ease), color 0.25s var(--ease); } .sw-ref__btn:hover { border-color: var(--accent); color: var(--text-primary); } .sw-ref__btn:disabled { opacity: 0.5; cursor: default; } .sw-ref__btn--main { display: inline-flex; align-items: center; } .sw-ref__bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .sw-ref__bar-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.15s linear; } .sw-ref__msg { font-size: 11.5px; line-height: 1.45; color: #e85a5a; margin: 0; } /* Fail-closed de rol: subir o quitar una referencia es admin-only en el backend (`organization.manage`) y la sección Swap SÍ la ve el VA. swap.js ya no le pide las referencias; esto cierra la puerta también desde el CSS, igual que el resto del studio (`html:not(.is-admin)`), para que ni un JS a medias ofrezca un botón que da 403. Se limita a #page-sfw-swap: en Models el bloque vive dentro de una página que ya es admin-only. */ html:not(.is-admin) #page-sfw-swap .sw-ref__actions { display: none; } @media (max-width: 720px) { .sw-card { padding: 16px; } .sw-card__head { flex-direction: column; align-items: flex-start; gap: 10px; } /* El número deja de tener columna propia: en pantalla estrecha esos 44px salen del ancho útil del paso, que es donde viven el vídeo y las tres casillas. */ .sw-step { grid-template-columns: 1fr; gap: 10px; padding: 15px 16px; } .sw-launch { padding: 14px 16px; align-self: stretch; } .sw-go { width: 100%; } .sw-picked__video, .sw-picked__img { width: 92px; } .sw-job__player { width: 104px; } } /* ==================================================================== Tarjeta "Video accounts" de Settings (.va-) -------------------------------------------------------------------- Vive dentro de una .settings-card normal (studio.html): el marco, la cabecera y el cuerpo ya los viste studio.css, y los controles son los del studio (.model-create__btn para el CTA, .model-create__input para el nombre, .ghost-btn para lo secundario). Estas reglas solo montan lo que no existía: la LISTA de cuentas, el panel del EMPAREJADO (un comando copiable, dos pestañas de sistema y una cuenta atrás) y el formulario de pegado manual, que queda como vía secundaria. Todo el color pasa por los tokens; el único relleno de acento es el .model-create__btn, que ya lleva `color: var(--on-accent)` en studio.css — con el acento del espacio SFW en blanco, un #fff heredado desaparecería. FAIL-CLOSED: Settings es una página COMPARTIDA por los dos espacios, así que la tarjeta se oculta mientras no lleve `.has-sfw` (la pone auth.js cuando el backend confirma el espacio). Sin la clase no se ve ni durante la carga ni si el JS no llega a correr; el gate real sigue siendo el 403 del backend. ==================================================================== */ html:not(.has-sfw) #settings-connections-card { display: none !important; } /* Las tarjetas de Connections CRECEN al desplegar un formulario (pegar credenciales, pegar la sesión de Pinterest, el comando del emparejado). La rejilla de Settings es un flex item con `overflow: auto` dentro de `.page`, y con filas `auto` Chrome las dimensiona por la contribución MÍNIMA de las tarjetas (que llevan `overflow: hidden`): la fila se queda en la altura calculada antes del despliegue y el cuerpo sale cortado — medido: fila de 239px con 550px de contenido, y la tarjeta siguiente encima. Con `max-content` las filas miden lo que hay dentro, que es lo que una rejilla de tarjetas tiene que hacer. Afecta a TODA la página de Settings a propósito: el fallo era de la rejilla, no de una tarjeta. */ .settings-page { grid-auto-rows: max-content; } /* ---- La tarjeta Connections: un subapartado por cuenta externa ---- Higgsfield · Google Drive · Pinterest viven en UNA tarjeta, separados por una línea, cada uno con su cabecera (`.settings-subhead`, la misma que usa Organization) y su cuerpo pintado por swap.js. Un subapartado oculto (`hidden`, p.ej. Drive sin app) no deja hueco ni línea. */ .settings-connections { gap: 0; padding-top: 6px; } .settings-connection { display: flex; flex-direction: column; gap: 12px; padding: 16px 0 18px; border-top: 1px solid var(--border-soft); } .settings-connection:first-child { border-top: 0; padding-top: 8px; } .settings-connection:last-child { padding-bottom: 2px; } .settings-connection[hidden] { display: none !important; } .settings-connection__body { display: flex; flex-direction: column; gap: 12px; } .va-list { display: flex; flex-direction: column; gap: 8px; } .va-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 13px; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(255, 255, 255, 0.02); transition: border-color 0.25s var(--ease), background 0.25s var(--ease); } /* La cuenta en uso se distingue de un vistazo: borde de acento (alfa, no relleno) y la etiqueta "In use" de al lado. */ .va-row.is-active { border-color: var(--accent-ring); background: var(--accent-soft); } .va-row__pick { display: flex; align-items: center; gap: 11px; flex: 1 1 220px; min-width: 0; cursor: pointer; } .va-row__radio { flex: none; width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } .va-row__radio:disabled { cursor: default; opacity: 0.5; } .va-row__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .va-row__name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; } .va-row__meta { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; } .va-row__tags { display: inline-flex; align-items: center; gap: 8px; flex: none; } .va-tag { padding: 4px 9px; border-radius: 4px; background: rgba(var(--accent-rgb), 0.15); color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; } /* Píldora de estado. Solo hay dos desenlaces (conectada o no): el alta es síncrona y no deja estados intermedios que pintar. */ .va-pill { padding: 4px 10px; border: 1px solid var(--border-medium); border-radius: 9999px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .va-pill[data-state="connected"] { border-color: var(--accent-ring); color: var(--text-primary); } .va-pill[data-state="error"] { border-color: rgba(232, 90, 90, 0.4); color: #e85a5a; } .va-row .ghost-btn { flex: none; } /* ---- Textos ---- */ .va-note { font-size: 12.5px; line-height: 1.6; color: var(--text-soft); max-width: 560px; margin: 0; } .va-note--muted { color: var(--text-faint); } /* Mensajes de fallo: siempre FIJOS (swap.js nunca pinta el `error` del servidor). */ .va-note--bad { color: #e85a5a; } /* Confirmación corta tras conectar. Va en acento (no en verde de semáforo): el acento del espacio es blanco y un verde suelto sería el único color ajeno a la paleta. */ .va-note--good { color: var(--text-primary); font-weight: 600; } /* ---- Vía secundaria ---- "Paste credentials instead" es un botón de verdad (accesible con teclado) pintado como un enlace: comparte fila con el CTA y no puede competir con él. */ .va-link { appearance: none; border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 12px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color 0.25s var(--ease); } .va-link:hover { color: var(--text-primary); } .va-link:disabled { opacity: 0.5; cursor: not-allowed; } .va-link:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: 2px; border-radius: 4px; } /* ---- Emparejado: UN comando y una cuenta atrás ---- El código de un solo uso NO se pinta suelto en ningún sitio: viaja DENTRO del comando (que es un .va-code normal) y desaparece del DOM en cuanto la cuenta conecta o el panel se cierra. Aquí no hay ninguna regla que lo enseñe aparte, y no debe añadirse. */ .va-pair { display: flex; flex-direction: column; gap: 12px; padding: 15px 16px; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(255, 255, 255, 0.02); } /* Selector de sistema. `navigator.platform` preselecciona uno, pero los dos siguen ahí: la detección falla más de lo que parece y un comando que la terminal no entiende es un callejón sin salida. */ .va-tabs { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--border-soft); border-radius: 9px; align-self: flex-start; max-width: 100%; flex-wrap: wrap; } .va-tab { appearance: none; border: 0; background: none; padding: 6px 12px; border-radius: 6px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: background 0.25s var(--ease), color 0.25s var(--ease); } .va-tab:hover { color: var(--text-primary); } /* Relleno de acento → el texto va en --on-accent o desaparece (el acento del espacio SFW es blanco). Misma regla que el resto de sólidos de este fichero. */ .va-tab.is-active { background: var(--accent); color: var(--on-accent); } .va-tab:disabled { opacity: 0.5; cursor: not-allowed; } /* Cuenta atrás del código. La refresca swap.js cada segundo sobre este mismo nodo (repintar el panel entero se llevaría por delante el "Copied" del botón de copiar). */ .va-pair__count { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--text-faint); font-variant-numeric: tabular-nums; } /* ---- Alta de una cuenta: dos pasos ---- Uno ocurre FUERA del studio (dos órdenes en el ordenador del usuario) y el otro aquí (pegar lo que la segunda imprimió). Por eso es una lista numerada de verdad y no dos campos sueltos: el orden es la mitad de la instrucción. No hay panel de espera ni spinner: el alta es síncrona y el único estado intermedio es el botón deshabilitado mientras la petición está en vuelo. */ .va-form { display: flex; flex-direction: column; gap: 14px; padding: 15px 16px; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(255, 255, 255, 0.02); } .va-form__title { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text-primary); } .va-steps { list-style: decimal; margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 18px; } /* El número lo pinta el marcador de la lista: se deja apagado para que el que manda sea el texto del paso, no la numeración. */ .va-step { color: var(--text-faint); } .va-step__text { margin: 0 0 9px; font-size: 12.5px; line-height: 1.6; color: var(--text-soft); max-width: 560px; } .va-step__hint { margin: 9px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--text-faint); overflow-wrap: anywhere; } /* ---- Las dos órdenes, copiables ---- Monoespaciada y seleccionable: si el portapapeles del navegador falla o está denegado, el texto sigue estando ahí para copiarlo a mano (el JS lo selecciona por si acaso). */ .va-code { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-medium); border-radius: 10px; background: rgba(0, 0, 0, 0.28); max-width: 560px; } .va-code__pre, .va-step__hint code, .va-ta { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } .va-code__pre { flex: 1 1 auto; min-width: 0; margin: 0; white-space: pre; overflow-x: auto; font-size: 12px; line-height: 1.75; color: var(--text-primary); user-select: text; } /* El comando del emparejado es UNA línea larga (la URL lleva el código dentro). Se deja PARTIR en varias líneas en vez de esconderla tras una barra horizontal: un comando del que solo se ve el principio no se lee, y no se puede comprobar antes de pegarlo en la terminal. Partir aquí es seguro: el botón copia el texto exacto desde JS, y una selección a mano sobre un salto BLANDO tampoco arrastra saltos de línea. */ .va-code__pre--wrap { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; } .va-code__copy { flex: none; } .va-step__hint code { font-size: 11px; color: var(--text-soft); } /* ---- Campos ---- */ .va-field { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-width: 560px; } .va-field__label { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); } /* El cuadro donde se pega el fichero. Mismo lenguaje que .model-create__input (studio.css) pero en monoespaciada y en varias líneas: lo que va dentro es un fichero, no una frase. */ .va-ta { width: 100%; min-height: 112px; resize: vertical; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; background: rgba(0, 0, 0, 0.24); color: var(--text-primary); font-size: 12px; line-height: 1.6; transition: border-color 0.25s var(--ease); } .va-ta::placeholder { color: var(--text-faint); } .va-ta:focus { outline: none; border-color: var(--accent-ring); } .va-ta:disabled { opacity: 0.55; cursor: not-allowed; } .va-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } @media (max-width: 720px) { .va-row { align-items: flex-start; } /* En pantalla estrecha el botón de copiar no cabe al lado de las órdenes: baja debajo, que es preferible a apretar el bloque de código hasta que no se lea. */ .va-code { flex-direction: column; align-items: stretch; } .va-code__copy { align-self: flex-start; } } /* ---------------------------------------------------------------- horas: no se enseñan aquí Decisión de producto: en este espacio el usuario NO ve su consumo de horas de GPU ni el contador de la demo. Se OCULTA, no se apaga: la medición sigue corriendo por debajo igual que en el otro espacio (`repo_metering`), así que el gasto se conoce y las cuotas siguen aplicándose — lo que cambia es qué se le cuenta al usuario, no qué se cobra. Va por CSS y no por JS a propósito: el mismo elemento lo escriben `applySession` y cada refresco de sesión, así que esconderlo desde el JS obligaría a acordarse en los tres sitios y volvería a aparecer al primer refresco que alguien añada. Aquí no puede reaparecer. `!important` por lo mismo que el resto del gating de este fichero: la regla base pinta con display propio y el atributo `hidden` del UA no gana. */ html[data-space="sfw"] #user-card-plan, html[data-space="sfw"] #user-card-demo { display: none !important; } /* ---------------------------------------------- el bloque dentro del popup de la identidad El popup de la modelo tiene alto FIJO y `overflow:hidden`, y su regla `#model-info-modal .trainer-section { flex: 1 }` reparte el alto entre secciones. Sin estas dos reglas, el bloque de fotos peleaba con la lista de LoRAs y lo que sobraba se cortaba por debajo del pie: las tarjetas aparecían pisadas por los botones de borrar. */ #model-info-modal .modelinfo-refs { flex: 0 0 auto; /* ocupa lo suyo y no compite por el alto restante */ min-height: 0; overflow: visible; } /* Versión compacta: cuatro fotos en una fila dentro de 640px de popup. Es el MISMO componente que la sección Swap; solo cambia el tamaño, para no mantener dos bloques distintos. */ .sw-refs--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .sw-refs--compact .sw-ref { padding: 8px; gap: 6px; border-radius: 10px; } .sw-refs--compact .sw-ref__thumb { aspect-ratio: 1 / 1; } .sw-refs--compact .sw-ref__label { font-size: 12px; } /* La descripción larga sobra aquí: el nombre del hueco ya lo dice, y el detalle vive en la sección Swap, donde hay sitio para leerlo. */ .sw-refs--compact .sw-ref__hint { display: none; } .sw-refs--compact .sw-ref__btn { padding: 4px 8px; font-size: 10.5px; } @media (max-width: 560px) { .sw-refs--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== Paso 3 · Prendas (outfits) -------------------------------------------------------------------------- Cada prenda es un pedido: de cada una salen DOS vídeos. Por eso la rejilla enseña las que hay a la vez y no una "seleccionada" — el usuario tiene que ver de un vistazo el tamaño de lo que va a pagar. El área de soltar NO desaparece con la primera (al revés que la del vídeo, donde solo cabe una): aquí se van añadiendo. Solo se esconde al llegar al tope. ========================================================================== */ .sw-drop--slim { padding: 18px 16px; } .sw-outfits { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; margin-top: 12px; } .sw-outfits:empty { display: none; } .sw-outfit { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(255, 255, 255, 0.02); } .sw-outfit__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; background: rgba(255, 255, 255, 0.04); display: block; } .sw-outfit__name { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); } .sw-outfit__del { align-self: flex-start; padding: 3px 8px; border: 1px solid var(--border-soft); border-radius: 999px; background: transparent; color: var(--text-faint); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); } .sw-outfit__del:hover { color: var(--text-primary); border-color: var(--accent-ring); } /* El hueco que ocupa una subida en vuelo: mantiene la altura de la rejilla para que las tarjetas ya subidas no salten al aterrizar la siguiente. */ .sw-outfit--busy { align-items: center; justify-content: center; min-height: 140px; border-style: dashed; color: var(--text-faint); font-size: 11.5px; } /* -------------------------------------------------------------------------- Tomas por prenda + recuento -------------------------------------------------------------------------- El segmentado va pegado a la rejilla de prendas porque es la misma decisión: cuántos vídeos salen. Y el recuento se pinta como una fórmula (3 outfits × 2 videos each = 6 videos) en vez de como una frase: lo que hay que leer de un vistazo es el número final, que es lo que se paga. -------------------------------------------------------------------------- */ .sw-runs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .sw-runs__label { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); } .sw-seg { display: inline-flex; padding: 2px; border: 1px solid var(--border-soft); border-radius: 999px; background: rgba(255, 255, 255, 0.02); } .sw-seg__btn { min-width: 34px; padding: 5px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--text-faint); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: color 0.2s var(--ease), background 0.2s var(--ease); } .sw-seg__btn:hover { color: var(--text-secondary); } .sw-seg__btn.is-on { background: var(--text-primary); color: var(--bg-base); } .sw-seg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sw-tally { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin-top: 10px; font-size: 12px; color: var(--text-faint); } .sw-tally__part b { color: var(--text-secondary); font-variant-numeric: tabular-nums; } .sw-tally__x, .sw-tally__eq { color: var(--border-medium); } .sw-tally__total { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; } /* Casilla de referencia mientras se arrastra una foto encima. El realce va en la TARJETA entera porque ese es el destino: apuntar a la miniatura mientras se arrastra es justo lo que falla. */ .sw-ref.is-over { border-color: var(--accent); background: var(--accent-soft); } .sw-ref.is-over .sw-ref__thumb { border-color: var(--accent); } /* -------------------------------------------------------------------------- El visor de vídeo -------------------------------------------------------------------------- El reproductor de la lista sirve para reconocer cuál es; para verlo de verdad hace falta pantalla. Se abre encima y no en otra pestaña: la URL está firmada y no tiene por qué acabar en la barra de direcciones. El alto lo manda `min()` sobre el viewport: un reel es 9:16, así que lo que se acaba antes es la altura, y fijar el ancho dejaría el vídeo cortado por arriba y por abajo. -------------------------------------------------------------------------- */ .sw-viewer { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(6px); } .sw-viewer__box { display: flex; flex-direction: column; gap: 10px; max-width: 100%; } .sw-viewer__video { display: block; /* Alto y ancho FIJOS, no `max-*`: un `