/* ====================================================
STUDIO — Editorial luxe layout
==================================================== */
/* ===== Studio layout ===== */
.studio-body {
overflow: hidden;
background: var(--bg-primary);
height: 100vh;
display: grid;
grid-template-columns: 260px 1fr;
position: relative;
transition: grid-template-columns .28s var(--ease);
}
/* ===== Background atmosférico (video loop, MUY sutil para no distraer del UI) ===== */
.studio-bg {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
background: var(--bg-primary);
}
.studio-bg__video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
object-fit: cover;
/* Mucho más apagado que en la landing — el studio prioriza el contenido del UI */
filter: saturate(0.3) brightness(0.32) contrast(1.05);
opacity: 0.85;
}
.studio-bg__overlay {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse at 70% 50%, transparent 0%, rgba(0,0,0,0.7) 80%),
linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.65) 100%);
z-index: 1;
}
/* ===== Sidebar ===== */
.sidebar {
height: 100vh;
padding: 28px 22px 22px;
display: flex;
flex-direction: column;
border-right: 1px solid rgba(255, 255, 255, 0.06);
background: #0a0a0c; /* SÓLIDO. Sin transparencia, sin blur: máximo contraste */
z-index: 20;
position: relative;
overflow-x: hidden; /* recorta etiquetas mientras se colapsa, sin wrap */
overflow-y: auto; /* todo el sidebar scrollea como una unidad en ventanas bajas */
transition: padding .28s var(--ease);
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 9999px; }
.sidebar__top {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 36px;
padding: 4px 6px;
}
.sidebar__logo {
display: block;
text-decoration: none;
}
.sidebar__logo-text {
font-family: var(--font-serif);
font-weight: 400;
font-size: 22px;
letter-spacing: 0;
line-height: 1;
color: #fff;
}
.sidebar__logo-accent {
color: var(--accent);
font-style: italic;
}
.sidebar__edition {
font-size: 9px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--text-faint);
font-weight: 600;
}
/* Sidebar nav */
.sidebar__nav {
display: flex;
flex-direction: column;
gap: 2px;
flex-shrink: 0; /* no se comprime: si no cabe, scrollea el sidebar entero */
}
.sidebar__group-label {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
padding: 18px 8px 8px;
font-weight: 700;
}
.sidebar__group-label:first-child { padding-top: 0; }
.sidebar__item {
position: relative;
display: grid;
grid-template-columns: 16px 1fr auto;
align-items: center;
gap: 12px;
padding: 11px 14px;
border: none;
background: transparent;
color: #ffffff; /* BLANCO PURO. Sin opacity, sin gris */
font-size: 13px;
font-weight: 600; /* Más grueso para máxima legibilidad */
letter-spacing: 0.01em;
border-radius: 10px;
cursor: pointer;
transition: background 0.25s var(--ease), transform 0.25s var(--ease),
grid-template-columns .28s var(--ease), padding .28s var(--ease);
text-align: left;
font-family: inherit;
white-space: nowrap;
}
/* Barra lateral naranja luminosa en hover/active */
.sidebar__item::after {
content: '';
position: absolute;
top: 6px;
bottom: 6px;
left: 0;
width: 3px;
background: var(--accent);
border-radius: 0 3px 3px 0;
opacity: 0;
transform: scaleY(0.4);
transform-origin: center;
transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
box-shadow: 0 0 8px rgba(201, 95, 46, 0.7);
pointer-events: none;
}
.sidebar__item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.65);
transition: all 0.25s var(--ease);
position: relative;
z-index: 1;
}
.sidebar__item-icon svg { display: block; }
.sidebar__item-label {
flex: 1;
position: relative;
z-index: 1;
overflow: hidden;
white-space: nowrap;
transition: opacity .18s var(--ease);
}
.sidebar__item-label em {
font-style: italic;
font-family: var(--font-serif);
font-size: 11px;
color: var(--accent);
margin-left: 6px;
letter-spacing: 0;
}
.sidebar__item-shortcut {
font-size: 10px;
letter-spacing: 0.1em;
padding: 2px 7px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.85);
font-weight: 700;
text-transform: uppercase;
position: relative;
z-index: 1;
overflow: hidden;
transition: all 0.25s var(--ease), opacity .18s var(--ease);
}
/* Badge "Soon" para items en construcción (Autoprompter) */
.sidebar__item-soon {
font-size: 9px;
letter-spacing: 0.12em;
padding: 2px 7px;
border-radius: 4px;
background: rgba(201, 95, 46, 0.16);
border: 1px solid rgba(201, 95, 46, 0.35);
color: var(--accent);
font-weight: 700;
text-transform: uppercase;
position: relative;
z-index: 1;
overflow: hidden;
transition: all 0.25s var(--ease), opacity .18s var(--ease);
}
/* El item "Soon" se ve algo más tenue (aún navegable a su página de preview) */
.sidebar__item--soon .sidebar__item-label,
.sidebar__item--soon .sidebar__item-icon { opacity: 0.7; }
.studio-body.sidebar-collapsed .sidebar__item-soon { display: none; }
/* HOVER: background naranja sólido + barra lateral + marker iluminado */
.sidebar__item:hover {
background: rgba(201, 95, 46, 0.18); /* Naranja real, no gradient sutil */
transform: translateX(3px);
}
.sidebar__item:hover::after { opacity: 1; transform: scaleY(1); }
.sidebar__item:hover .sidebar__item-icon {
color: var(--accent);
filter: drop-shadow(0 0 3px rgba(201, 95, 46, 0.5));
}
.sidebar__item:hover .sidebar__item-shortcut {
background: rgba(201, 95, 46, 0.28);
color: #fff;
}
/* ACTIVE: estado permanente, naranja más cargado */
.sidebar__item.is-active {
background: rgba(201, 95, 46, 0.22);
}
.sidebar__item.is-active::after { opacity: 1; transform: scaleY(1); }
.sidebar__item.is-active .sidebar__item-icon {
color: var(--accent);
filter: drop-shadow(0 0 4px rgba(201, 95, 46, 0.55));
}
.sidebar__item.is-active .sidebar__item-shortcut {
background: rgba(201, 95, 46, 0.32);
color: #fff;
}
/* User card en footer del sidebar */
.sidebar__footer {
margin-top: auto; /* empuja el footer abajo cuando sobra espacio; fluye con scroll cuando no */
flex-shrink: 0; /* el footer (Settings + user card) nunca se comprime ni se recorta */
}
/* Divisor entre Settings y la tarjeta de usuario (Settings queda ENCIMA de la línea) */
.sidebar__divider { border-top: 1px solid var(--border-soft); margin: 10px 0; }
.user-card {
width: 100%;
display: grid;
grid-template-columns: 40px 1fr;
gap: 12px;
align-items: center;
padding: 11px 14px; /* mismo padding que .sidebar__item: alinea el avatar con la columna de iconos */
border: 1px solid transparent;
background: transparent;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s var(--ease);
font-family: inherit;
text-align: left;
}
.user-card:hover {
background: rgba(255, 255, 255, 0.03);
border-color: var(--border-soft);
}
.user-card__avatar {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background: #0a0a0a;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(201, 95, 46, 0.4);
}
.user-card__avatar-letter {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: 20px;
color: var(--accent);
position: relative;
z-index: 1;
line-height: 1;
}
.user-card__avatar-halo {
position: absolute;
inset: -3px;
border-radius: 50%;
background: radial-gradient(circle, rgba(201, 95, 46, 0.35), transparent 70%);
opacity: 0;
transition: opacity 0.3s var(--ease);
}
.user-card:hover .user-card__avatar-halo { opacity: 1; }
.user-card__info { display: flex; flex-direction: column; min-width: 0; }
.user-card__name {
font-size: 13px;
font-weight: 600;
color: var(--text-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-card__plan {
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-faint);
font-weight: 600;
}
/* Badge DEMO junto a la campana de notificaciones (texto limpio, sin fondo amarillo). */
.topbar__demo {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 700; letter-spacing: .08em;
color: var(--text, #e9eaec);
white-space: nowrap;
}
/* El display de arriba pisa el UA [hidden]{display:none}; sin esto el badge se ve
SIEMPRE (aunque la cuenta no sea demo y el JS ponga badge.hidden=true). */
.topbar__demo[hidden] { display: none; }
.is-demo-exhausted .topbar__demo { color: #e0564b; }
.user-card-meter {
display: inline-block;
margin-top: 2px;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
color: var(--accent, #c9a227);
}
.is-plan-exhausted .user-card-meter { color: #e0564b; }
/* ===== Main ===== */
.studio-main {
padding: 0 36px 28px;
position: relative;
z-index: 1;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ===== Topbar ===== */
.topbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 24px 0 18px;
border-bottom: 1px solid var(--border-soft);
margin-bottom: 26px;
flex-shrink: 0;
}
/* ===== Tiempo agotado (demo o plan GPU): ocultar Prepare + bloquear Generate ===== */
.is-demo-exhausted #studio-prep-group,
.is-plan-exhausted #studio-prep-group { display: none !important; }
#page-generate { position: relative; }
.generate-lock { display: none; }
.is-demo-exhausted #page-generate .generate-lock,
.is-plan-exhausted #page-generate .generate-lock {
display: flex; align-items: center; justify-content: center;
position: absolute; inset: 0; z-index: 40;
background: rgba(8, 9, 12, .82);
backdrop-filter: blur(6px);
}
.generate-lock__card {
text-align: center; max-width: 380px; padding: 34px 30px;
border: 1px solid var(--border-soft); border-radius: 18px;
background: rgba(20, 22, 28, .94);
}
.generate-lock__icon { font-size: 30px; margin-bottom: 10px; }
.generate-lock__title {
margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #fff;
}
.generate-lock__text {
margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-faint);
}
.topbar__crumbs {
display: flex;
gap: 8px;
margin-bottom: 10px;
}
.topbar__crumb {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
font-weight: 600;
}
.topbar__crumb--current { color: var(--text-muted); }
.topbar__crumb-sep { color: var(--text-faint); opacity: 0.5; }
.topbar__title {
font-family: var(--font-serif);
font-size: 42px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.01em;
color: #fff;
}
.topbar__title em { color: var(--accent); }
.topbar__right {
display: flex;
gap: 8px;
align-items: center;
align-self: flex-start; /* sube el grupo al borde superior del header (a la altura de las migas) */
}
.icon-btn {
width: 36px;
height: 36px;
border-radius: 9999px;
border: 1px solid var(--border-medium);
background: transparent;
color: var(--text-soft);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s var(--ease);
}
.icon-btn:hover {
background: rgba(255,255,255,0.05);
color: #fff;
border-color: rgba(255,255,255,0.3);
}
.topbar__pill {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
padding: 8px 14px;
border-radius: 9999px;
border: 1px solid var(--border-medium);
background: transparent;
color: var(--text-primary);
cursor: pointer;
transition: all 0.25s var(--ease);
text-transform: uppercase;
}
.topbar__pill:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.3);
}
.topbar__pill--filled { background: rgba(255,255,255,0.06); }
/* ===== Notifications ===== */
.notif { position: relative; display: flex; }
.notif .icon-btn { position: relative; overflow: visible; }
.notif-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 9999px;
background: var(--accent);
color: #fff;
font-family: var(--font-body);
font-size: 9px;
font-weight: 700;
line-height: 16px;
text-align: center;
box-shadow: 0 0 0 2px var(--bg-primary);
pointer-events: none;
}
.notif-panel {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 320px;
max-height: 420px;
display: flex;
flex-direction: column;
background: var(--bg-secondary);
border: 1px solid var(--border-medium);
border-radius: 14px;
box-shadow: 0 18px 50px rgba(0,0,0,0.55);
z-index: 1200;
overflow: hidden;
}
.notif-panel[hidden] { display: none; }
.notif-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 16px;
border-bottom: 1px solid var(--border-soft);
}
.notif-panel__title {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.notif-panel__mark {
background: none;
border: none;
color: var(--text-muted);
font-family: var(--font-body);
font-size: 11px;
cursor: pointer;
transition: color 0.2s var(--ease);
}
.notif-panel__mark:hover { color: var(--text-soft); }
.notif-panel__list {
overflow-y: auto;
flex: 1;
min-height: 0;
}
.notif-panel__list::-webkit-scrollbar { width: 4px; }
.notif-panel__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 9999px; }
.notif-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
border-bottom: 1px solid var(--border-soft);
padding: 12px 16px 12px 28px;
position: relative;
cursor: pointer;
transition: background 0.18s var(--ease);
}
.notif-item:hover { background: rgba(255,255,255,0.04); }
.notif-item:last-child { border-bottom: none; }
.notif-item.is-unread::before {
content: "";
position: absolute;
left: 13px;
top: 16px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
}
.notif-item__title {
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 500;
color: var(--text-soft);
line-height: 1.35;
}
.notif-item.is-unread .notif-item__title { color: var(--text-primary); }
.notif-item__time {
display: block;
margin-top: 3px;
font-family: var(--font-body);
font-size: 10.5px;
color: var(--text-faint);
}
/* Acciones de la cabecera del panel (Mark all as read + Clear all). */
.notif-panel__actions { display: flex; align-items: center; gap: 12px; }
.notif-panel__clear:hover { color: #e5737b; }
/* Fila de notificación: item clicable (flex:1) + botón × para borrar. El borde inferior pasa
de .notif-item a la fila para que abarque también el botón de borrar. */
.notif-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-soft); }
.notif-row:last-child { border-bottom: none; }
.notif-row .notif-item { flex: 1 1 auto; width: auto; border-bottom: none; }
.notif-item__del {
flex: 0 0 auto;
background: none;
border: none;
color: var(--text-faint);
font-size: 18px;
line-height: 1;
padding: 0 14px;
cursor: pointer;
transition: color 0.18s var(--ease);
}
.notif-item__del:hover { color: #e5737b; }
.notif-panel__empty {
padding: 28px 16px;
text-align: center;
font-family: var(--font-body);
font-size: 12px;
color: var(--text-faint);
margin: 0;
}
.notif-panel__empty[hidden] { display: none; }
/* ===== Page ===== */
.page {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.page.is-hidden { display: none; }
/* Animación de entrada al cambiar de sección. Solo la sección entrante anima.
El estado final del keyframe = estado natural de .page (opacity:1, sin
transform), así que si la animación se interrumpe (p.ej. la pestaña pierde
el foco) la sección queda igualmente visible y bien colocada — no dependemos
de ningún onComplete. */
@keyframes page-enter {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes page-enter-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.page.is-entering {
animation: page-enter 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: opacity, transform;
}
/* ===== Generate page ===== */
.generate {
display: grid;
grid-template-columns: 400px minmax(0, 1fr);
gap: 32px;
align-items: stretch;
flex: 1;
min-height: 0;
}
.generate__controls {
display: flex;
flex-direction: column;
gap: 22px;
overflow-y: auto;
padding-right: 8px;
min-height: 0;
}
.generate__controls::-webkit-scrollbar {
width: 4px;
}
.generate__controls::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.08);
border-radius: 9999px;
}
.control-group {
display: flex;
flex-direction: column;
gap: 12px;
flex-shrink: 0;
}
/* JET Fusion (flux2): el prompt es fijo y oculto. !important para que gane a cualquier display
inline que ponga otro código async (p.ej. el restore tras un F5 dentro del engine). */
html[data-gen-engine="flux2"] #prompt-group { display: none !important; }
/* Badge "Beta" (junto al selector de diffusion model Standard/Beta de los beta testers). */
.beta-badge {
display: inline-block; margin-left: 6px; padding: 1px 6px;
font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: #C95F2E; border: 1px solid rgba(201, 95, 46, 0.5); border-radius: 999px;
vertical-align: middle;
}
.control-label {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
font-weight: 600;
}
/* Engine grid */
.engine-grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
/* Pestañas del selector de engine (Standard / Advanced). */
.engine-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.engine-tab {
flex: 1;
background: none;
border: 1px solid var(--border-soft);
border-radius: 8px;
color: var(--text-muted);
font-family: var(--font-body);
font-size: 12px;
padding: 7px 12px;
cursor: pointer;
transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.engine-tab:hover { color: var(--text-soft); }
.engine-tab.is-active {
color: #fff;
border-color: #C95F2E;
background: rgba(201, 95, 46, 0.14);
}
/* Solo se muestra el panel de la pestaña activa (el activo conserva el display:grid de .engine-grid). */
.engine-tab-panel:not(.is-active) { display: none; }
/* El engine "Test mode" es una herramienta de dev: solo visible para admins. */
html:not(.is-admin) .engine-card--admin { display: none; }
/* JET Onyx Reference (krea2i2i): engine SOLO para orgs beta (.is-beta en , ver auth.js). */
html:not(.is-beta) .engine-card[data-engine="krea2i2i"],
html:not(.is-beta) #studio-prep-krea2i2i { display: none !important; }
.engine-card {
display: grid;
grid-template-columns: auto 1fr auto; /* índice · cuerpo · botón Prepare */
gap: 16px;
padding: 14px 16px;
border: 1px solid var(--border-medium);
border-radius: 12px;
background: rgba(255, 255, 255, 0.015);
color: var(--text-soft);
cursor: pointer;
transition: all 0.3s var(--ease);
text-align: left;
font-family: inherit;
align-items: center;
position: relative;
overflow: hidden;
}
.engine-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at left center, rgba(201, 95, 46, 0.18), transparent 60%);
opacity: 0;
transition: opacity 0.4s var(--ease);
}
.engine-card:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.22);
transform: translateY(-1px);
}
.engine-card:hover::before { opacity: 0.4; }
.engine-card.is-active {
background: rgba(201, 95, 46, 0.08);
border-color: var(--accent);
color: #fff;
}
.engine-card.is-active::before { opacity: 1; }
.engine-card__index {
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
color: var(--text-faint);
position: relative;
z-index: 1;
}
.engine-card.is-active .engine-card__index { color: var(--accent); }
.engine-card__body {
display: flex;
flex-direction: column;
gap: 3px;
position: relative;
z-index: 1;
}
.engine-card__name {
font-family: var(--font-serif);
font-weight: 400;
font-size: 18px;
letter-spacing: 0;
line-height: 1.05;
}
.engine-card__tag {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 500;
}
/* JET Onyx Upgraded (krea2): cards seleccionables de LoRAs (multi-select + fuerza) */
.krea2-loras {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.krea2-lora-card {
position: relative;
border: 1px solid var(--border-medium);
border-radius: 12px;
padding: 12px 13px;
background: rgba(255, 255, 255, 0.015);
color: var(--text-soft);
cursor: pointer;
user-select: none;
transition: all 0.25s var(--ease);
}
.krea2-lora-card:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.22);
transform: translateY(-1px);
}
.krea2-lora-card.is-selected {
background: rgba(201, 95, 46, 0.08);
border-color: var(--accent);
color: #fff;
}
/* Tope de selección alcanzado (solo el box con .is-cap-reached, p.ej. JET Onyx): las cards no
seleccionadas se atenúan y dejan de responder, para que se vea que no se pueden añadir más. */
.krea2-loras.is-cap-reached .krea2-lora-card:not(.is-selected) {
opacity: 0.4;
pointer-events: none;
}
/* Card excluida por su grupo (p.ej. la otra Realism ya está seleccionada): deshabilitada. */
.krea2-lora-card.is-excluded {
opacity: 0.4;
pointer-events: none;
}
.krea2-lora-card:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(201, 95, 46, 0.35);
}
.krea2-lora-card__head {
display: flex;
align-items: center;
flex-wrap: wrap; /* si el badge no cabe junto al nombre, baja a la línea de abajo */
gap: 4px 8px;
padding-right: 18px; /* hueco reservado para el icono ⓘ del corner (position:absolute) */
}
.krea2-lora-card__check {
width: 18px;
height: 18px;
flex: 0 0 18px;
border-radius: 6px;
border: 1px solid var(--border-medium);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s var(--ease);
}
.krea2-lora-card.is-selected .krea2-lora-card__check {
background: var(--accent);
border-color: var(--accent);
}
.krea2-lora-card.is-selected .krea2-lora-card__check::after {
content: '✓';
color: #fff;
font-size: 12px;
line-height: 1;
}
.krea2-lora-card__name {
font-size: 13px;
font-weight: 600;
line-height: 1.2;
flex: 0 1 auto;
min-width: 0;
}
/* El nombre ocupa toda la fila para que el badge caiga a la línea de abajo (no parte palabras). */
.krea2-lora-card__head .krea2-lora-card__name { flex-basis: calc(100% - 27px); }
/* Cabecera de sección (Easy / Advanced): ocupa toda la fila del grid de cards. */
.krea2-lora-group__title {
grid-column: 1 / -1;
margin: 6px 0 -2px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.krea2-lora-group__title:first-child { margin-top: 0; }
/* Badge "Advanced" junto al nombre (informativo; no revela el trigger word). */
.krea2-lora-card__badge {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 999px;
color: var(--accent);
background: rgba(201, 95, 46, 0.12);
border: 1px solid rgba(201, 95, 46, 0.35);
white-space: nowrap;
}
.krea2-lora-card.is-selected .krea2-lora-card__badge {
color: #fff;
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.3);
}
/* Etiqueta destacada "Recommended" (badge --tag): verde, para diferenciarla del "Advanced". */
.krea2-lora-card__badge--tag {
color: #3fb871;
background: rgba(63, 184, 113, 0.12);
border-color: rgba(63, 184, 113, 0.4);
}
.krea2-lora-card.is-selected .krea2-lora-card__badge--tag {
color: #fff;
background: rgba(63, 184, 113, 0.3);
border-color: rgba(63, 184, 113, 0.55);
}
.krea2-lora-card__strength {
display: none;
align-items: center;
gap: 8px;
margin-top: 11px;
}
.krea2-lora-card.is-selected .krea2-lora-card__strength { display: flex; }
.krea2-lora-card__strength-label {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
}
.krea2-lora-card__strength input[type="range"] {
flex: 1;
min-width: 0;
accent-color: var(--accent);
}
.krea2-lora-strength-val {
font-size: 11px;
color: var(--text-soft);
min-width: 32px;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Icono ⓘ de la card: "cuándo usar este estilo" (empujado a la derecha del head) */
.krea2-lora-card__info {
position: absolute;
top: 11px;
right: 12px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
cursor: help;
border-radius: 50%;
transition: color 0.2s var(--ease);
}
.krea2-lora-card__info:hover,
.krea2-lora-card__info:focus-visible { color: var(--text-soft); }
.krea2-lora-card__info:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(201, 95, 46, 0.35);
}
.krea2-lora-card.is-selected .krea2-lora-card__info { color: rgba(255, 255, 255, 0.6); }
.krea2-lora-card.is-selected .krea2-lora-card__info:hover { color: #fff; }
/* Tooltip compartido (fixed → no lo recorta el overflow del panel de controles) */
.krea2-lora-tip {
position: fixed;
z-index: 9999;
max-width: 220px;
padding: 8px 10px;
border-radius: 8px;
background: #1a1a1c;
border: 1px solid var(--border-medium);
color: var(--text-soft);
font-size: 12px;
line-height: 1.4;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
pointer-events: none;
opacity: 0;
transform: translateY(2px);
transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.krea2-lora-tip.is-visible { opacity: 1; transform: translateY(0); }
/* Prompt */
.prompt-wrap {
position: relative;
}
.prompt-input {
width: 100%;
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--border-medium);
border-radius: 12px;
padding: 14px 16px;
color: var(--text-primary);
font-family: inherit;
font-size: 13px;
line-height: 1.55;
resize: none;
min-height: 110px;
transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.prompt-input:focus {
outline: none;
border-color: rgba(201, 95, 46, 0.5);
background: rgba(255, 255, 255, 0.04);
}
.prompt-input::placeholder {
color: var(--text-faint);
font-style: italic;
}
.prompt-row {
display: flex;
justify-content: flex-end;
align-items: center;
}
/* Cabecera del prompt: etiqueta a la izquierda + botón Clear a la derecha. */
.prompt-head {
display: flex;
justify-content: space-between;
align-items: center;
}
.prompt-counter {
font-size: 10px;
color: var(--text-faint);
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 500;
transition: color 0.2s var(--ease);
}
/* Prompt por encima del límite: contador en rojo + borde del campo rojo. */
.prompt-counter.is-over {
color: #e0623a;
font-weight: 700;
}
.prompt-input.is-over,
.prompt-input.is-over:focus {
border-color: #c95f2e;
background: rgba(201, 95, 46, 0.06);
}
.prompt-reset {
background: none;
border: none;
cursor: pointer;
color: var(--text-faint);
font-family: inherit;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
padding: 2px 4px;
transition: color 0.2s var(--ease);
}
.prompt-reset:hover {
color: var(--text-primary);
}
.btn-pill-small {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--border-medium);
background: transparent;
color: var(--text-soft);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
padding: 7px 12px;
border-radius: 9999px;
cursor: pointer;
font-family: inherit;
transition: all 0.25s var(--ease);
}
.btn-pill-small__icon {
color: var(--accent);
font-size: 11px;
}
.btn-pill-small:hover {
background: rgba(201, 95, 46, 0.08);
color: #fff;
border-color: var(--accent);
}
/* Settings */
.settings-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.setting {
display: flex;
flex-direction: column;
gap: 6px;
}
.setting__label {
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-faint);
font-weight: 600;
}
/* ===== Custom dropdown (sustituye al select nativo) ===== */
.dropdown {
position: relative;
}
.dropdown__toggle {
width: 100%;
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--border-medium);
border-radius: 10px;
padding: 9px 12px;
color: var(--text-primary);
font-family: inherit;
font-size: 12px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.dropdown__toggle:hover {
background: rgba(255, 255, 255, 0.045);
border-color: rgba(255, 255, 255, 0.22);
}
.dropdown.is-open .dropdown__toggle {
border-color: rgba(201, 95, 46, 0.55);
background: rgba(255, 255, 255, 0.045);
}
.dropdown__value {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dropdown__arrow {
color: var(--accent);
flex-shrink: 0;
transition: transform 0.25s var(--ease);
}
.dropdown.is-open .dropdown__arrow { transform: rotate(180deg); }
.dropdown__menu {
position: fixed; /* fixed para que NO lo recorte el overflow del scroll */
list-style: none;
margin: 0;
padding: 6px;
background: rgba(8, 8, 10, 0.96);
border: 1px solid var(--border-medium);
border-radius: 10px;
z-index: 9000; /* MUY alto: por encima de cualquier botón */
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 255, 255, 0.03) inset;
backdrop-filter: blur(20px);
opacity: 0;
pointer-events: none;
/* Entrada sutil: además del fade, un pequeño slide-down + scale. transform-origin
arriba para que "caiga" desde el toggle. El posicionamiento lo hace positionMenu()
con top/left inline (sin transform), así que este transform no lo pisa. */
transform: translateY(-8px) scale(0.98);
transform-origin: top center;
transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
max-height: 260px;
overflow-y: auto;
}
.dropdown__menu.is-open {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.dropdown__menu::-webkit-scrollbar { width: 4px; }
.dropdown__menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 9999px; }
.dropdown__item {
padding: 9px 11px;
border-radius: 7px;
font-size: 12px;
color: rgba(255, 255, 255, 0.78);
cursor: pointer;
transition: all 0.18s var(--ease);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.dropdown__item:hover {
background: rgba(201, 95, 46, 0.12);
color: #fff;
}
.dropdown__item.is-active {
color: var(--accent);
background: rgba(201, 95, 46, 0.08);
}
.dropdown__item.is-active::after {
content: '✓';
font-size: 11px;
margin-left: 8px;
}
.dropdown__item.is-disabled {
color: rgba(255, 255, 255, 0.35);
cursor: default;
font-style: italic;
}
.dropdown__item.is-disabled:hover {
background: transparent;
color: rgba(255, 255, 255, 0.35);
}
/* Aspect-ratio option: iconito (rectángulo en proporción) + etiqueta */
.dropdown__item .ar-opt {
display: inline-flex;
align-items: center;
gap: 9px;
}
.dropdown__item .ar-ic {
flex-shrink: 0;
color: rgba(255, 255, 255, 0.42);
transition: color 0.18s var(--ease);
}
.dropdown__item:hover .ar-ic,
.dropdown__item.is-active .ar-ic {
color: currentColor;
}
/* Generate button */
/* Fila del botón Generate + botón de reset al lado */
.generate-actions {
display: flex;
gap: 10px;
align-items: stretch;
}
.generate-actions .generate-btn {
flex: 1;
width: auto;
}
.generate-reset {
flex: 0 0 auto;
width: 58px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 14px;
background: rgba(255, 255, 255, 0.06);
color: var(--text-soft);
cursor: pointer;
font-family: inherit;
font-size: 20px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.generate-reset:hover {
background: rgba(201, 95, 46, 0.18);
color: #fff;
border-color: var(--accent);
transform: translateY(-2px);
}
.generate-reset:active { transform: translateY(0); }
.generate-btn {
position: relative;
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 14px;
background: #fff;
color: #000;
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s var(--ease);
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.generate-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(201, 95, 46, 0.45) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.7s var(--ease);
}
.generate-btn:hover::before { transform: translateX(100%); }
.generate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(201, 95, 46, 0.30);
}
.generate-btn:active { transform: translateY(0); }
/* Deshabilitado (VA sin tasks, o SAIKAI no preparado): gris, sin hover, no clicable. */
.generate-btn:disabled,
.generate-btn.is-disabled {
background: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.45);
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
transform: none;
}
.generate-btn:disabled::before,
.generate-btn.is-disabled::before { display: none; }
/* Modo "Cancel" mientras una generación está en curso: rojo, clicable para interrumpir. */
.generate-btn--cancel {
background: #C9402E;
color: #fff;
}
.generate-btn--cancel:hover {
box-shadow: 0 16px 40px rgba(201, 46, 46, 0.35);
}
.generate-btn--cancel .generate-btn__sub { color: rgba(255, 255, 255, 0.75); }
.generate-btn__main {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
position: relative;
z-index: 1;
}
.generate-btn__text {
font-size: 13px;
letter-spacing: 0.05em;
}
.generate-btn__sub {
font-family: var(--font-body);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.14em;
color: rgba(0, 0, 0, 0.55);
text-transform: uppercase;
}
.generate-btn__shortcut {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
color: rgba(0, 0, 0, 0.55);
padding: 4px 9px;
background: rgba(0, 0, 0, 0.07);
border-radius: 6px;
position: relative;
z-index: 1;
}
/* ===== Canvas ===== */
.generate__canvas {
position: relative;
width: 100%;
height: 100%;
min-height: 0;
border-radius: 16px;
border: 1px solid var(--border-soft);
background:
radial-gradient(ellipse at top, rgba(201, 95, 46, 0.10), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.5));
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* (El estado vacío .canvas-empty se retiró: sin generación en curso se deja ver el muro
de fondo, en vez de taparlo con un placeholder. Con él se fueron sus reglas y la
animación floatY, que no usaba nada más.) */
/* Generated result */
.canvas-result {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
animation: resultIn 0.7s var(--ease);
}
@keyframes resultIn {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
.canvas-result__img {
flex: 1;
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}
.canvas-result__meta {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
display: flex;
justify-content: space-between;
align-items: center;
}
.canvas-result__label {
font-family: var(--font-display);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-soft);
}
.canvas-result__actions {
display: flex;
gap: 8px;
}
.result-action {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.2);
background: rgba(0,0,0,0.5);
color: var(--text-soft);
cursor: pointer;
font-family: inherit;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s var(--ease);
}
.result-action:hover {
background: rgba(201, 95, 46, 0.18);
color: #fff;
border-color: var(--accent);
}
/* Real generation result card (result-card + good/bad review) */
.result-card {
position: absolute;
inset: 0;
margin: 0;
display: flex;
flex-direction: column;
animation: resultIn 0.5s var(--ease) both;
}
/* Progreso de generación dentro del recuadro (sustituye al overlay a pantalla completa) */
.gen-progress {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 24px;
text-align: center;
animation: resultIn 0.4s var(--ease) both;
}
.gen-progress__label {
font-size: 13px;
letter-spacing: 0.04em;
color: var(--text-soft);
}
.gen-progress__bar {
width: min(320px, 70%);
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
overflow: hidden;
}
.gen-progress__fill {
height: 100%;
width: 0;
border-radius: 999px;
background: var(--accent);
transition: width 0.4s var(--ease);
}
.gen-progress__pct {
font-size: 12px;
font-variant-numeric: tabular-nums;
color: var(--text-soft);
}
.gen-progress--error .gen-progress__label {
color: #e0653b;
font-weight: 600;
}
.gen-progress__err {
max-width: 80%;
font-size: 12px;
color: var(--text-soft);
word-break: break-word;
}
/* Preview de la pasada 1 (LTX) mientras se renderiza el HD: vídeo + overlay con barra y
botones Continue/Cancel. */
.gen-preview {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: #000;
animation: resultIn 0.4s var(--ease) both;
}
.gen-preview__video {
width: 100%;
height: 100%;
object-fit: contain;
}
.gen-preview__overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
gap: 11px;
padding: 16px 18px 18px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 35%, rgba(0, 0, 0, 0));
}
.gen-preview__label {
font-size: 12px;
letter-spacing: 0.04em;
color: #fff;
}
/* Barra del preview: ancho completo, más alta y con buen contraste (no se pierde sobre el
vídeo). Sobrescribe el tamaño de .gen-progress__bar reutilizada en el markup. */
.gen-preview__overlay .gen-progress__bar {
width: 100%;
height: 8px;
background: rgba(255, 255, 255, 0.28);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.gen-preview__overlay .gen-progress__fill {
background: var(--accent);
box-shadow: 0 0 8px rgba(201, 95, 46, 0.6);
}
.gen-preview__actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.gen-preview__btn {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 7px 18px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.1);
color: #fff;
cursor: pointer;
transition: all 0.2s var(--ease);
}
.gen-preview__btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.gen-preview__btn--cancel {
border-color: rgba(224, 101, 59, 0.6);
color: #ffd9c9;
}
.gen-preview__btn--cancel:hover {
background: rgba(224, 101, 59, 0.25);
}
.gen-preview__btn:disabled {
opacity: 0.6;
cursor: default;
}
.result-card img,
.result-card video {
flex: 1;
width: 100%;
height: 100%;
min-height: 0; /* permite que el media encoja dentro del flex (si no, desborda) */
object-fit: contain;
background: #000;
cursor: pointer;
}
/* Botón de reset sobre el resultado: limpia la generación mostrada de este engine */
.result-clear {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.2);
background: rgba(0,0,0,0.55);
color: var(--text-soft);
cursor: pointer;
font-family: inherit;
font-size: 14px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.result-card:hover .result-clear,
.result-clear:focus-visible {
opacity: 1;
}
.result-clear:hover {
background: rgba(201, 95, 46, 0.18);
color: #fff;
border-color: var(--accent);
}
.result-rate {
display: flex;
gap: 10px;
padding: 12px 16px;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
justify-content: flex-end;
}
.rate-btn {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 16px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
color: var(--text-soft);
cursor: pointer;
transition: all 0.2s var(--ease);
}
.rate-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
border-color: rgba(255, 255, 255, 0.35);
}
.rate-btn.is-active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
/* ===== Placeholder pages ===== */
.placeholder-page {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
padding: 60px 80px;
border: 1px dashed var(--border-medium);
border-radius: 20px;
flex: 1;
min-height: 0;
max-width: 720px;
margin: 0 auto;
background:
radial-gradient(ellipse at top right, rgba(201, 95, 46, 0.06), transparent 60%),
rgba(255,255,255,0.012);
}
.placeholder-page__eyebrow {
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
margin-bottom: 20px;
}
.placeholder-page__title {
font-family: var(--font-serif);
font-size: 64px;
font-weight: 400;
line-height: 1;
margin-bottom: 22px;
color: #fff;
}
.placeholder-page__title em { color: var(--accent); }
.placeholder-page p {
color: rgba(255,255,255,0.85);
max-width: 480px;
font-size: 14px;
line-height: 1.65;
margin-bottom: 24px;
}
.placeholder-page__features {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.placeholder-page__feature {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
padding: 6px 12px;
border: 1px solid var(--border-medium);
border-radius: 9999px;
color: var(--text-muted);
}
.placeholder-page__cta {
display: inline-block;
margin-top: 8px;
font-size: 13px;
letter-spacing: 0.04em;
color: var(--accent);
border-bottom: 1px solid var(--accent);
padding-bottom: 2px;
transition: opacity 0.25s var(--ease);
cursor: pointer;
}
.placeholder-page__cta:hover { opacity: 0.75; }
/* ===== Settings page ===== */
.settings-page {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
max-width: 920px;
overflow-y: auto;
align-content: start;
padding-right: 8px;
}
.settings-page::-webkit-scrollbar { width: 4px; }
.settings-page::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 9999px; }
.settings-card {
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 16px;
background: rgba(14, 14, 16, 0.88); /* Casi sólido — tapa el parallax */
backdrop-filter: blur(12px);
overflow: hidden;
transition: all 0.25s var(--ease);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.settings-card:hover {
border-color: rgba(255, 255, 255, 0.18);
background: rgba(18, 18, 20, 0.92);
transform: translateY(-1px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.settings-card--danger {
border-color: rgba(232, 90, 90, 0.25);
}
.settings-card__head {
padding: 20px 22px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* Tarjeta a todo el ancho de la grid (Organization) */
.settings-card--full { grid-column: 1 / -1; }
/* Subsección dentro de una settings-card (p.ej. Members dentro de Organization) */
.settings-subsection { display: flex; flex-direction: column; gap: 12px; }
.settings-subhead {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.settings-subhead__label {
display: block;
font-size: 13px;
font-weight: 600;
color: #fff;
}
.settings-subhead__desc {
display: block;
font-size: 12px;
color: rgba(255, 255, 255, 0.45);
margin-top: 2px;
}
.settings-subhead__desc span { color: #b9935a; }
.settings-subhead .model-create__btn { flex: none; }
.settings-card__eyebrow {
display: block;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
font-weight: 700;
margin-bottom: 6px;
}
.settings-card__title {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 400;
line-height: 1;
color: #fff;
}
.settings-card__title em { color: var(--accent); }
.settings-card__body {
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
gap: 14px;
}
.settings-row-item {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 14px;
align-items: center;
}
.settings-row-item__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: #0a0a0a;
border: 1px solid rgba(201, 95, 46, 0.4);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 800;
font-size: 16px;
color: var(--accent);
}
.settings-row-item__info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.settings-row-item__name {
font-size: 14px;
font-weight: 600;
color: #fff;
}
.settings-row-item__email {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
}
.settings-stat {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
}
.settings-stat__label {
font-size: 12px;
color: rgba(255, 255, 255, 0.75);
font-weight: 500;
}
.settings-stat__value {
font-size: 13px;
color: #fff;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
}
.settings-stat__pill {
font-size: 9px;
letter-spacing: 0.18em;
font-weight: 700;
padding: 3px 7px;
background: rgba(201, 95, 46, 0.15);
color: var(--accent);
border-radius: 4px;
}
.settings-key-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
}
.settings-key-row__name {
font-size: 13px;
color: rgba(255, 255, 255, 0.92);
font-weight: 500;
}
.settings-key-row__status {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
padding: 5px 10px;
border-radius: 4px;
}
.settings-key-row__status--off {
background: rgba(255,255,255,0.08);
color: rgba(255, 255, 255, 0.7);
}
.settings-key-row__status--on {
background: rgba(118, 211, 154, 0.18);
color: #76d39a;
}
.ghost-btn {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
padding: 8px 16px;
border-radius: 9999px;
font-family: inherit;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
cursor: pointer;
transition: all 0.25s var(--ease);
}
.ghost-btn:hover {
background: rgba(201, 95, 46, 0.15);
color: #fff;
border-color: var(--accent);
}
.ghost-btn--danger {
border-color: rgba(232, 90, 90, 0.4);
color: #e85a5a;
}
.ghost-btn--danger:hover {
background: rgba(232, 90, 90, 0.08);
color: #e85a5a;
border-color: #e85a5a;
}
/* ===== Loading overlay ===== */
.loading-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(0, 0, 0, 0.82);
backdrop-filter: blur(28px);
display: none;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s var(--ease);
}
.loading-overlay.is-visible {
display: flex;
opacity: 1;
}
.loading-overlay__card {
width: 100%;
max-width: 440px;
padding: 44px 36px;
border: 1px solid var(--border-medium);
border-radius: 20px;
background: rgba(10, 10, 12, 0.88);
text-align: center;
position: relative;
}
.loading-overlay__eyebrow {
display: block;
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
margin-bottom: 22px;
}
.loading-spinner {
display: flex;
justify-content: center;
margin-bottom: 24px;
}
.loading-overlay__title {
font-family: var(--font-serif);
font-size: 30px;
line-height: 1.1;
margin-bottom: 8px;
color: #fff;
}
.loading-overlay__title em { color: var(--accent); }
.loading-overlay__sub {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 26px;
font-weight: 500;
}
.loading-bar {
width: 100%;
height: 3px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
margin-bottom: 14px;
}
.loading-bar__fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #fff, var(--accent));
border-radius: 9999px;
transition: width 0.4s var(--ease);
}
.loading-overlay__timer {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
font-weight: 600;
}
/* ===== Responsive ===== */
@media (max-width: 1100px) {
.generate { grid-template-columns: 340px minmax(0, 1fr); gap: 22px; }
.settings-page { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.studio-body {
grid-template-columns: 1fr;
height: auto;
overflow: auto;
}
.studio-main { height: auto; overflow: visible; padding: 0 20px 24px; }
.sidebar {
height: auto;
flex-direction: column;
padding: 14px 16px;
}
.sidebar__nav { flex-direction: column; }
.sidebar__footer { display: none; }
.topbar { flex-direction: column; align-items: flex-start; gap: 14px; }
.topbar__title { font-size: 30px; }
.page { flex: none; }
.generate {
grid-template-columns: 1fr;
flex: none;
}
.generate__controls { overflow: visible; padding-right: 0; }
.generate__canvas {
height: auto;
aspect-ratio: 4/5;
max-width: 600px;
margin: 0 auto;
width: 100%;
}
.settings-row { grid-template-columns: 1fr 1fr; }
.placeholder-page { padding: 40px 28px; }
.placeholder-page__title { font-size: 44px; }
}
/* ====================================================
AUTO SCRIPT — Template selector + bulk generation
==================================================== */
.autoscript {
flex: 1;
min-height: 0;
overflow-y: auto;
padding-right: 8px;
}
.autoscript::-webkit-scrollbar { width: 4px; }
.autoscript::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 9999px; }
.autoscript__intro {
color: rgba(255, 255, 255, 0.7);
font-size: 13px;
max-width: 620px;
margin-bottom: 28px;
line-height: 1.6;
}
/* Grid de templates */
.template-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 22px;
padding-bottom: 24px;
max-width: 880px; /* Tope para que con 2 templates no se estiren tanto */
}
.template-card {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 14px;
background: rgba(14, 14, 16, 0.85);
backdrop-filter: blur(10px);
color: var(--text-soft);
cursor: pointer;
transition: all 0.3s var(--ease);
text-align: left;
font-family: inherit;
overflow: hidden;
}
.template-card:hover {
border-color: var(--accent);
background: rgba(20, 20, 22, 0.92);
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(201, 95, 46, 0.2);
}
.template-card__cover {
position: relative;
width: 100%;
aspect-ratio: 16/10;
overflow: hidden;
background: #050505;
}
.template-card__cover img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) brightness(0.85);
transition: filter 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.template-card:hover .template-card__cover img {
filter: grayscale(0%) brightness(1);
transform: scale(1.04);
}
.template-card__count {
position: absolute;
top: 12px; right: 12px;
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 700;
padding: 5px 9px;
background: rgba(0, 0, 0, 0.7);
color: var(--accent);
border-radius: 4px;
backdrop-filter: blur(4px);
}
.template-card__body {
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
}
.template-card__index {
position: absolute;
top: 14px; right: 18px;
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: rgba(255, 255, 255, 0.35);
}
.template-card__name {
font-family: var(--font-serif);
font-weight: 400;
font-size: 24px;
line-height: 1.05;
letter-spacing: -0.01em;
color: #fff;
margin-bottom: 4px;
}
.template-card__name em {
color: var(--accent);
font-style: italic;
}
.template-card__desc {
font-size: 12px;
color: rgba(255, 255, 255, 0.75);
line-height: 1.55;
margin-bottom: 10px;
}
.template-card__meta {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
font-weight: 600;
}
/* Resultado: grid de 8 frames */
.autoscript__result.is-hidden { display: none; }
.autoscript__templates.is-hidden { display: none; }
.autoscript__result-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
gap: 16px;
flex-wrap: wrap;
}
.autoscript__result-eyebrow {
display: block;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
margin-bottom: 6px;
}
.autoscript__result-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: 36px;
line-height: 1;
color: #fff;
}
.autoscript__result-title em {
color: var(--accent);
font-style: italic;
}
.autoscript__result-meta {
display: flex;
align-items: center;
gap: 14px;
}
.autoscript__result-progress {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
padding: 6px 10px;
background: rgba(201, 95, 46, 0.12);
border-radius: 4px;
}
.autoscript__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
padding-bottom: 24px;
}
@media (max-width: 1200px) {
.autoscript__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
.autoscript__grid { grid-template-columns: repeat(2, 1fr); }
}
.autoscript-frame {
position: relative;
aspect-ratio: 4/5;
border-radius: 10px;
overflow: hidden;
background: #050505;
border: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(14px) scale(0.96);
transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.autoscript-frame.is-loaded {
opacity: 1;
transform: translateY(0) scale(1);
}
.autoscript-frame__img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%);
transition: filter 0.55s ease-in-out, transform 0.55s ease-in-out;
}
.autoscript-frame:hover .autoscript-frame__img {
filter: grayscale(0%);
transform: scale(1.05);
}
.autoscript-frame__skeleton {
width: 24px;
height: 24px;
border: 2px solid rgba(255, 255, 255, 0.06);
border-top-color: var(--accent);
border-radius: 50%;
animation: skeletonSpin 1s linear infinite;
}
@keyframes skeletonSpin {
to { transform: rotate(360deg); }
}
.autoscript-frame__index {
position: absolute;
top: 10px; left: 10px;
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--accent);
background: rgba(0, 0, 0, 0.6);
padding: 3px 8px;
border-radius: 4px;
z-index: 2;
backdrop-filter: blur(4px);
}
.autoscript-frame.is-pending .autoscript-frame__index { color: rgba(255,255,255,0.4); }
/* ====================================================
GENERATE RESULT — Batch grid + Metadata panel técnico
==================================================== */
/* Layout del batch (1x1, 1x2 o 2x2 según batch size) */
.canvas-batch {
position: absolute;
inset: 0;
display: grid;
gap: 3px;
z-index: 0;
}
.canvas-result.is-single .canvas-batch { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.canvas-result.is-pair .canvas-batch { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.canvas-result.is-quad .canvas-batch { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.canvas-batch-item {
position: relative;
overflow: hidden;
background: #000;
}
.canvas-batch-item .canvas-result__img {
width: 100%;
height: 100%;
object-fit: contain; /* Muestra la imagen ENTERA, sin recortes */
background: #000; /* Fondo negro para los lados/bandas (look pro) */
display: block;
}
.canvas-batch-item__seed {
position: absolute;
top: 8px; left: 8px;
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
background: rgba(0,0,0,0.55);
padding: 3px 7px;
border-radius: 3px;
font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
backdrop-filter: blur(4px);
z-index: 2;
}
/* Panel de metadata técnica (toggle con botón i, o aparece al hover) */
.canvas-result__info {
position: absolute;
left: 14px; right: 14px;
bottom: 76px; /* Justo encima del .canvas-result__meta */
padding: 14px 16px;
border-radius: 10px;
background: rgba(8, 8, 10, 0.94);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: column;
gap: 8px;
font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
font-feature-settings: 'tnum'; /* Tabular numbers para alineación técnica */
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
z-index: 3;
max-height: 0;
overflow: hidden;
}
.canvas-result__info.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
max-height: 200px;
}
.info-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: baseline;
font-size: 10.5px;
line-height: 1.4;
}
.info-row--prompt {
border-bottom: 1px solid rgba(255,255,255,0.06);
padding-bottom: 8px;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.info-row--prompt .info-value {
font-family: var(--font-body);
font-style: italic;
color: rgba(255, 255, 255, 0.85);
font-size: 11.5px;
line-height: 1.45;
}
.info-item {
display: inline-flex;
gap: 5px;
align-items: baseline;
white-space: nowrap;
}
.info-label {
color: rgba(255,255,255,0.42);
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 600;
font-size: 9px;
}
.info-value {
color: var(--accent);
font-weight: 600;
font-size: 10.5px;
}
/* Botón Info (i) — destacado naranja cuando está activo */
.result-action[title="Toggle info"] {
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
line-height: 1;
}
/* ====================================================
GALLERY SAVED — Imágenes y videos generados
==================================================== */
.gallery-saved {
flex: 1;
min-height: 0;
overflow-y: auto;
padding-right: 8px;
}
.gallery-saved::-webkit-scrollbar { width: 4px; }
.gallery-saved::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 9999px; }
.gallery-saved__head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-wrap: wrap;
gap: 14px;
}
.gallery-saved__count {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
font-weight: 600;
}
.gallery-saved__filters {
display: flex;
gap: 6px;
background: rgba(255, 255, 255, 0.04);
border-radius: 9999px;
padding: 4px;
}
.filter-pill {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.65);
font-family: inherit;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 7px 14px;
border-radius: 9999px;
cursor: pointer;
transition: all 0.25s var(--ease);
}
.filter-pill:hover {
color: #fff;
background: rgba(255, 255, 255, 0.05);
}
.filter-pill.is-active {
background: var(--accent);
color: #fff;
}
.gallery-saved__sections {
display: flex;
flex-direction: column;
gap: 32px;
padding-bottom: 24px;
}
.gallery-saved__section.is-hidden { display: none; }
/* El JS oculta el bloque flat de Uploads con `hidden` en las vistas de carpeta
(root/Tasks/History); el `display:flex` de arriba pisaba el atributo (misma
especificidad, declarado después). Esta regla [hidden] tiene mayor especificidad
y hace que `hidden` realmente oculte head/sections fuera de la carpeta Uploads. */
.gallery-saved__head[hidden],
.gallery-saved__sections[hidden] { display: none; }
.gallery-saved__section-eyebrow {
display: block;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
font-weight: 700;
margin-bottom: 14px;
}
.gallery-saved__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.saved-item {
position: relative;
aspect-ratio: 4/5;
border-radius: 10px;
overflow: hidden;
background: #050505;
border: 1px solid rgba(255, 255, 255, 0.05);
cursor: pointer;
transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.saved-item:hover {
transform: translateY(-3px);
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
border-color: rgba(201, 95, 46, 0.35);
}
.saved-item__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* Galería a color (sin blanco y negro). Se mantiene el zoom suave al hover. */
filter: contrast(1.03);
transition: filter 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.saved-item:hover .saved-item__img {
filter: contrast(1.05);
transform: scale(1.06);
}
.saved-item__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.92) 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 12px;
pointer-events: none;
z-index: 2;
}
.saved-item__meta-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.saved-item__engine {
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: #fff;
text-shadow: 0 1px 6px rgba(0,0,0,0.95);
}
.saved-item__engine--accent { color: var(--accent); }
.saved-item__date {
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
font-weight: 600;
}
.saved-item__seed {
font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
font-size: 9px;
color: rgba(255, 255, 255, 0.55);
margin-top: 2px;
}
.saved-item__badge {
position: absolute;
top: 10px; right: 10px;
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.7);
color: var(--accent);
border-radius: 4px;
backdrop-filter: blur(4px);
z-index: 3;
display: flex;
align-items: center;
gap: 4px;
}
.saved-item__badge::before {
content: '▶';
font-size: 8px;
}
/* ============ Gallery uploads (preview) ============ */
#gallery-saved { position: relative; }
/* Cabecera de la sección Images: eyebrow + acciones (Add / Clear) */
.gallery-saved__section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.gallery-saved__section-head .gallery-saved__section-eyebrow { margin-bottom: 0; }
.gallery-uploads__actions { display: flex; gap: 8px; }
/* Botón × para quitar una foto subida (mismo lenguaje que .ref-slot__remove) */
.saved-item__remove {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.15);
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
font-size: 15px;
line-height: 1;
padding: 0;
font-family: inherit;
z-index: 3;
transition: all 0.2s var(--ease);
}
.saved-item__remove:hover { background: var(--accent); border-color: var(--accent); }
.saved-item:hover .saved-item__remove { display: flex; }
/* Overlay de drag & drop sobre la página Gallery */
.gallery-dropzone {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(10, 8, 6, 0.78);
backdrop-filter: blur(3px);
border: 2px dashed var(--accent);
border-radius: 16px;
z-index: 20;
pointer-events: none;
}
.gallery-dropzone.is-active { display: flex; }
.gallery-dropzone__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: #fff;
}
.gallery-dropzone__icon {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid var(--accent);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
line-height: 1;
}
.gallery-dropzone__label {
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
}
/* Popup "Add to gallery" (con zona de arrastrar/soltar) */
.add-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
}
.add-modal.is-open { display: flex; }
.add-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(8, 6, 5, 0.6);
backdrop-filter: blur(4px);
}
.add-modal__card {
position: relative;
width: min(440px, 92vw);
display: flex;
flex-direction: column;
gap: 18px;
padding: 22px 22px 24px;
background: #14110f;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.add-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
}
.add-modal__title {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
color: #fff;
}
.add-modal__close {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: transparent;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.add-modal__close:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.24);
background: rgba(255, 255, 255, 0.05);
}
/* LTX gallery picker: rejilla de imágenes seleccionables */
.add-modal__card--wide { width: min(720px, 94vw); }
.ltxgal-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 10px;
max-height: 60vh;
overflow-y: auto;
padding-right: 4px;
}
.ltxgal-item {
position: relative;
aspect-ratio: 1 / 1;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
overflow: hidden;
padding: 0;
cursor: pointer;
background: rgba(255, 255, 255, 0.03);
transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.ltxgal-item:hover { border-color: rgba(201, 95, 46, 0.8); transform: translateY(-2px); }
.ltxgal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ltxgal-empty {
grid-column: 1 / -1;
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
padding: 28px 0;
}
.add-modal__drop {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
padding: 38px 20px;
border: 2px dashed rgba(255, 255, 255, 0.18);
border-radius: 14px;
background: rgba(255, 255, 255, 0.02);
color: #fff;
cursor: pointer;
transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.add-modal__drop:hover,
.add-modal__drop.is-over {
border-color: var(--accent);
background: rgba(255, 255, 255, 0.04);
}
.add-modal__icon {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid var(--accent);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
line-height: 1;
}
.add-modal__label {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
}
.add-modal__hint {
font-size: 11px;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.5);
}
/* Popup de progreso de subida */
.upload-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
}
.upload-modal.is-open { display: flex; }
.upload-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(8, 6, 5, 0.6);
backdrop-filter: blur(4px);
}
.upload-modal__card {
position: relative;
width: min(380px, 90vw);
display: flex;
flex-direction: column;
gap: 14px;
padding: 26px 26px 24px;
background: #14110f;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.upload-modal__title {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: #fff;
}
.upload-modal__bar {
width: 100%;
height: 6px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.1);
overflow: hidden;
}
.upload-modal__fill {
height: 100%;
width: 0;
border-radius: 9999px;
background: var(--accent);
transition: width 0.25s var(--ease);
}
.upload-modal__count {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
font-weight: 600;
}
/* ============ Diálogo de confirmación genérico ============ */
.confirm-modal {
position: fixed;
inset: 0;
z-index: 1100;
display: none;
align-items: center;
justify-content: center;
}
.confirm-modal.is-open { display: flex; }
.confirm-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(8, 6, 5, 0.6);
backdrop-filter: blur(4px);
}
.confirm-modal__card {
position: relative;
width: min(400px, 92vw);
display: flex;
flex-direction: column;
gap: 12px;
padding: 26px;
background: #14110f;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
/* Entrada del diálogo: el fondo funde y la tarjeta sube un pelín con un pop corto. Son
animaciones (no transiciones) porque el modal se muestra con display:none -> flex, y una
transición no arranca en ese salto. `both` deja el estado final fijado al terminar.
La clase .is-open se pone en cada apertura, así que la animación se repite cada vez. */
@keyframes confirm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirm-pop {
from { opacity: 0; transform: translateY(10px) scale(.96); }
to { opacity: 1; transform: none; }
}
.confirm-modal.is-open .confirm-modal__backdrop { animation: confirm-fade .18s ease-out both; }
.confirm-modal.is-open .confirm-modal__card {
animation: confirm-pop .22s cubic-bezier(.2, .8, .25, 1) both;
}
@media (prefers-reduced-motion: reduce) {
.confirm-modal.is-open .confirm-modal__backdrop,
.confirm-modal.is-open .confirm-modal__card { animation-duration: .01ms; }
}
.confirm-modal__title { font-size: 15px; font-weight: 600; color: #fff; }
.confirm-modal__message { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.confirm-modal__actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 6px;
}
.confirm-modal__btn {
font-family: inherit;
font-size: 12px;
font-weight: 600;
padding: 9px 18px;
border-radius: 9px;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.2s var(--ease);
}
.confirm-modal__btn--cancel {
background: transparent;
border-color: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.75);
}
.confirm-modal__btn--cancel:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.confirm-modal__btn--ok { background: var(--accent); color: #fff; }
.confirm-modal__btn--ok:hover { filter: brightness(1.08); }
.confirm-modal__btn--danger { background: #c0392b; }
.confirm-modal__btn--danger:hover { background: #d2412f; }
@media (max-width: 800px) {
.gallery-saved__grid { grid-template-columns: repeat(2, 1fr); }
}
/* ====================================================
LIGHTBOX — Visor grande de items de la galería
==================================================== */
.lightbox {
position: fixed;
inset: 0;
z-index: 8000;
display: none;
align-items: center;
justify-content: center;
padding: 32px;
opacity: 0;
transition: opacity 0.3s var(--ease);
}
.lightbox.is-open {
display: flex;
opacity: 1;
}
.lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.92);
backdrop-filter: blur(28px);
cursor: pointer;
}
.lightbox__close,
.lightbox__nav,
.lightbox__download {
position: absolute;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #fff;
cursor: pointer;
z-index: 2;
transition: all 0.25s var(--ease);
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}
.lightbox__close {
top: 24px;
right: 24px;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 22px;
font-weight: 300;
line-height: 1;
}
.lightbox__download {
top: 24px;
right: 80px; /* a la izquierda de la × */
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 20px;
line-height: 1;
}
.lightbox__close:hover,
.lightbox__download:hover {
background: var(--accent);
border-color: var(--accent);
}
.lightbox__nav {
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
border-radius: 50%;
font-size: 32px;
font-weight: 200;
line-height: 1;
padding-bottom: 4px; /* visual centering del chevron */
}
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
.lightbox__nav:hover {
background: var(--accent);
border-color: var(--accent);
transform: translateY(-50%) scale(1.05);
}
.lightbox__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
max-width: 100%;
max-height: 100%;
animation: lightboxIn 0.4s var(--ease);
}
@keyframes lightboxIn {
from { opacity: 0; transform: scale(0.95) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.lightbox__media {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
max-height: calc(100vh - 200px);
}
.lightbox__media img,
.lightbox__media video {
display: block;
max-width: 80vw;
max-height: calc(100vh - 200px);
border-radius: 8px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
background: #000;
}
/* Modo POPUP (clic en una foto del muro de Generate): visor tipo tarjeta grande, no a pantalla
completa. Fondo menos opaco (se intuye el studio detrás) y la imagen acotada más pequeña. */
.lightbox--popup .lightbox__backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(8px); }
.lightbox--popup .lightbox__media img,
.lightbox--popup .lightbox__media video {
max-width: min(560px, 82vw);
max-height: min(72vh, 720px);
border-radius: 14px;
box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
/* Con el prompt colapsado (una línea) apenas roba altura: solo un pelín menos que
sin prompt, para que la imagen siga grande en portátil. */
.lightbox.has-prompt .lightbox__media,
.lightbox.has-prompt .lightbox__media img,
.lightbox.has-prompt .lightbox__media video {
max-height: calc(100vh - 280px);
}
/* Al expandir el prompt (Show more), la columna crece: encoge la imagen para que
el panel + la barra de metadatos (Mode/User/Date) quepan sin recortarse. */
.lightbox.prompt-open .lightbox__media,
.lightbox.prompt-open .lightbox__media img,
.lightbox.prompt-open .lightbox__media video {
max-height: calc(100vh - 400px);
}
.lightbox__meta {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
max-width: min(760px, 92vw);
}
.lightbox__metabar {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
padding: 12px 22px;
background: rgba(14, 14, 16, 0.92);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 9999px;
backdrop-filter: blur(16px);
font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
font-size: 11px;
font-feature-settings: 'tnum';
}
/* Panel del prompt (detalle de generación en la galería). */
.lightbox__prompt {
width: 100%;
padding: 12px 18px;
background: rgba(14, 14, 16, 0.92);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
backdrop-filter: blur(16px);
}
/* Expandido: prompt completo, multi-línea con scroll si se pasa. */
.lightbox__prompt:not(.is-collapsed) {
max-height: 16vh;
overflow-y: auto;
}
.lightbox__prompt::-webkit-scrollbar { width: 4px; }
.lightbox__prompt::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 9999px; }
/* Colapsado: label + prompt (una línea con ellipsis) + toggle, todo en una fila. */
.lightbox__prompt.is-collapsed {
display: flex;
align-items: baseline;
gap: 10px;
}
.lightbox__prompt-label {
display: block;
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 600;
font-size: 9px;
margin-bottom: 6px;
}
.lightbox__prompt.is-collapsed .lightbox__prompt-label {
flex: none;
margin-bottom: 0;
}
.lightbox__prompt-text {
margin: 0;
color: rgba(255, 255, 255, 0.92);
font-size: 12px;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
.lightbox__prompt.is-collapsed .lightbox__prompt-text {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lightbox__prompt-toggle {
margin-top: 8px;
background: none;
border: none;
padding: 0;
color: var(--accent);
font-family: inherit;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
cursor: pointer;
}
.lightbox__prompt-toggle:hover { text-decoration: underline; }
.lightbox__prompt.is-collapsed .lightbox__prompt-toggle {
flex: none;
margin-top: 0;
white-space: nowrap;
}
.lightbox__meta-item {
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.lightbox__meta-label {
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 600;
font-size: 9px;
}
.lightbox__meta-value {
color: var(--accent);
font-weight: 600;
}
.lightbox__meta-engine {
font-family: var(--font-serif);
font-style: italic;
color: #fff;
font-size: 16px;
}
/* Botones Good/Bad dentro del popup (solo Generate). */
.lightbox__rate {
display: inline-flex;
gap: 8px;
padding-left: 6px;
border-left: 1px solid rgba(255, 255, 255, 0.12);
margin-left: 2px;
}
/* Modo imagen única (p.ej. el resultado de Generate): sin navegación. */
.lightbox.is-single .lightbox__nav { display: none; }
/* Transición al pasar de foto: el media nuevo entra deslizándose según dirección. */
@keyframes lbEnterNext {
from { opacity: 0; transform: translateX(48px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes lbEnterPrev {
from { opacity: 0; transform: translateX(-48px); }
to { opacity: 1; transform: translateX(0); }
}
.lightbox__media > .lb-enter-next { animation: lbEnterNext 0.34s var(--ease) both; }
.lightbox__media > .lb-enter-prev { animation: lbEnterPrev 0.34s var(--ease) both; }
@media (max-width: 700px) {
.lightbox { padding: 16px; }
.lightbox__nav { width: 40px; height: 40px; font-size: 24px; }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }
.lightbox__close { top: 16px; right: 16px; width: 36px; height: 36px; font-size: 18px; }
.lightbox__download { top: 16px; right: 60px; width: 36px; height: 36px; font-size: 17px; }
.lightbox__media img, .lightbox__media video { max-width: 92vw; max-height: calc(100vh - 160px); }
.lightbox__metabar { font-size: 10px; gap: 14px; padding: 10px 16px; }
}
/* ====================================================
ENGINE EXTRAS — Reference slots, LoRA dropdowns, image2video
==================================================== */
.engine-extras-group { gap: 0; }
.engine-extras { position: relative; }
.engine-panel { display: none; }
.engine-panel.is-active { display: block; }
/* Entrada suave al revelar un panel de engine (cambio de engine) o al mostrar
el grupo de cards de otra pestaña (Standard/Advanced). Mismo enfoque que
.page.is-entering: el estado final del keyframe = estado natural del elemento,
así que si la animación se interrumpe queda igualmente visible y colocado.
studio.js redispara la clase con reflow y la limpia al terminar. */
@keyframes engine-swap-enter {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.engine-panel.is-entering,
.engine-tab-panel.is-entering,
.mode-content.is-entering,
.models-tabpanel.is-entering,
.member-tabpane.is-entering {
animation: engine-swap-enter 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: opacity, transform;
}
/* Entrada de una tarjeta/fila recién creada en su lista (p.ej. al crear un
modelo o una LoRA): un fade + slide-up algo más marcado que el swap de panel
para que se note el "aparece" sin dar un salto brusco. Se dispara por elemento
con window.replayEnter y se limpia sola al terminar. */
@keyframes list-item-enter {
from { opacity: 0; transform: translateY(10px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.model-card.is-entering,
.lora-row.is-entering {
animation: list-item-enter 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: opacity, transform;
}
/* Tabs Reference / Identity */
.mode-tabs {
display: flex;
gap: 2px;
padding: 3px;
background: rgba(255, 255, 255, 0.05);
border-radius: 9999px;
margin-bottom: 14px;
}
.mode-tab {
flex: 1;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.65);
padding: 8px 14px;
border-radius: 9999px;
font-family: inherit;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.25s var(--ease);
}
.mode-tab:hover { color: #fff; }
.mode-tab.is-active {
background: var(--accent);
color: #fff;
}
.mode-content { display: none; }
.mode-content.is-active { display: block; }
.mode-content__hint {
display: block;
font-size: 11px;
color: rgba(255, 255, 255, 0.55);
font-style: italic;
margin-bottom: 10px;
line-height: 1.5;
}
/* Refs grid (Vision) */
.refs-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
/* Slot individual */
.ref-slot {
position: relative;
aspect-ratio: 1;
border: 1.5px dashed rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.02);
border-radius: 10px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
font-family: inherit;
overflow: hidden;
transition: all 0.25s var(--ease);
padding: 0;
}
.ref-slot:hover {
border-color: var(--accent);
background: rgba(201, 95, 46, 0.08);
}
.ref-slot:hover .ref-slot__plus { color: var(--accent); }
.ref-slot__index {
position: absolute;
top: 6px;
left: 8px;
font-family: var(--font-serif);
font-style: italic;
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
pointer-events: none;
}
.ref-slot__plus {
font-size: 22px;
font-weight: 200;
color: rgba(255, 255, 255, 0.5);
line-height: 1;
transition: color 0.25s var(--ease);
}
.ref-slot__label {
font-size: 11px;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.55);
font-weight: 500;
margin-top: 2px;
}
/* Estado: imagen cargada */
.ref-slot.has-image {
border-style: solid;
border-color: var(--accent);
background: #000;
}
.ref-slot.has-image .ref-slot__plus,
.ref-slot.has-image .ref-slot__index,
.ref-slot.has-image .ref-slot__label { display: none; }
.ref-slot__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ref-slot__remove {
position: absolute;
top: 5px;
right: 5px;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.15);
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
padding: 0;
font-family: inherit;
z-index: 2;
transition: all 0.2s var(--ease);
}
.ref-slot__remove:hover {
background: var(--accent);
border-color: var(--accent);
}
.ref-slot.has-image .ref-slot__remove { display: flex; }
/* Slot único (Motion) */
.ref-slot--single {
aspect-ratio: 16 / 9;
width: 100%;
}
.ref-slot--single .ref-slot__plus { font-size: 28px; }
/* Required marker */
.required {
color: var(--accent);
font-weight: 700;
margin-left: 4px;
}
/* ============ Auth gate ============ */
.auth-gate {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center;
background: rgba(8, 8, 10, 0.92); backdrop-filter: blur(8px);
}
.auth-gate.is-hidden { display: none; }
.auth-card {
width: min(380px, 92vw); padding: 36px 32px;
background: #121215; border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.auth-card__brand { font-weight: 700; letter-spacing: 0.04em; margin-bottom: 18px; color: #fff; }
.auth-card__brand span { color: #b9935a; }
.auth-card__title { font-size: 22px; margin: 0 0 4px; color: #fff; }
.auth-card__sub { font-size: 13px; color: rgba(255,255,255,0.55); margin: 0 0 22px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field[hidden] { display: none; }
.auth-field span { font-size: 12px; color: rgba(255,255,255,0.6); }
.auth-field input {
background: #1c1c20; border: 1px solid rgba(255,255,255,0.1); color: #fff;
border-radius: 9px; padding: 11px 12px; font-size: 14px; outline: none;
}
.auth-field input:focus { border-color: #b9935a; }
.auth-remember {
display: flex; align-items: center; gap: 10px; cursor: pointer;
font-size: 13px; color: rgba(255,255,255,0.6); user-select: none;
width: fit-content;
}
/* Hide the native box; we render a custom one. */
.auth-remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.auth-remember__box {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; flex: 0 0 auto;
border: 1px solid rgba(255,255,255,0.18); border-radius: 6px;
background: #1c1c20; color: #16110a;
transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.auth-remember__box svg {
width: 13px; height: 13px;
stroke-dasharray: 18; stroke-dashoffset: 18;
transition: stroke-dashoffset .22s ease .02s;
}
.auth-remember:hover .auth-remember__box { border-color: rgba(185,147,90,0.6); }
.auth-remember input:focus-visible + .auth-remember__box {
border-color: #b9935a; box-shadow: 0 0 0 3px rgba(185,147,90,0.25);
}
.auth-remember input:checked + .auth-remember__box {
background: #b9935a; border-color: #b9935a;
}
.auth-remember input:checked + .auth-remember__box svg { stroke-dashoffset: 0; }
.auth-remember input:active + .auth-remember__box { transform: scale(0.92); }
.auth-remember__label { line-height: 1; transition: color .18s ease; }
.auth-remember:hover .auth-remember__label { color: rgba(255,255,255,0.85); }
.auth-error {
color: #ff7a7a; font-size: 12.5px; margin: 2px 0 0;
background: rgba(255,90,90,0.08); border: 1px solid rgba(255,90,90,0.2);
border-radius: 7px; padding: 8px 10px;
}
.auth-submit {
margin-top: 4px; padding: 12px; border: none; border-radius: 9px; cursor: pointer;
background: #b9935a; color: #16110a; font-weight: 600; font-size: 14px;
transition: background .15s ease;
}
.auth-submit:hover:not(:disabled) { background: #c8a266; }
.auth-submit:disabled { opacity: 0.6; cursor: default; }
.auth-or { display: flex; align-items: center; text-align: center; gap: 10px; margin: 4px 0 0; opacity: .45; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.2); }
.auth-or span { font-size: 12px; color: rgba(255,255,255,0.6); }
#auth-google { display: flex; justify-content: center; }
.auth-switch { margin: 18px 0 0; font-size: 12.5px; color: rgba(255,255,255,0.5); text-align: center; }
.auth-switch__btn { background: none; border: none; color: #b9935a; cursor: pointer; font: inherit; padding: 0 0 0 4px; }
/* ============ Organization page ============ */
.org-page {
max-width: 960px;
flex: 1; min-height: 0; /* ocupa el alto restante dentro de .page */
overflow-y: auto; /* y scrollea cuando la lista crece */
padding-right: 6px;
}
.org-page::-webkit-scrollbar { width: 5px; }
.org-page::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 9999px; }
.org-page--wide { max-width: none; } /* Logs: aprovecha todo el ancho disponible */
.org-page__back { margin-bottom: 16px; }
.org-page__eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.org-page__title { font-size: 24px; color: #fff; margin: 6px 0 0; }
.org-page__title em { color: #b9935a; font-style: normal; }
.org-list { display: flex; flex-direction: column; gap: 10px; }
.org-section {
display: flex; align-items: center; gap: 9px; margin-top: 12px;
}
.org-section:first-child { margin-top: 0; }
.org-section__label {
color: rgba(255,255,255,0.55); font-size: 11.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.07em;
}
.org-section__count {
font-size: 11px; color: rgba(255,255,255,0.55);
background: rgba(255,255,255,0.06); border-radius: 20px; padding: 1px 8px;
}
.org-member {
display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
background: #131316; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px;
padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s;
}
.org-member:hover { border-color: rgba(185,147,90,0.5); background: #17171b; }
.org-member__avatar {
width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
background: linear-gradient(135deg, #b9935a, #6e5126); color: #16110a; font-weight: 700;
}
.org-member__info { display: flex; flex-direction: column; flex: 1; }
.org-member__name { color: #fff; font-size: 14px; font-weight: 600; }
.org-member__email { color: rgba(255,255,255,0.5); font-size: 12.5px; }
.org-member__role {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 9px;
border-radius: 20px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6);
}
.org-member__role.is-owner { background: rgba(185,147,90,0.18); color: #d9b483; }
.org-empty { color: rgba(255,255,255,0.45); font-size: 13px; }
/* ============ Activity logs ============ */
.logs-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.logs-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
flex-wrap: wrap; margin-bottom: 16px;
}
.logs-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.logs-chip {
font-size: 12px; letter-spacing: 0.02em; padding: 6px 14px; border-radius: 20px;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6); cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.logs-chip:hover { border-color: rgba(185,147,90,0.5); color: rgba(255,255,255,0.85); }
.logs-chip.is-active { background: rgba(185,147,90,0.18); border-color: rgba(185,147,90,0.6); color: #d9b483; }
.logs-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.logs-date-field {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.4);
}
.logs-date {
background: #131316; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
padding: 7px 10px; color: #fff; font-size: 12.5px; outline: none; transition: border-color .15s;
color-scheme: dark;
}
.logs-date:focus { border-color: rgba(185,147,90,0.6); }
.logs-search {
flex: 1; min-width: 180px; max-width: 300px;
background: #131316; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
padding: 9px 13px; color: #fff; font-size: 13px; outline: none; transition: border-color .15s;
}
.logs-search::placeholder { color: rgba(255,255,255,0.35); }
.logs-search:focus { border-color: rgba(185,147,90,0.6); }
/* flatpickr · tema oscuro a juego con el studio (dorado) */
.logs-date { cursor: pointer; min-width: 96px; }
.flatpickr-calendar {
background: #16161a; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px;
box-shadow: 0 18px 50px rgba(0,0,0,0.55); color: #fff;
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-months { padding-top: 4px; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months { color: #fff; }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: transparent; font-weight: 600; }
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: #16161a; color: #fff; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: rgba(255,255,255,0.6); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #d9b483; }
span.flatpickr-weekday { color: rgba(255,255,255,0.4); font-weight: 600; background: transparent; }
.flatpickr-weekdays { background: transparent; }
.flatpickr-day { color: rgba(255,255,255,0.85); border-radius: 8px; }
.flatpickr-day:hover, .flatpickr-day:focus { background: rgba(255,255,255,0.08); border-color: transparent; }
.flatpickr-day.today { border-color: rgba(185,147,90,0.6); }
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange {
background: #b9935a; border-color: #b9935a; color: #16110a; font-weight: 600;
}
.flatpickr-day.inRange { background: rgba(185,147,90,0.18); border-color: transparent; box-shadow: none; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: rgba(255,255,255,0.25); }
.numInputWrapper span.arrowUp::after { border-bottom-color: rgba(255,255,255,0.5); }
.numInputWrapper span.arrowDown::after { border-top-color: rgba(255,255,255,0.5); }
.numInputWrapper:hover { background: rgba(255,255,255,0.05); }
/* Selector de hora: por defecto flatpickr lo pinta blanco/soso. Lo rehacemos como
dos cajas redondeadas (hora : minuto) con steppers propios, a juego con el tema. */
.flatpickr-calendar.hasTime .flatpickr-time {
border-top: 1px solid rgba(255,255,255,0.08);
display: flex; align-items: center; justify-content: center; gap: 6px;
height: auto; max-height: none; padding: 10px 0 12px;
}
.flatpickr-calendar .flatpickr-time { background: transparent; }
/* Iconito de reloj a la izquierda de la hora */
.flatpickr-calendar .flatpickr-time::before {
content: ""; width: 16px; height: 16px; flex: 0 0 auto; margin-right: 2px; opacity: .9;
background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9b483' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
/* Prefijo .flatpickr-calendar para ganar especificidad a las reglas de flatpickr
(su `.flatpickr-time .numInputWrapper{width:40%}` se imponía y desbordaba la caja). */
.flatpickr-calendar .flatpickr-time .numInputWrapper {
width: 62px; height: 40px; flex: 0 0 auto; float: none; overflow: hidden;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
transition: border-color .15s, background .15s;
}
.flatpickr-calendar .flatpickr-time .numInputWrapper:hover {
background: rgba(255,255,255,0.08); border-color: rgba(185,147,90,0.5);
}
.flatpickr-calendar .flatpickr-time input.numInput {
height: 100%; width: 100%; padding: 0 18px 0 0; text-align: center;
font-size: 17px; font-weight: 600; color: #fff; background: transparent;
}
.flatpickr-calendar .flatpickr-time input.numInput:hover,
.flatpickr-calendar .flatpickr-time input.numInput:focus { background: transparent; }
.flatpickr-calendar .flatpickr-time input.numInput::-webkit-inner-spin-button { display: none; }
.flatpickr-calendar .flatpickr-time input.numInput { -moz-appearance: textfield; }
.flatpickr-calendar .flatpickr-time .flatpickr-time-separator {
width: auto; color: rgba(255,255,255,0.4); font-size: 17px; font-weight: 600; line-height: 40px;
}
/* Steppers ▴ ▾ siempre visibles, alineados a la derecha de cada caja */
.flatpickr-calendar .flatpickr-time .numInputWrapper span {
opacity: 1; border: 0; width: 18px; right: 0;
display: flex; align-items: center; justify-content: center;
}
.flatpickr-calendar .flatpickr-time .numInputWrapper span:hover { background: rgba(185,147,90,0.18); }
.flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp { top: 0; height: 50%; }
.flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown { top: 50%; height: 50%; }
.flatpickr-calendar .flatpickr-time .numInputWrapper span::after { border: 0 !important; position: static; margin: 0; }
.flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp::after { content: '\25B4'; color: rgba(255,255,255,0.55); font-size: 10px; }
.flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown::after { content: '\25BE'; color: rgba(255,255,255,0.55); font-size: 10px; }
.flatpickr-calendar .flatpickr-time .numInputWrapper span:hover::after { color: #d9b483; }
/* am/pm (por si algún picker usa 12h) */
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm { background: transparent; color: #fff; font-weight: 600; }
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus { background: rgba(255,255,255,0.06); }
.logs-list { display: flex; flex-direction: column; gap: 8px; }
.logs-pager {
display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px;
}
.logs-pager__info { color: rgba(255,255,255,0.5); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.logs-pager .ghost-btn:disabled { opacity: 0.35; cursor: default; }
.log-row {
display: flex; align-items: center; gap: 14px;
background: #131316; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px;
padding: 12px 16px;
}
.log-row__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: rgba(255,255,255,0.4); }
.log-row__dot--info { background: #5b9cd6; }
.log-row__dot--warning { background: #d9b483; }
.log-row__dot--error { background: #d6635b; }
.log-row__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.log-row__action { color: #fff; font-size: 14px; font-weight: 600; }
.log-row__target {
color: rgba(255,255,255,0.5); font-size: 12.5px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.log-row__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.log-row__who { color: rgba(255,255,255,0.7); font-size: 12.5px; }
.log-row__when { display: flex; align-items: baseline; gap: 7px; }
.log-row__date { color: rgba(255,255,255,0.55); font-size: 11.5px; }
.log-row__time { color: rgba(255,255,255,0.4); font-size: 11.5px; font-variant-numeric: tabular-nums; }
/* ============ Member modal ============ */
.member-modal { position: fixed; inset: 0; z-index: 1100; display: none; }
.member-modal.is-open { display: block; }
.member-modal__backdrop { position: absolute; inset: 0; background: rgba(6,6,8,0.7); backdrop-filter: blur(4px); }
.member-modal__card {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: min(460px, 94vw); background: #131316; border: 1px solid rgba(255,255,255,0.09);
border-radius: 16px; padding: 24px; box-shadow: 0 30px 90px rgba(0,0,0,0.55);
}
/* New task: modal más ancho y en 2 columnas (antes era estrecho y muy alto). */
#task-modal .member-modal__card { width: min(640px, 94vw); max-height: 92vh; overflow-y: auto; }
#task-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
#task-form > .am-field--full,
#task-form > #tk-error,
#task-form > button[type="submit"] { grid-column: 1 / -1; }
/* Modal de editar miembro: tamaño estático (no salta al cambiar de pestaña) */
#member-modal .member-modal__card {
height: min(540px, 90vh); display: flex; flex-direction: column;
}
#member-modal .member-modal__body { flex: 1; overflow-y: auto; min-height: 0; }
/* Popup de día del calendario: tamaño estático siempre; la lista de tasks scrollea. */
#calendar-day-modal .member-modal__card {
height: min(540px, 86vh); display: flex; flex-direction: column;
}
#calendar-day-modal #cal-day-title { margin-bottom: 18px; }
#calendar-day-modal #cal-day-list { flex: 1; overflow-y: auto; min-height: 0; }
#calendar-day-modal #calendar-day-create { margin-top: 14px; flex-shrink: 0; }
.member-modal__close {
position: absolute; top: 14px; right: 16px; background: none; border: none;
color: rgba(255,255,255,0.5); font-size: 22px; cursor: pointer; line-height: 1;
}
/* Variante ancha: modal con el listado de miembros */
.member-modal__card--wide { width: min(620px, 94vw); max-height: 80vh; overflow-y: auto; }
.members-modal__head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding-right: 28px;
}
.members-modal__head .model-create__btn { flex: none; }
.members-modal__head .member-modal__name em { color: #b9935a; font-style: normal; }
.member-modal__header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.member-modal__avatar {
width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
background: linear-gradient(135deg, #b9935a, #6e5126); color: #16110a; font-weight: 700; font-size: 18px;
}
.member-modal__name { color: #fff; font-size: 17px; margin: 0; }
.member-modal__email { color: rgba(255,255,255,0.5); font-size: 12.5px; }
.member-modal__role {
margin-left: auto; font-size: 11px; text-transform: uppercase; padding: 4px 9px;
border-radius: 20px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6);
}
.member-modal__tabs { display: flex; gap: 6px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 16px; }
.member-tab {
background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer;
padding: 8px 10px; font-size: 13px; border-bottom: 2px solid transparent;
}
.member-tab.is-active { color: #fff; border-bottom-color: #b9935a; }
.member-tabpane { display: none; }
.member-tabpane.is-active { display: block; }
.mm-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13.5px; }
.mm-row span:first-child { color: rgba(255,255,255,0.5); }
.mm-row span:last-child { color: #fff; }
.mm-perm { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.mm-perm__text { flex: 1; }
.mm-perm__name { display: block; color: #fff; font-size: 14px; font-weight: 600; }
.mm-perm__desc { display: block; color: rgba(255,255,255,0.45); font-size: 12px; margin-top: 2px; }
/* ============ Profile modal (My profile) ============ */
.profile-modal { position: fixed; inset: 0; z-index: 1100; display: none; }
.profile-modal.is-open { display: block; }
.profile-modal__backdrop { position: absolute; inset: 0; background: rgba(6,6,8,0.7); backdrop-filter: blur(4px); }
.profile-modal__card {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: min(420px, 94vw); background: #131316; border: 1px solid rgba(255,255,255,0.09);
border-radius: 16px; padding: 24px; box-shadow: 0 30px 90px rgba(0,0,0,0.55);
}
.profile-modal__close {
position: absolute; top: 14px; right: 16px; background: none; border: none;
color: rgba(255,255,255,0.5); font-size: 22px; cursor: pointer; line-height: 1;
}
.profile-modal__header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.profile-modal__avatar {
width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; flex: none;
background: linear-gradient(135deg, #b9935a, #6e5126); color: #16110a; font-weight: 700; font-size: 19px;
}
.profile-modal__id { min-width: 0; }
.profile-modal__name { color: #fff; font-size: 17px; margin: 0; }
.profile-modal__email { color: rgba(255,255,255,0.5); font-size: 12.5px; }
.profile-modal__eyebrow {
display: block; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(255,255,255,0.4); margin-bottom: 6px;
}
.profile-modal__rows { display: flex; flex-direction: column; }
.pm-row {
display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13.5px;
}
.pm-row:last-child { border-bottom: none; }
.pm-row span:first-child { color: rgba(255,255,255,0.5); }
.pm-row span:last-child { color: #fff; text-align: right; overflow-wrap: anywhere; }
.profile-modal__eyebrow--gap { margin-top: 22px; }
.pm-pwd-toggle {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; margin-top: 22px; padding: 12px 14px; cursor: pointer;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
border-radius: 10px; color: #fff; font-size: 13.5px; font-weight: 600;
}
.pm-pwd-toggle:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
.pm-pwd-toggle__chevron { color: rgba(255,255,255,0.5); transition: transform .18s ease; flex: none; }
.pm-pwd-toggle[aria-expanded="true"] { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }
.pm-pwd-toggle[aria-expanded="true"] .pm-pwd-toggle__chevron { transform: rotate(180deg); }
/* Collapsible animation: grid 0fr → 1fr animates to natural height. */
.pm-pwd-wrap {
display: grid; grid-template-rows: 0fr; overflow: hidden;
transition: grid-template-rows .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pm-pwd-wrap.is-open { grid-template-rows: 1fr; }
.pm-pwd {
display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden;
padding: 16px 14px; border: 1px solid rgba(255,255,255,0.09); border-top: none;
border-radius: 0 0 10px 10px; background: rgba(255,255,255,0.02);
opacity: 0; transition: opacity .22s ease .04s;
}
.pm-pwd-wrap.is-open .pm-pwd { opacity: 1; }
.pm-field { display: flex; flex-direction: column; gap: 6px; }
.pm-field > span { font-size: 12px; color: rgba(255,255,255,0.6); }
.pm-field__wrap { position: relative; display: flex; }
.pm-field__wrap input {
flex: 1; background: #1c1c20; border: 1px solid rgba(255,255,255,0.1); color: #fff;
border-radius: 9px; padding: 11px 40px 11px 12px; font-size: 14px; outline: none; width: 100%;
}
.pm-field__wrap input:focus { border-color: #b9935a; }
.pm-eye {
position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
width: 30px; height: 30px; display: grid; place-items: center;
background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.5);
border-radius: 7px;
}
.pm-eye:hover { color: #b9935a; }
/* Eye icon via CSS background so no extra markup is needed */
.pm-eye::before {
content: ""; width: 18px; height: 18px; background: currentColor;
-webkit-mask: var(--eye) center / contain no-repeat; mask: var(--eye) center / contain no-repeat;
--eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M1 8s2.5-4.5 7-4.5S15 8 15 8s-2.5 4.5-7 4.5S1 8 1 8z' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3C/svg%3E");
}
.pm-eye.is-on::before {
--eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M1 8s2.5-4.5 7-4.5S15 8 15 8s-2.5 4.5-7 4.5S1 8 1 8z' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3Cpath d='M2 2l12 12' stroke-linecap='round'/%3E%3C/svg%3E");
}
.pm-msg {
font-size: 12.5px; margin: 2px 0 0; border-radius: 7px; padding: 8px 10px;
color: #ff7a7a; background: rgba(255,90,90,0.08); border: 1px solid rgba(255,90,90,0.2);
}
.pm-msg.is-ok { color: #7ad29a; background: rgba(90,200,130,0.09); border-color: rgba(90,200,130,0.25); }
.pm-submit {
margin-top: 4px; padding: 12px; border: none; border-radius: 9px; cursor: pointer;
background: #b9935a; color: #16110a; font-weight: 600; font-size: 14px;
}
.pm-submit:disabled { opacity: 0.6; cursor: default; }
/* Switch */
.switch {
width: 44px; height: 25px; border-radius: 20px; border: none; cursor: pointer;
background: rgba(255,255,255,0.14); position: relative; transition: background .18s; flex: none;
}
.switch.is-on { background: #b9935a; }
.switch.is-locked { opacity: 0.55; cursor: not-allowed; }
.switch__dot {
position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%;
background: #fff; transition: transform .18s;
}
.switch.is-on .switch__dot { transform: translateX(19px); }
/* ============ User menu (dropdown on the user card) ============ */
.user-card { cursor: pointer; }
.user-menu {
position: fixed; z-index: 1050; display: none;
min-width: 200px; padding: 6px;
background: #16161a; border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
.user-menu.is-open { display: block; }
.user-menu__head {
display: flex; flex-direction: column; gap: 2px;
padding: 8px 10px 10px; margin-bottom: 6px;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.user-menu__name { color: #fff; font-size: 13.5px; font-weight: 600; }
.user-menu__email { color: rgba(255,255,255,0.5); font-size: 12px; }
.user-menu__item {
display: flex; align-items: center; gap: 10px; width: 100%;
background: none; border: none; cursor: pointer; text-align: left;
padding: 9px 10px; border-radius: 8px; font-size: 13.5px;
color: rgba(255,255,255,0.85);
}
.user-menu__item svg { color: rgba(255,255,255,0.55); flex: none; }
.user-menu__item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.user-menu__item:hover svg { color: #b9935a; }
.user-menu__item--danger { color: #ff8a8a; }
.user-menu__item--danger svg { color: #ff8a8a; }
.user-menu__item--danger:hover { background: rgba(255,90,90,0.1); color: #ff7a7a; }
/* ============ Auth loading state (avoids login-form flash) ============ */
.auth-loading { display: none; align-items: center; gap: 10px; padding: 8px 0 4px; color: rgba(255,255,255,0.7); font-size: 13.5px; }
.auth-spinner {
width: 16px; height: 16px; border-radius: 50%; flex: none;
border: 2px solid rgba(255,255,255,0.18); border-top-color: #b9935a;
animation: auth-spin 0.7s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
/* While validating an existing session OR signing in: show the loader, hide the form. */
html.session-checking .auth-form,
html.session-checking #auth-title,
html.session-checking #auth-sub,
html.auth-submitting .auth-form,
html.auth-submitting #auth-title,
html.auth-submitting #auth-sub { display: none; }
html.session-checking .auth-loading,
html.auth-submitting .auth-loading { display: flex; }
/* Organization pinned at the bottom of the sidebar */
.sidebar__item--org { margin-bottom: 8px; }
/* ============ Sidebar collapse ============ */
/* Suprime transiciones al restaurar el estado en la carga (sin flash de animación) */
.studio-body.no-anim,
.studio-body.no-anim .sidebar,
.studio-body.no-anim .sidebar__item,
.studio-body.no-anim .sidebar__item-label,
.studio-body.no-anim .sidebar__item-shortcut { transition: none !important; }
.sidebar__top { position: relative; }
.sidebar__collapse {
position: absolute; top: 0; right: 0;
width: 26px; height: 26px; display: grid; place-items: center;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
border-radius: 7px; color: rgba(255,255,255,0.7); cursor: pointer;
transition: background .2s, color .2s;
}
.sidebar__collapse:hover { background: rgba(201,95,46,0.2); color: #fff; }
.sidebar__collapse svg { transition: transform .25s var(--ease); }
.studio-body.sidebar-collapsed { grid-template-columns: 76px 1fr; }
.studio-body.sidebar-collapsed .sidebar { padding-left: 14px; padding-right: 14px; }
.studio-body.sidebar-collapsed .sidebar__logo,
.studio-body.sidebar-collapsed .sidebar__edition,
.studio-body.sidebar-collapsed .sidebar__group-label,
.studio-body.sidebar-collapsed .user-card__info { display: none; }
/* Etiquetas y atajos: se desvanecen (no saltan) mientras el ancho se reduce */
.studio-body.sidebar-collapsed .sidebar__item-label,
.studio-body.sidebar-collapsed .sidebar__item-shortcut { display: none; }
.studio-body.sidebar-collapsed .sidebar__collapse {
position: static; margin: 0 auto;
}
.studio-body.sidebar-collapsed .sidebar__collapse svg { transform: rotate(180deg); }
.studio-body.sidebar-collapsed .sidebar__top { margin-bottom: 26px; align-items: center; }
.studio-body.sidebar-collapsed .sidebar__item {
/* Solo el icono visible (label/atajo en display:none) → flex centrado garantiza
el icono al medio pase lo que pase (opacity inline de GSAP, badges, etc.) */
display: flex; align-items: center; justify-content: center; gap: 0; padding: 11px 0;
transform: none !important; /* anula cualquier translateX residual de GSAP que descentre */
}
.studio-body.sidebar-collapsed .sidebar__item::after { display: none; }
/* Los items del footer (Settings, Organization) viven en un contenedor block y no
se estiran como los de la nav: forzamos ancho completo para que el icono centre */
.studio-body.sidebar-collapsed .sidebar__footer .sidebar__item { width: 100%; }
/* User card: flex centrado para que el avatar quede en el eje (grid 40px+1fr
dejaba la columna vacía empujando el avatar fuera de centro) */
.studio-body.sidebar-collapsed .user-card {
display: flex; justify-content: center; align-items: center; padding: 8px 0;
}
/* ============ Models page ============ */
.org-page__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.org-page__head .model-create__btn { flex: none; }
.model-create { display: flex; gap: 8px; }
.model-create__input {
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
border-radius: 8px; color: #fff; padding: 8px 12px; font-size: 14px;
}
.model-create__btn {
background: #C95F2E; border: 0; border-radius: 8px; color: #fff;
padding: 8px 16px; font-size: 14px; cursor: pointer;
}
.model-create__btn:hover { filter: brightness(1.08); }
.model-create__btn:disabled, .model-create__btn.is-disabled {
opacity: 0.45; cursor: not-allowed; filter: none;
}
.model-create__btn:disabled:hover, .model-create__btn.is-disabled:hover { filter: none; }
/* ============ Add member modal fields ============ */
.am-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.am-field label { font-size: 12px; color: rgba(255,255,255,.6); }
.am-field input, .am-field select, .am-field textarea {
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
border-radius: 8px; color: #fff; padding: 8px 12px; font-size: 14px;
outline: none; font-family: inherit; width: 100%;
}
.am-field input:focus, .am-field select:focus, .am-field textarea:focus { border-color: #b9935a; }
/* Select de rol estilizado: sin apariencia nativa, con chevron dorado propio */
.am-field select {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
padding-right: 34px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b9935a' stroke-width='1.4'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center;
}
.am-field select option { background: #16161a; color: #fff; }
.am-models { display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow: auto; }
.am-model { display: flex; align-items: center; gap: 8px; font-size: 14px; }
/* La pestaña Profile llena el alto del modal para empujar las acciones abajo */
#member-modal .member-tabpane[data-tabpane="profile"].is-active {
display: flex; flex-direction: column; height: 100%;
}
.mm-actions { display: flex; gap: 8px; margin-top: auto; justify-content: center; padding-top: 16px; }
/* ============ Task Manager ============ */
.task-card {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 11px 14px;
margin-bottom: 8px;
background: rgba(18, 18, 22, 0.85); /* casi sólido — tapa el parallax */
}
.task-card__head { display: flex; align-items: center; gap: 8px; }
.task-card__titlewrap { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.task-card__title { font-weight: 600; }
.task-card__model {
font-size: 0.72rem; padding: 2px 8px; border-radius: 999px;
background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7);
}
.task-card__who {
font-size: 0.82rem; font-weight: 600; color: #d9b483;
padding: 2px 9px; border-radius: 999px; background: rgba(185, 147, 90, 0.16);
}
.task-card__desc { margin: 5px 0 2px; font-size: 0.84rem; color: rgba(255, 255, 255, 0.6); }
.task-card__progress { font-size: 0.76rem; color: rgba(255, 255, 255, 0.45); margin: 4px 0; }
.task-card__items { display: flex; flex-direction: column; gap: 4px; }
.task-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer; }
.task-item input[disabled] { cursor: default; }
.task-item.is-done span { text-decoration: line-through; color: rgba(255, 255, 255, 0.4); }
.task-status {
font-size: 0.72rem; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.task-status--pending { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.65); }
.task-status--in_progress { background: rgba(245, 191, 66, 0.14); color: #f5bf42; }
.task-status--completed { background: rgba(74, 222, 128, 0.14); color: #4ade80; }
.task-card--completed { opacity: 0.72; }
.task-card__del {
background: none; border: none; color: rgba(255, 255, 255, 0.4);
font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.task-card__del:hover { color: #f87171; }
/* New task modal */
.tk-item-row { display: flex; gap: 8px; margin-bottom: 6px; }
.tk-item-row .tk-item-input { flex: 1; }
.tk-item-remove {
background: none; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px;
color: rgba(255, 255, 255, 0.5); cursor: pointer; padding: 0 10px;
}
.tk-add-item {
margin-top: 4px; background: none; border: 1px dashed rgba(255, 255, 255, 0.18);
border-radius: 8px; color: rgba(255, 255, 255, 0.6); cursor: pointer; padding: 6px 12px;
font-size: 0.82rem;
}
#tk-description { width: 100%; resize: vertical; }
/* Task Manager: tarjetas clicables → modal de detalle */
.task-card--clickable { cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.task-card--clickable:hover { border-color: rgba(185, 147, 90, 0.45); background: rgba(28, 28, 33, 0.9); }
/* Task detail modal */
.td-statusrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.td-statusrow .task-card__progress { margin: 0; }
.td-complete {
margin-left: auto; background: rgba(74, 222, 128, 0.14); color: #4ade80;
border: 1px solid rgba(74, 222, 128, 0.3); border-radius: 8px;
padding: 6px 12px; font-size: 0.82rem; cursor: pointer;
}
.td-complete:hover { background: rgba(74, 222, 128, 0.22); }
.td-complete:disabled { opacity: 0.5; cursor: default; }
#td-description { width: 100%; resize: vertical; }
.td-items { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
/* El checklist del detalle vive dentro de .am-field, cuya regla `.am-field input`
(width:100% + padding + borde) deformaba los checkboxes. Se neutraliza aquí con
más especificidad y se les da el mismo aspecto de fila que la vista del VA. */
.td-items .task-item {
cursor: pointer; display: flex; align-items: center; gap: 11px;
padding: 10px 12px; border-radius: 10px; font-size: 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02);
transition: border-color 0.15s, background 0.15s;
}
.td-items .task-item:hover { border-color: rgba(185, 147, 90, 0.45); background: rgba(255, 255, 255, 0.045); }
.td-items .task-item.is-done { border-color: rgba(74, 222, 128, 0.28); background: rgba(74, 222, 128, 0.06); }
.td-items .task-item input[type="checkbox"] {
width: 17px; height: 17px; min-width: 17px; flex: none;
margin: 0; padding: 0; border-radius: 4px; background: none;
accent-color: #b9935a; cursor: pointer;
}
.td-items .task-item span { flex: 1; min-width: 0; }
/* Indicador de carga en los botones de acción de las tasks: oculta el texto y
muestra un spinner centrado mientras la petición está en vuelo. */
button.is-loading { position: relative; color: transparent !important; pointer-events: none; }
button.is-loading::after {
content: ""; position: absolute; top: 50%; left: 50%;
width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.td-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }
.td-delete {
background: none; border: 1px solid rgba(248, 113, 113, 0.4); border-radius: 8px;
color: #f87171; cursor: pointer; padding: 8px 14px; font-size: 0.85rem;
}
.td-delete:hover { background: rgba(248, 113, 113, 0.12); }
/* Task Manager: cabecera solo con el botón de acción (sin título duplicado) */
.org-page__head--actions { justify-content: flex-end; }
.tasks-filters { display: flex; gap: 8px; flex: none; }
/* Task Manager: controles a la izquierda (conmutador de vista + check) */
.taskmgr-head-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Conmutador de vista (segmented control con iconos): lista / agrupado por VA */
.taskmgr-views {
display: inline-flex; gap: 2px; padding: 3px;
border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
}
.taskmgr-view {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 27px; padding: 0; border: none; border-radius: 7px;
background: transparent; color: rgba(255, 255, 255, 0.5); cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.taskmgr-view:hover { color: rgba(255, 255, 255, 0.85); }
.taskmgr-view.is-active { background: rgba(185, 147, 90, 0.2); color: #d9b483; }
.taskmgr-view svg { display: block; }
/* Vista agrupada: cada VA es un "container" (columna). Exactamente 2 columnas
por fila, una al lado de la otra; las parejas de cada fila quedan igual de
altas (align-items: stretch) y, si una tiene muchas tasks, scrollea por dentro. */
.taskmgr-list--grouped {
flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 14px;
}
.task-group {
flex: 0 1 calc(50% - 7px); min-width: 0; max-width: none; /* no crece: impar deja hueco */
display: flex; flex-direction: column; max-height: 62vh;
border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px;
background: rgba(255, 255, 255, 0.02); padding: 12px 14px;
}
.task-group__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex: none; }
.task-group__name { font-size: 14px; font-weight: 600; color: #fff; }
.task-group__count {
font-size: 12px; color: rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.06); border-radius: 999px; padding: 2px 9px;
}
.task-group__list {
display: flex; flex-direction: column; gap: 8px;
flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px;
}
.task-group__list::-webkit-scrollbar { width: 5px; }
.task-group__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 9999px; }
/* ===== VA task popup (#task-view-modal) ===== */
#task-view-modal .member-modal__card.task-view {
width: min(560px, 94vw); max-height: 86vh;
display: flex; flex-direction: column; padding: 28px 28px 22px;
}
.task-view__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-right: 30px; }
.task-view__head .task-status { font-size: 0.78rem; padding: 4px 12px; }
.task-view__head .task-card__model { font-size: 0.74rem; }
.task-view__title { color: #fff; font-size: 25px; font-weight: 600; line-height: 1.2; margin: 0 0 8px; }
.task-view__desc { color: rgba(255,255,255,0.62); font-size: 0.94rem; line-height: 1.55; margin: 0 0 20px; }
.task-view__progress { margin-bottom: 22px; }
.task-view__progress-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.task-view__progress-label,
.task-view__section { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.task-view__progress-count { font-size: 13px; color: rgba(255,255,255,0.78); font-variant-numeric: tabular-nums; }
.task-view__bar { height: 9px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.task-view__bar-fill {
height: 100%; width: 0; border-radius: 999px;
background: linear-gradient(90deg, #b9935a, #e0b877);
transition: width 0.18s ease-out, background 0.3s var(--ease);
}
.task-view__bar-fill.is-complete { background: linear-gradient(90deg, #3fae6a, #4ade80); }
.task-view__checklist { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.task-view__section { display: block; margin-bottom: 11px; }
.task-view__items { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.task-view__items .task-item {
font-size: 0.93rem; gap: 11px; padding: 12px 14px; border-radius: 10px;
border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02);
transition: border-color 0.15s, background 0.15s;
}
.task-view__items .task-item:hover { border-color: rgba(185,147,90,0.45); background: rgba(255,255,255,0.045); }
.task-view__items .task-item.is-done { border-color: rgba(74,222,128,0.28); background: rgba(74,222,128,0.06); }
.task-view__items .task-item input { width: 17px; height: 17px; accent-color: #b9935a; cursor: pointer; flex: none; }
.task-view__complete {
margin-top: 18px; width: 100%; padding: 12px; border-radius: 11px; cursor: pointer;
font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em;
background: linear-gradient(90deg, #3fae6a, #4ade80); color: #06270f; border: none;
transition: opacity 0.15s, filter 0.15s;
}
.task-view__complete:hover:not(:disabled) { filter: brightness(1.07); }
.task-view__complete:disabled {
cursor: default; background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.08);
}
.task-view__complete.is-reopen {
background: transparent; color: rgba(255,255,255,0.7);
border: 1px solid rgba(255,255,255,0.18);
}
.task-view__complete.is-reopen:hover:not(:disabled) { filter: none; background: rgba(255,255,255,0.05); }
.task-view__items .task-item.is-locked { cursor: default; opacity: 0.92; }
.task-view__items .task-item.is-locked input { cursor: not-allowed; }
/* Task Manager: filas compactas agrupadas por VA */
.task-group { margin-bottom: 18px; }
.task-group__head {
display: flex; align-items: center; gap: 9px; margin: 2px 2px 9px;
padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.task-group__avatar {
width: 23px; height: 23px; border-radius: 50%; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.72rem; font-weight: 700; color: #1b1b1f;
background: linear-gradient(135deg, #e0c08e, #b9935a);
}
.task-group__name { font-weight: 600; color: #e9d9bf; font-size: 0.9rem; }
.task-group__count {
font-size: 0.72rem; color: rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.06); border-radius: 999px; padding: 1px 8px;
}
.task-group__add {
margin-left: auto; width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center; padding: 0;
background: rgba(185, 147, 90, 0.16); color: #d9b483;
border: 1px solid rgba(185, 147, 90, 0.38); cursor: pointer; line-height: 0;
transition: background 0.2s, transform 0.15s;
}
.task-group__add:hover { background: rgba(185, 147, 90, 0.3); transform: scale(1.08); }
.task-card--compact {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; margin-bottom: 6px; border-left-width: 3px;
}
.task-card--compact.task-card--pending { border-left-color: rgba(255, 255, 255, 0.18); }
.task-card--compact.task-card--in_progress { border-left-color: #f5bf42; }
.task-card--compact.task-card--completed { border-left-color: #4ade80; }
.task-card--compact .task-card__title {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-card--compact .task-card__progress { margin: 0; }
.task-card--compact .task-card__del { font-size: 1.1rem; }
/* ============================================================
Acceso por rol — FAIL-CLOSED
Por defecto (sin .is-admin en ) el sidebar solo muestra las secciones de
VA: Generate, Tasks, Gallery (view-only) y Auto script. Las secciones de gestión
quedan ocultas hasta que auth.js confirma que el usuario es admin/owner y añade
.is-admin. Así un VA nunca ve UI de admin, ni durante la carga ni aunque el JS
falle. La autorización REAL vive en el backend (cada endpoint admin exige
organization.manage; en Gallery solo el GET es accesible al VA); esto es solo UX.
============================================================ */
html:not(.is-admin) .sidebar__item[data-page="task-manager"],
html:not(.is-admin) .sidebar__item[data-page="models"],
html:not(.is-admin) .sidebar__item[data-page="settings"],
html:not(.is-admin) .sidebar__item[data-page="autoprompter"],
html:not(.is-admin) .sidebar__group-label[data-group="automation"],
html:not(.is-admin) #calendar-day-create,
html:not(.is-admin) #settings-members-card { display: none !important; }
/* "Tasks" (asignadas a mí) es solo para el VA: el admin/owner nunca tiene tareas
asignadas (solo los VA son asignables), así que para él esa sección sobra — usa
"Task Manager". La ocultamos para .is-admin para no mostrar una página vacía. */
html.is-admin .sidebar__item[data-page="tasks"] { display: none !important; }
/* El admin genera siempre libre (sin task): oculta el selector de task en Generate por
completo. Gating fail-closed en CSS (independiente del timing del JS); loadGenerateTasks
además corta antes del fetch para el admin (nada de "Loading…"). */
html.is-admin #gen-task-field { display: none !important; }
/* Gallery view-only para el VA: subir es admin-only (ver routers/gallery.py).
Ocultamos los controles de subida; el backend rechaza el POST igualmente y
gallery.js no pinta el botón de borrar para no-admin. */
html:not(.is-admin) #gallery-add,
html:not(.is-admin) #gallery-dropzone { display: none !important; }
/* ---- Task Manager: multi-VA + deadline ---- */
/* Asignación multi-VA estilo "añadir a una lista": lista de chips + selector. */
.tk-assignees { display: flex; flex-direction: column; gap: 8px; }
.tk-assignees__empty { color: var(--muted, #9aa0a6); font-size: 13px; margin: 0; }
.tk-va-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-va-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 6px 4px 11px; border: 1px solid rgba(255,255,255,.14);
border-radius: 999px; font-size: 13px; user-select: none;
background: rgba(255,255,255,.04);
}
.tk-va-chip__name { line-height: 1; }
.tk-va-chip__x {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border: none; border-radius: 50%;
background: rgba(255,255,255,.08); color: rgba(255,255,255,.7);
font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
transition: background .15s, color .15s;
}
.tk-va-chip__x:hover { background: rgba(229,115,115,.25); color: #ff8a8a; }
.tk-va-select {
width: 100%; padding: 8px 12px; border-radius: 8px;
border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
color: #fff; font: inherit; outline: none; cursor: pointer; color-scheme: dark;
}
.tk-va-select:focus { border-color: #b9935a; }
.tk-va-select option { background: #16161a; color: #fff; }
.tk-due-input {
width: 100%; padding: 8px 10px; border-radius: 8px;
border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
color: inherit; font: inherit; color-scheme: dark;
}
.task-card__chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.task-card__chip {
font-size: 11px; padding: 2px 8px; border-radius: 999px;
background: rgba(185,147,90,.18); color: #d9b483; white-space: nowrap;
}
.task-card__chip--none { background: rgba(255,255,255,.06); color: #9aa0a6; }
.task-due { font-size: 12px; color: #9aa0a6; white-space: nowrap; }
.task-due--soon { color: #f0b323; }
.task-due--overdue { color: #ff6b6b; font-weight: 600; }
/* ============================================================
Calendar — cuadrícula mensual de tasks (VA + admin)
Reutiliza los colores de estado de .task-status--* vía variables.
============================================================ */
.calendar { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }
.calendar__bar {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.calendar__nav { display: flex; align-items: center; gap: 6px; }
.calendar__navbtn {
width: 30px; height: 30px; border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04); color: #fff;
font-size: 16px; line-height: 1; cursor: pointer;
transition: background 0.15s ease;
}
.calendar__navbtn:hover { background: rgba(255, 255, 255, 0.10); }
.calendar__today {
height: 30px; padding: 0 12px; border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04); color: #fff;
font-size: 12px; cursor: pointer; transition: background 0.15s ease;
}
.calendar__today:hover { background: rgba(255, 255, 255, 0.10); }
.calendar__month {
margin: 0; font-size: 18px; font-weight: 600; color: #fff;
min-width: 160px;
}
.calendar__legend {
display: flex; gap: 14px; margin-left: auto; flex-wrap: wrap;
}
.cal-legend {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; color: rgba(255, 255, 255, 0.55);
}
/* Punto de estado: reutiliza la semántica de color de los estados. */
.cal-dot {
width: 8px; height: 8px; border-radius: 50%; display: inline-block;
background: rgba(255, 255, 255, 0.4);
}
.cal-dot--pending { background: #f0b54a; }
.cal-dot--in_progress { background: #4aa3f0; }
.cal-dot--completed { background: #4ad08a; }
.cal-dot__more { font-size: 10px; color: rgba(255, 255, 255, 0.5); margin-left: 2px; }
.calendar__weekdays,
.calendar__grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
/* La cuadrícula ocupa el alto restante de la página; 6 filas iguales que no
crecen con el contenido (todas las celdas del mismo tamaño). */
.calendar__grid {
flex: 1; min-height: 0;
grid-template-rows: repeat(6, minmax(0, 1fr));
}
.calendar__weekday {
text-align: center; font-size: 11px; text-transform: uppercase;
letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.4); padding-bottom: 2px;
}
.calendar__cell {
min-height: 76px; overflow: hidden; border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.05);
padding: 8px; display: flex; flex-direction: column; gap: 8px;
align-items: flex-start; cursor: pointer; text-align: left;
transition: background 0.15s ease, border-color 0.15s ease;
}
.calendar__cell:hover { background: rgba(255, 255, 255, 0.09); }
.calendar__cell.is-othermonth { opacity: 0.4; }
.calendar__cell.is-today { border-color: rgba(255, 255, 255, 0.5); }
.calendar__cell.is-overdue { border-color: rgba(240, 90, 90, 0.6); }
.calendar__daynum { font-size: 12px; color: rgba(255, 255, 255, 0.8); }
.calendar__dots { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* Eventos completos en la celda (píldora con título + color por estado). */
.calendar__cell { gap: 5px; }
.calendar__events { display: flex; flex-direction: column; gap: 3px; width: 100%; min-width: 0; }
.cal-event {
width: 100%; box-sizing: border-box; font-size: 10.5px; line-height: 1.35;
padding: 2px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; color: rgba(255, 255, 255, 0.92);
border-left: 3px solid rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.06);
}
.cal-event--pending { border-left-color: #f0b54a; background: rgba(240, 181, 74, 0.14); }
.cal-event--in_progress { border-left-color: #4aa3f0; background: rgba(74, 163, 240, 0.14); }
.cal-event--completed { border-left-color: #4ad08a; background: rgba(74, 208, 138, 0.12);
color: rgba(255, 255, 255, 0.5); text-decoration: line-through; }
.cal-event--overdue { border-left-color: #f05a5a; background: rgba(240, 90, 90, 0.16); }
.cal-event__more { font-size: 10px; color: rgba(255, 255, 255, 0.5); padding-left: 2px; }
/* Chip de VA en el listado del día. */
.cal-va-chip {
font-size: 11px; padding: 2px 8px; border-radius: 999px;
background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75);
}
/* ---- Filas del popup de día: hora a la izquierda + metadatos agrupados ---- */
.cal-day-time {
flex: none; min-width: 48px; font-size: 0.78rem;
font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.55);
}
.cal-day-time--none { color: rgba(255, 255, 255, 0.25); }
.cal-day-meta {
display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto;
}
/* Espaciado uniforme entre filas (solo manda el gap de .org-list). */
#calendar-day-modal #cal-day-list .task-card--compact { margin-bottom: 0; }
/* ---- Tasks: selector flatpickr + badge de recurrencia ---- */
.tk-date {
width: 100%; padding: 8px 10px; border-radius: 8px; cursor: pointer;
border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
color: inherit; font: inherit;
}
.task-recur {
font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
background: rgba(124,92,255,.16); color: #cbb9ff;
}
/* Repeat: check + opciones (periodo + until) que aparecen a la derecha al marcar. */
.am-field--recur { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.tk-recur-toggle-lbl { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.tk-recur-toggle-lbl input {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
width: 18px; height: 18px; margin: 0; flex: none;
border: 1.5px solid rgba(255, 255, 255, 0.25);
border-radius: 5px; background: rgba(255, 255, 255, 0.05);
cursor: pointer; position: relative;
transition: background .15s ease, border-color .15s ease;
}
.tk-recur-toggle-lbl input:hover { border-color: rgba(255, 255, 255, 0.45); }
.tk-recur-toggle-lbl input:focus-visible {
outline: none; box-shadow: 0 0 0 3px rgba(201, 95, 46, 0.35);
}
.tk-recur-toggle-lbl input:checked {
background: var(--accent, #C95F2E);
border-color: var(--accent, #C95F2E);
}
.tk-recur-toggle-lbl input:checked::after {
content: ""; position: absolute; left: 50%; top: 45%;
width: 4px; height: 8px; box-sizing: border-box;
border: solid #fff; border-width: 0 2px 2px 0;
transform: translate(-50%, -50%) rotate(45deg);
}
.tk-recur-opts { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px; }
.tk-recur-opts[hidden] { display: none; }
.tk-recur-until { font-size: 12px; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
.tk-recur-opts .dropdown { flex-shrink: 0; }
.tk-recur-opts .tk-date { flex: 1; min-width: 110px; }
/* ---- Imágenes adjuntas a tasks ---- */
.task-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.task-imgs__empty { color: rgba(255, 255, 255, 0.5); font-size: 12px; margin: 4px 0; }
.task-img { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.05); }
.task-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.task-imgs__actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.task-imgs__zip {
padding: 7px 14px; border-radius: 8px; border: none; cursor: pointer; font-size: 13px;
background: var(--accent, #C95F2E); color: #fff;
}
.task-img-count { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.7); white-space: nowrap; }
/* ====================================================
GALLERY — Folder-based navigation
Tabs: Tasks (task folders) / Gallery (all generations).
Tasks folder: list of task tiles + "Active only" toggle.
Task detail: numbered grid with rating badges.
==================================================== */
/* Tabs (Tasks / Gallery) — mirror the Models page tab styling */
.gallery-tabs {
display: flex; gap: 4px;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 20px;
}
.gallery-tab {
background: none; border: 0; border-bottom: 2px solid transparent;
color: var(--text-muted); font-family: inherit; font-size: 14px; font-weight: 500;
padding: 8px 14px; margin-bottom: -1px; cursor: pointer;
transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.gallery-tab:hover { color: var(--text-soft); }
.gallery-tab.is-active { color: #fff; border-bottom-color: #C95F2E; }
/* Fade + slide al cambiar de tab (o al entrar en la galería) */
@keyframes gf-tab-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
#gallery-folder-host.gf-anim { animation: gf-tab-in 0.28s var(--ease, ease) both; }
/* Tasks toolbar: "Active only" toggle pill */
.gf-toolbar {
display: flex; align-items: center; justify-content: flex-end;
margin-bottom: 16px;
}
.gf-toggle {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
color: var(--text-soft); font-family: inherit; font-size: 13px; font-weight: 500;
padding: 7px 13px; border-radius: 999px; cursor: pointer;
transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.gf-toggle:hover { background: rgba(255,255,255,0.07); color: #fff; }
.gf-toggle[aria-pressed="true"] {
background: rgba(201,95,46,0.16);
border-color: rgba(201,95,46,0.5);
color: #fff;
}
/* Breadcrumb */
.gf-breadcrumb {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.gf-crumb-sep {
color: rgba(255, 255, 255, 0.25);
font-size: 12px;
user-select: none;
}
.gf-crumb {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
}
.gf-crumb--link {
background: none;
border: none;
padding: 0;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: color 0.18s ease;
}
.gf-crumb--link:hover { color: rgba(255, 255, 255, 0.9); }
.gf-crumb--current { color: rgba(255, 255, 255, 0.85); }
/* Root / folders grid */
.gf-root { padding-top: 4px; }
.gf-folders {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
.gf-folder {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 22px 20px 20px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
cursor: pointer;
text-align: left;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.gf-folder:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(201, 95, 46, 0.35);
transform: translateY(-2px);
}
.gf-folder__icon {
color: var(--accent, #C95F2E);
opacity: 0.85;
}
.gf-folder__icon--task { color: rgba(255, 255, 255, 0.55); }
.gf-folder__name {
font-size: 14px;
font-weight: 600;
color: #fff;
line-height: 1.3;
}
.gf-task-code {
color: rgba(255, 255, 255, 0.45);
font-weight: 400;
}
.gf-folder__sub {
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 0.04em;
}
.gf-folder__count {
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
letter-spacing: 0.04em;
}
.gf-folders--tasks { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* Loading / empty states */
.gf-loading {
color: rgba(255, 255, 255, 0.45);
font-size: 13px;
padding: 24px 0;
}
.gf-empty {
margin: 0;
padding: 20px 0;
}
/* Indicador de carga genérico para listados (Tasks, Task Manager, Logs, Members).
Reutiliza la animación `auth-spin` definida más arriba. */
.list-loading {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 40px 0; color: rgba(255, 255, 255, 0.5); font-size: 13.5px;
}
.list-loading__spinner {
width: 16px; height: 16px; border-radius: 50%; flex: none;
border: 2px solid rgba(255, 255, 255, 0.18); border-top-color: #b9935a;
animation: auth-spin 0.7s linear infinite;
}
/* Task generation grid */
.gf-gen-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
padding-bottom: 24px;
}
/* Pager de las rejillas de generaciones (History + Task detail). Reutiliza .logs-pager.
Vive en #gallery-pager-host, que es un FOOTER fijo del área de galería (fuera del
contenedor que scrollea), así Prev/Next siempre se ven sin hacer scroll. */
#gallery-pager-host {
flex-shrink: 0;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#gallery-pager-host[hidden] { display: none; }
.gf-pager { margin: 0; }
.gf-gen-card {
display: flex;
flex-direction: column;
gap: 8px;
}
.gf-gen-thumb {
position: relative;
aspect-ratio: 4/5;
border-radius: 10px;
overflow: hidden;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
cursor: pointer;
}
/* Skeleton shimmer mientras carga la miniatura (blob autenticado, async).
Se muestra hasta que la ![]()
dispara load y añade .is-loaded. */
.gf-gen-thumb.is-loading::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0.04) 30%,
rgba(255, 255, 255, 0.10) 50%,
rgba(255, 255, 255, 0.04) 70%
);
background-size: 200% 100%;
animation: gf-skeleton 1.3s ease-in-out infinite;
}
@keyframes gf-skeleton {
0% { background-position: 150% 0; }
100% { background-position: -50% 0; }
}
/* Skeleton de página: tarjetas placeholder (loadHistoryPage / renderTaskDetail). El thumb
no es clicable y la fila de acciones se simula con una barra del mismo alto que los
botones Good/Bad (~24px) para que no haya salto al llegar las fotos reales. */
.gf-gen-card--skel .gf-gen-thumb { cursor: default; }
.gf-skel-bar {
display: block;
width: 100%;
height: 24px;
border-radius: 7px;
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0.04) 30%,
rgba(255, 255, 255, 0.10) 50%,
rgba(255, 255, 255, 0.04) 70%
);
background-size: 200% 100%;
animation: gf-skeleton 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.gf-gen-thumb.is-loading::after, .gf-skel-bar { animation: none; }
}
.gf-gen-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* Oculta el icono de imagen rota mientras no hay src; fade-in al cargar. */
opacity: 0;
transition: opacity 0.25s ease;
}
.gf-gen-img.is-loaded {
opacity: 1;
}
/* Sequence number badge */
.gf-gen-num {
position: absolute;
top: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.65);
color: rgba(255, 255, 255, 0.9);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
padding: 2px 6px;
border-radius: 6px;
font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
}
/* Video badge (bottom-left): marca las generaciones de vídeo (LTX) en la rejilla */
.gf-gen-vidbadge {
position: absolute;
bottom: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.65);
color: rgba(255, 255, 255, 0.9);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 999px;
pointer-events: none;
}
/* Rating badge */
.gf-rating {
position: absolute;
top: 8px;
right: 8px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 999px;
}
.gf-rating--unrated {
background: rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.55);
}
.gf-rating--good {
background: rgba(74, 208, 138, 0.18);
color: #4ad08a;
}
.gf-rating--bad {
background: rgba(240, 90, 90, 0.18);
color: #f05a5a;
}
/* Delete button (admin-only) — abajo-derecha del thumb, aparece al hover. */
.gf-gen-del {
position: absolute;
bottom: 8px;
right: 8px;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.15);
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
padding: 0;
z-index: 3;
transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.gf-gen-del:hover { background: var(--accent); border-color: var(--accent); }
.gf-gen-thumb:hover .gf-gen-del { display: flex; }
/* Rating buttons */
.gf-gen-actions {
display: flex;
gap: 6px;
}
.gf-rate-btn {
flex: 1;
padding: 5px 4px;
border-radius: 7px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.65);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.gf-rate-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.gf-rate-btn--good.is-active {
background: rgba(74, 208, 138, 0.18);
border-color: rgba(74, 208, 138, 0.4);
color: #4ad08a;
}
.gf-rate-btn--bad.is-active {
background: rgba(240, 90, 90, 0.18);
border-color: rgba(240, 90, 90, 0.4);
color: #f05a5a;
}
/* Folder host sits above the gallery uploads content in the DOM */
#gallery-folder-host {
margin-bottom: 4px;
}
@media (max-width: 800px) {
.gf-folders { grid-template-columns: 1fr 1fr; }
.gf-gen-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============ LoRA Trainer (Models page) ============ */
.model-row { width: 100%; text-align: left; cursor: pointer; background: none; border: 1px solid var(--border-medium, rgba(255,255,255,0.12)); }
.model-row:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.22); }
.model-row .org-member__info { flex: 1; }
.model-row__trigger { display: block; font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.trainer-badge {
font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
padding: 4px 10px; border-radius: 999px; white-space: nowrap;
border: 1px solid transparent;
}
.trainer-badge[data-status="none"] { color: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.18); }
.trainer-badge[data-status="training"]{ color: #e9a24b; border-color: rgba(233,162,75,0.4); background: rgba(233,162,75,0.1); }
.trainer-badge[data-status="ready"] { color: #5fcf8a; border-color: rgba(95,207,138,0.4); background: rgba(95,207,138,0.1); }
.trainer-badge[data-status="ready"]::after { content: " ✓"; }
.trainer-badge[data-status="failed"] { color: #e06a5a; border-color: rgba(224,106,90,0.4); background: rgba(224,106,90,0.1); }
/* Modal */
.trainer-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.trainer-modal[hidden] { display: none; }
.trainer-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.62); backdrop-filter: blur(3px); }
.trainer-modal__panel {
position: relative; width: min(1100px, 96vw); max-height: 92vh; overflow-y: auto;
background: #16120f; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;
padding: 30px 34px 26px; box-shadow: 0 24px 80px rgba(0,0,0,0.6);
scrollbar-width: thin; scrollbar-color: rgba(201,95,46,0.55) transparent;
}
.trainer-modal__panel::-webkit-scrollbar { width: 10px; }
.trainer-modal__panel::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
.trainer-modal__panel::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.14); border-radius: 999px;
border: 3px solid transparent; background-clip: padding-box;
}
.trainer-modal__panel::-webkit-scrollbar-thumb:hover {
background: rgba(201,95,46,0.65); background-clip: padding-box;
}
/* El popup de info de modelo tiene tamaño FIJO (no cambia con el nº de LoRAs);
ancho alineado con los modales de tasks/miembros para consistencia entre popups.
El scroll vive en la lista de LoRAs, no en el panel entero. */
#model-info-modal .trainer-modal__panel {
width: min(640px, 94vw);
height: min(700px, 90vh);
max-height: 90vh;
overflow: hidden;
display: flex; flex-direction: column;
}
#model-info-modal .trainer-section {
flex: 1; min-height: 0;
display: flex; flex-direction: column;
}
#modelinfo-loras { flex: 1; min-height: 0; overflow-y: auto; }
#model-info-modal .modelinfo__footer { margin-top: auto; }
/* ===== Tamaño uniforme para TODOS los popups de contenido =====
Petición: todos los popups del mismo tamaño. 640px ancho × alto fijo; lo que
sobra scrollea dentro del panel. Excluidos a propósito (no son diálogos de
contenido): visor de imágenes (lightbox), command palette y dropdown de
notificaciones. */
.trainer-modal__panel,
.member-modal__card,
.profile-modal__card,
.add-modal__card {
width: min(640px, 94vw) !important;
height: min(700px, 90vh) !important;
max-height: 90vh !important;
overflow-y: auto;
}
/* El popup de info de modelo conserva su scroll interno (lista de LoRAs) en vez
del scroll del panel entero. */
#model-info-modal .trainer-modal__panel { overflow: hidden; }
/* El trainer, con el entrenamiento en "Coming soon", tiene poco contenido (descripciones +
engine + import + footer): se ajusta a su altura y NO scrollea. Solo cae a scroll si de
verdad supera la pantalla (max-height 94vh, caso extremo en pantallas muy bajas). */
#model-train-modal .trainer-modal__panel {
height: auto !important;
max-height: 94vh !important;
overflow-y: auto;
}
.trainer-uploading {
/* `fixed` (no `absolute`): el panel `.trainer-modal__panel` scrollea (overflow-y:auto), y un
overlay absolute inset:0 se dimensiona solo al alto visible y queda anclado arriba del
contenido → al hacer scroll se va hacia arriba y deja de cubrir. Anclado al viewport cubre
siempre. Queda dentro del stacking context del modal (z-index 1200), sobre backdrop y panel. */
position: fixed; inset: 0; z-index: 5;
display: flex; align-items: center; justify-content: center;
background: rgba(10,8,6,0.78); backdrop-filter: blur(3px);
}
.trainer-uploading[hidden] { display: none; }
.trainer-uploading__box { width: min(340px, 80%); text-align: center; }
.trainer-uploading__spinner {
width: 40px; height: 40px; margin: 0 auto 16px; border-radius: 50%;
border: 3px solid rgba(255,255,255,0.15); border-top-color: var(--accent, #C95F2E);
animation: trainer-spin 0.8s linear infinite;
}
@keyframes trainer-spin { to { transform: rotate(360deg); } }
.trainer-uploading__label { font-size: 14px; color: #fff; margin: 0 0 12px; font-weight: 600; }
.trainer-uploading__track { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.trainer-uploading__fill { display: block; height: 100%; width: 0%; background: var(--accent, #C95F2E); border-radius: 999px; transition: width 0.2s ease; }
/* Fase "Processing…": la subida ya entregó todos los bytes pero el servidor sigue guardando el
.safetensors en storage y no hay % real → barra INDETERMINADA (un tramo que barre de lado a
lado) en vez de una barra llena y estática que parece colgada. */
.trainer-uploading__track.is-indeterminate .trainer-uploading__fill {
width: 38%; transition: none; animation: trainer-indeterminate 1.1s ease-in-out infinite;
}
@keyframes trainer-indeterminate { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.trainer-modal__close {
position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border-radius: 8px;
background: none; border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.7);
font-size: 18px; line-height: 1; cursor: pointer;
}
.trainer-modal__close:hover { background: rgba(255,255,255,0.06); color: #fff; }
/* En el trainer (panel con scroll propio) la × se queda fija arriba-derecha al hacer
scroll. Scoped a #model-train-modal: el #model-info-modal usa panel flex-column y la
× debe seguir absoluta. */
#model-train-modal .trainer-modal__close {
position: sticky; float: right; top: 14px; right: auto;
margin: -16px -18px 8px 0; z-index: 7;
background: #16120f;
}
.trainer-attrs__save { display: flex; align-items: center; gap: 12px; }
.trainer-attrs__hint { font-size: 12px; color: rgba(255,255,255,0.45); }
#trainer-attrs-save { transition: border-color .2s ease, color .2s ease, background .2s ease; }
#trainer-attrs-save.is-saving { opacity: 0.7; cursor: default; }
#trainer-attrs-save.is-saved {
border-color: #5fbf6a; color: #5fbf6a; background: rgba(95,191,106,0.10);
animation: attrs-pop 0.35s ease;
}
@keyframes attrs-pop {
0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); }
}
.trainer-attrs__ok {
font-size: 12px; color: #5fbf6a; font-weight: 600;
opacity: 0; transform: translateY(4px); pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
}
.trainer-attrs__ok.is-show { opacity: 1; transform: translateY(0); }
.trainer-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding-right: 36px; }
.trainer-modal__eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent, #C95F2E); }
.trainer-modal__title { font-size: 22px; margin: 2px 0 0; color: #fff; }
/* Nombre editable de la LoRA en modo "new" (mismo trainer, creación) */
.trainer-loraname { margin-top: 8px; max-width: 320px; font-size: 16px; }
.trainer-section { margin-bottom: 18px; }
.trainer-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.trainer-section__label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.82); }
.trainer-opt { font-weight: 400; color: rgba(255,255,255,0.4); }
.trainer-req { font-weight: 400; color: #e9a24b; }
.trainer-hint { font-size: 12px; color: rgba(255,255,255,0.45); margin: 0 0 10px; line-height: 1.5; }
.trainer-add {
font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer;
border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.85);
}
.trainer-add:hover { background: rgba(255,255,255,0.06); border-color: var(--accent, #C95F2E); }
.trainer-add.is-busy { opacity: 0.5; pointer-events: none; }
.trainer-input {
width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 14px;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); color: #fff;
}
.trainer-input:focus { outline: none; border-color: var(--accent, #C95F2E); }
.trainer-textarea { resize: vertical; min-height: 84px; font-family: inherit; line-height: 1.5; }
.trainer-select {
width: 100%; padding: 10px 36px 10px 12px; border-radius: 10px; font-size: 14px;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); color: #fff;
font-family: inherit; cursor: pointer;
-webkit-appearance: none; -moz-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.55)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center;
}
.trainer-select:focus { outline: none; border-color: var(--accent, #C95F2E); }
.trainer-select option { background: #1a1613; color: #fff; }
.trainer-drop {
position: relative; border: 1.5px dashed rgba(255,255,255,0.16); border-radius: 12px;
padding: 12px; min-height: 96px; transition: border-color .15s, background .15s;
}
.trainer-drop.is-drag { border-color: var(--accent, #C95F2E); background: rgba(201,95,46,0.08); }
.trainer-drop.is-empty .trainer-grid { display: none; }
.trainer-drop__hint {
display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
font-size: 13px; color: rgba(255,255,255,0.4); pointer-events: none; text-align: center; padding: 12px;
}
.trainer-drop.is-empty .trainer-drop__hint { display: flex; }
.trainer-drop.is-drag .trainer-drop__hint { color: var(--accent, #C95F2E); }
.trainer-grid { display: flex; flex-direction: column; gap: 8px; }
.trainer-tile {
display: flex; flex-direction: row; align-items: center; gap: 12px;
padding: 8px; border-radius: 12px; background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
}
.trainer-tile__thumb {
position: relative; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 9px;
overflow: hidden; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
}
.trainer-tile__thumb img { width: 100%; height: 100%; object-fit: cover; }
.trainer-tile__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: rgba(255,255,255,0.35); }
.trainer-tile__cap {
flex: 1 1 auto; min-width: 0; font-size: 13px; padding: 10px 12px; border-radius: 9px;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #fff;
}
.trainer-tile__cap:focus { outline: none; border-color: var(--accent, #C95F2E); }
.trainer-tile__del {
flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.65); font-size: 16px; line-height: 1; cursor: pointer; transition: all 0.15s;
}
.trainer-tile__del:hover { background: #e06a5a; border-color: #e06a5a; color: #fff; }
.trainer-progress { margin: 14px 0; }
.trainer-progress__track { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
.trainer-progress__fill { display: block; height: 100%; width: 2%; background: var(--accent, #C95F2E); border-radius: 999px; transition: width 0.4s ease; }
.trainer-progress__label { display: block; font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 6px; }
.trainer-error { font-size: 13px; color: #e06a5a; margin: 6px 0 0; }
.trainer-note { font-size: 12.5px; color: rgba(255,255,255,0.55); margin: 8px 0 0; text-align: center; }
.trainer-note[hidden] { display: none; }
.trainer-coming-soon {
display: flex; align-items: flex-start; gap: 12px;
margin: 0 0 20px; padding: 14px 16px; border-radius: 12px;
background: rgba(201,95,46,0.08); border: 1px solid rgba(201,95,46,0.30);
}
.trainer-coming-soon[hidden] { display: none; }
.trainer-coming-soon__badge {
flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
padding: 4px 9px; border-radius: 999px; white-space: nowrap;
color: var(--accent, #C95F2E); background: rgba(201,95,46,0.14); border: 1px solid rgba(201,95,46,0.45);
}
.trainer-coming-soon__text { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.72); }
.trainer-coming-soon__text code { font-size: 11px; background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 4px; }
.trainer-footer {
margin-top: 22px; padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.10);
display: flex; flex-direction: column; gap: 14px;
}
.trainer-footer .trainer-actions { margin-top: 0; }
.trainer-actions { margin-top: 18px; }
.trainer-start {
width: 100%; padding: 13px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer;
background: var(--accent, #C95F2E); border: none; color: #fff; transition: opacity 0.2s;
}
.trainer-start:hover:not(:disabled) { opacity: 0.9; }
.trainer-lora__row { display: flex; gap: 8px; flex-wrap: wrap; }
.trainer-secondary {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 9px;
border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); background: none;
}
.trainer-secondary[hidden] { display: none; }
.trainer-secondary:hover { background: rgba(255,255,255,0.06); border-color: var(--accent, #C95F2E); }
.trainer-secondary.is-busy { opacity: 0.5; pointer-events: none; }
.trainer-hint code { font-size: 11px; background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 4px; }
.trainer-start:disabled { opacity: 0.4; cursor: not-allowed; }
/* ============ Trainer como PÁGINA (#page-train) + buckets del dataset ============ */
/* .studio-main tiene overflow:hidden y height:100vh; el contenido del trainer
(dataset + atributos + engine + entrenar) puede superar el viewport, así que
la propia página scrollea dentro del alto disponible (a diferencia de otras
.page, aquí no hay un contenedor interno con overflow). */
#page-train { overflow-y: auto; padding-bottom: 24px; }
.trainer-page { max-width: 920px; margin: 0 auto; }
.trainer-page__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.trainer-back {
cursor: pointer; font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: 9px;
border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.82); background: none;
}
.trainer-back:hover { background: rgba(255,255,255,0.06); border-color: var(--accent, #C95F2E); }
/* Bloques (buckets) del dataset: cada uno su etiqueta, cupo y su +Add / drop */
.trainer-buckets { display: flex; flex-direction: column; gap: 12px; }
.trainer-bucket {
border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
background: rgba(255,255,255,0.02); padding: 10px 12px 12px;
}
.trainer-bucket__head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.trainer-bucket__label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); }
.trainer-bucket__count { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; }
.trainer-bucket__count b { color: #e9a24b; font-weight: 700; }
.trainer-bucket__add { margin-left: auto; }
.trainer-bucket__drop { min-height: 72px; }
.trainer-bucket__drop.is-empty { min-height: 64px; }
/* ============ LTX i2v: dropzone de imagen de partida ============ */
.ltx-drop {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; text-align: center; cursor: pointer; padding: 18px 14px; min-height: 104px;
border: 1.5px dashed rgba(255,255,255,0.16); border-radius: 12px;
background: rgba(255,255,255,0.02); transition: border-color .15s, background .15s;
}
.ltx-drop:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.04); }
.ltx-drop:focus-visible { outline: none; border-color: var(--accent, #C95F2E); }
.ltx-drop.is-drag { border-color: var(--accent, #C95F2E); background: rgba(201,95,46,0.08); }
.ltx-drop__icon { color: rgba(255,255,255,0.45); }
.ltx-drop.is-drag .ltx-drop__icon { color: var(--accent, #C95F2E); }
.ltx-drop__title { font-size: 13px; color: rgba(255,255,255,0.75); }
.ltx-drop__sub { font-size: 11px; color: rgba(255,255,255,0.4); }
/* Con imagen subida: la miniatura rellena la propia zona de drag & drop. */
.ltx-drop.has-preview {
min-height: 0; padding: 10px; position: relative; overflow: hidden;
border-style: solid; border-color: rgba(255,255,255,0.16);
}
.ltx-drop.has-preview:hover { background: rgba(255,255,255,0.02); }
.ltx-drop.has-preview .ltx-drop__title,
.ltx-drop.has-preview .ltx-drop__icon { display: none; }
.ltx-drop__preview-img {
display: block; width: auto; max-width: 100%; height: 96px;
margin: 0 auto; object-fit: contain; border-radius: 8px;
}
.ltx-drop__preview-remove {
position: absolute; top: 8px; right: 8px; z-index: 2;
width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%;
cursor: pointer; background: rgba(0,0,0,0.62); color: #fff;
font-size: 16px; line-height: 1;
display: flex; align-items: center; justify-content: center;
transition: background .15s;
}
.ltx-drop__preview-remove:hover { background: rgba(0,0,0,0.85); }
.ltx-gallery-link {
display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer;
border: 1px solid rgba(255,255,255,.18); border-radius: 7px;
background: rgba(255,255,255,.04); color: inherit;
}
.ltx-gallery-link:hover { background: rgba(255,255,255,.08); }
/* ============ Prepare studio (warmup) chip ============ */
/* Botón "Prepare" dentro de cada card del selector de engine (span role=button). Pill compacta
a la derecha; dispara el warmup de ESE engine. */
.engine-card__prep {
/* position:relative para quedar por ENCIMA del .engine-card::before (absolute inset:0), que si
no intercepta el clic y este nunca llega al botón — igual que hace .engine-card__body. */
position: relative; z-index: 1;
justify-self: end; align-self: center; white-space: nowrap; text-align: center;
min-width: 84px; /* mismo ancho aunque el texto cambie (Prepare/Cancel/Stop) -> bordes alineados */
padding: 5px 12px; border-radius: 999px; cursor: pointer;
font-size: 11.5px; font-weight: 600;
border: 1px solid var(--accent, #C95F2E); color: #fff; background: rgba(201,95,46,0.18);
transition: background .15s, opacity .15s;
}
.engine-card__prep:hover { background: rgba(201,95,46,0.3); }
/* warming/ready: pasa a secundaria (Stop/Cancel), sin el acento. */
.engine-card__prep.is-secondary {
border-color: rgba(255,255,255,0.25); background: none; color: rgba(255,255,255,0.75);
}
.engine-card__prep.is-secondary:hover { background: rgba(255,255,255,0.07); }
.engine-card__prep.is-disabled { opacity: .4; cursor: default; pointer-events: none; }
/* Card "bloqueada" = hay OTRO engine preparado o preparándose (una máquina por usuario). Con uno
activo NO se puede cambiar de engine: la card se atenúa y no responde (pointer-events none), y su
botón Prepare tampoco. Para cambiar hay que parar el activo primero (su botón = Stop/Cancel). */
.engine-card.is-locked { opacity: .5; pointer-events: none; }
.studio-prep {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; align-self: center;
margin: 0; max-width: 440px; padding: 8px 14px; border-radius: 12px;
border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03);
}
.studio-prep__bar { width: 100%; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; margin-top: 2px; display: none; }
.studio-prep[data-state="warming"] .studio-prep__bar,
.studio-prep[data-state="ready"] .studio-prep__bar { display: block; }
.studio-prep__fill { display: block; height: 100%; width: 0; background: var(--accent, #C95F2E); border-radius: 999px; transition: width 0.6s ease; }
.studio-prep[data-state="ready"] .studio-prep__fill { background: #5fcf8a; }
.studio-prep__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: rgba(255,255,255,0.4); }
.studio-prep[data-state="warming"] .studio-prep__dot { background: #e9a24b; animation: prep-pulse 1.2s ease-in-out infinite; }
.studio-prep[data-state="ready"] .studio-prep__dot { background: #5fcf8a; box-shadow: 0 0 8px rgba(95,207,138,0.6); }
@keyframes prep-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.studio-prep__label { flex: 1; font-size: 12px; color: rgba(255,255,255,0.7); }
.studio-prep__btn {
font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 8px; cursor: pointer;
border: 1px solid var(--accent, #C95F2E); color: #fff; background: rgba(201,95,46,0.18);
}
.studio-prep__btn:hover { background: rgba(201,95,46,0.3); }
.studio-prep[data-state="ready"] .studio-prep__btn,
.studio-prep[data-state="warming"] .studio-prep__btn { border-color: rgba(255,255,255,0.2); background: none; color: rgba(255,255,255,0.7); }
/* ===== Models & LoRAs ===== */
/* Generic .btn utility (base + small variant) — referenced by .lora-new-btn */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
border: 1px solid var(--border-medium); border-radius: 8px;
background: rgba(255,255,255,0.04); color: var(--text-soft);
font-family: inherit; font-size: 13px; font-weight: 600;
padding: 8px 14px; cursor: pointer;
transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.28); color: #fff; }
.btn--sm { font-size: 12px; padding: 6px 12px; border-radius: 7px; }
/* --- Model card (one card per model identity in #models-list) --- */
.model-card {
background: #131316;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: 16px 18px;
margin-bottom: 12px;
}
.model-card__head {
display: flex; align-items: center; gap: 12px;
margin-bottom: 12px;
}
.model-card__name {
font-size: 15px; font-weight: 600; color: #fff;
}
/* LoRA count chip on a model identity card (Models tab) */
.model-card__count {
margin-left: auto;
font-size: 11px; color: var(--text-muted);
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
/* --- Models & LoRAs tabs --- */
.models-tabs {
display: flex; gap: 4px;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 20px;
}
/* Breathing room between the create form and the list in each tab panel */
.models-tabpanel .model-create { margin-bottom: 18px; }
.models-tabpanel .org-list { margin-top: 4px; }
.models-tab {
background: none; border: 0; border-bottom: 2px solid transparent;
color: var(--text-muted); font-family: inherit; font-size: 14px; font-weight: 500;
padding: 8px 14px; margin-bottom: -1px; cursor: pointer;
transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.models-tab:hover { color: var(--text-soft); }
.models-tab.is-active { color: #fff; border-bottom-color: #C95F2E; }
/* Model picker on the "Add LoRA" form: custom dropdown fills the row next to the button */
.model-create__dropdown { flex: 1 1 auto; min-width: 200px; }
/* Flat LoRA list (LoRAs tab): each row is a standalone card-ish item */
#loras-list .lora-row {
border: 1px solid rgba(255,255,255,0.07);
background: #131316;
margin-bottom: 8px; padding: 12px 14px;
}
.lora-row__model {
font-size: 11px; color: var(--text-muted); text-transform: uppercase;
letter-spacing: 0.04em; white-space: nowrap;
}
/* Model identity cards are clickable buttons (open the info modal) */
.model-card--btn {
display: block; width: 100%; text-align: left;
font-family: inherit; cursor: pointer;
transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.model-card--btn:hover { border-color: rgba(185,147,90,0.4); background: #16161a; }
.model-card--btn .model-card__head { margin-bottom: 0; }
.model-card.is-inactive { opacity: 0.5; }
.model-card__inactive {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
color: #e07a5a; border: 1px solid rgba(224,122,90,0.4);
border-radius: 999px; padding: 2px 8px;
}
/* --- Skeleton placeholders (Models & LoRAs lists, while loading) --- */
.sk-card, .sk-row { pointer-events: none; }
.sk {
display: inline-block; height: 13px; border-radius: 6px;
background: linear-gradient(100deg,
rgba(255,255,255,0.05) 30%,
rgba(255,255,255,0.12) 50%,
rgba(255,255,255,0.05) 70%);
background-size: 200% 100%;
animation: skShimmer 1.3s ease-in-out infinite;
}
.sk--avatar { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; }
.sk--name { width: 38%; }
.sk--count { width: 56px; height: 18px; border-radius: 999px; margin-left: auto; }
.sk--model { width: 70px; }
.sk--badge { width: 78px; height: 24px; border-radius: 999px; }
@keyframes skShimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
/* Avatar that shows an uploaded image instead of a letter */
.org-member__avatar--img { overflow: hidden; padding: 0; }
.org-member__avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* --- Model info modal --- */
.modelinfo__head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; padding-right: 44px; }
.modelinfo__avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.modelinfo__avatar {
width: 84px; height: 84px; border-radius: 16px;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
display: flex; align-items: center; justify-content: center;
font-size: 30px; font-weight: 600; color: #fff; overflow: hidden;
}
.modelinfo__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modelinfo__avatar-btn {
font-size: 11px; color: var(--text-soft); cursor: pointer;
border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; padding: 4px 10px;
}
.modelinfo__avatar-btn:hover { color: #fff; border-color: rgba(185,147,90,0.5); }
.modelinfo__avatar-btn.is-busy { opacity: 0.5; pointer-events: none; }
.modelinfo__headinfo { flex: 1; min-width: 0; }
.modelinfo__name {
display: block; width: 100%;
background: none; border: 0; border-bottom: 1px solid transparent;
color: #fff; font-size: 22px; font-weight: 600; font-family: inherit;
padding: 2px 0; margin: 4px 0; outline: none;
}
.modelinfo__name:hover { border-bottom-color: rgba(255,255,255,0.12); }
.modelinfo__name:focus { border-bottom-color: #C95F2E; }
.modelinfo__meta { font-size: 12px; color: var(--text-muted); }
.modelinfo__lora-form { margin-top: 12px; }
.modelinfo__footer {
display: flex; justify-content: space-between; gap: 12px;
margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08);
}
.modelinfo__toggle {
background: none; border: 1px solid rgba(224,122,90,0.45); color: #e07a5a;
border-radius: 8px; padding: 8px 16px; font-size: 13px; font-family: inherit; cursor: pointer;
transition: background 0.15s var(--ease);
}
.modelinfo__toggle:hover { background: rgba(224,122,90,0.1); }
/* Borrado (destructivo): rojo, separado del toggle a la izquierda del footer. */
.modelinfo__delete {
background: none; border: 1px solid rgba(229,72,77,0.45); color: #e5484d;
border-radius: 8px; padding: 8px 16px; font-size: 13px; font-family: inherit; cursor: pointer;
transition: background 0.15s var(--ease);
}
.modelinfo__delete:hover { background: rgba(229,72,77,0.12); }
/* --- Avatar cropper (recorte de foto de perfil de la modelo) --- */
.cropper-modal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; }
.cropper-modal[hidden] { display: none; }
.cropper__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(3px); }
.cropper__panel {
position: relative; width: min(380px, 92vw);
background: #16120f; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;
padding: 22px; box-shadow: 0 24px 80px rgba(0,0,0,0.6);
display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.cropper__title { font-size: 16px; font-weight: 600; color: #fff; margin: 0; align-self: flex-start; }
.cropper__stage {
width: 320px; height: 320px; max-width: 78vw; max-height: 78vw;
border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14);
background: #000; touch-action: none; cursor: grab;
}
.cropper__stage:active { cursor: grabbing; }
.cropper__canvas { display: block; width: 100%; height: 100%; }
.cropper__zoom { display: flex; align-items: center; gap: 10px; width: 100%; font-size: 12px; color: var(--text-soft); }
.cropper__zoom input[type="range"] { flex: 1; accent-color: #C95F2E; }
.cropper__actions { display: flex; justify-content: flex-end; gap: 10px; width: 100%; }
.cropper__btn {
background: #C95F2E; border: 0; border-radius: 8px; color: #fff;
padding: 8px 18px; font-size: 14px; font-family: inherit; cursor: pointer;
}
.cropper__btn:hover { filter: brightness(1.08); }
.cropper__btn--ghost { background: none; border: 1px solid rgba(255,255,255,0.16); color: var(--text-soft); }
.cropper__btn--ghost:hover { color: #fff; }
/* LoRA list — subtle left border shows nesting under the model */
.model-card__loras {
display: flex; flex-direction: column; gap: 4px;
border-left: 2px solid rgba(201,95,46,0.25);
padding-left: 12px;
margin-bottom: 12px;
}
/* Clickable LoRA row — button reset + same language as .org-member / .model-row */
.lora-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; text-align: left;
background: none; border: 1px solid transparent;
border-radius: 9px; padding: 8px 10px;
color: var(--text-soft); font-family: inherit; font-size: 13px;
cursor: pointer;
transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.lora-row:hover {
background: rgba(255,255,255,0.04);
border-color: rgba(185,147,90,0.35);
}
.lora-row__name {
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: #fff; font-weight: 500;
}
/* "+ New LoRA" row */
.model-card__actions {
display: flex; align-items: center; gap: 8px;
padding-top: 4px;
}
/* Inline text input for new LoRA name — matches .am-field input / .trainer-input */
.lora-new-input {
flex: 1; min-width: 0;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px; color: #fff; padding: 7px 11px; font-size: 13px;
font-family: inherit; outline: none;
}
.lora-new-input:focus { border-color: rgba(201,95,46,0.55); }
.lora-new-input::placeholder { color: var(--text-faint); }
/* --- Member modal — Models tab access tree --- */
/* Group block per model in the member's Models tab */
.mm-model {
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mm-model:last-child { border-bottom: none; }
/* Model heading — small, uppercase, muted; like .org-section__label */
.mm-model__name {
display: block;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin-bottom: 6px;
}
/* --- Add-member modal — model/LoRA access checkboxes --- */
/* Group block per model */
.am-model {
display: flex; flex-direction: column; gap: 4px;
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.am-model:last-child { border-bottom: none; }
/* Model label */
.am-model__name {
font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.75);
margin-bottom: 2px;
}
/* Checkbox row — flex so checkbox + label sit in one line */
.am-model__lora {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--text-soft);
padding: 4px 0; cursor: pointer;
}
.am-model__lora:hover { color: #fff; }
.am-model__lora input[type="checkbox"] {
width: 15px; height: 15px; flex: none;
margin: 0; accent-color: #b9935a; cursor: pointer;
}
/* --- Generate page — Model / LoRA fields --- */
/* Labeled field that groups a small caption above its dropdown.
"Model" sits above the identity selector; "LoRA" above the LoRA selector,
separated for clarity. */
.lora-field {
margin-top: 14px;
}
.lora-field:first-of-type {
margin-top: 0;
}
.lora-field[hidden] { display: none; }
.lora-field__label {
display: block;
margin-bottom: 6px;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-faint);
font-weight: 600;
}
/* --- Generate page — LoRA warning --- */
/* Muted caution note shown when identity has no trained LoRA */
.lora-warning {
margin: 6px 0 0;
font-size: 11px; line-height: 1.4;
color: rgba(233,162,75,0.85); /* amber, matches .trainer-badge[data-status="training"] */
font-style: italic;
}
.lora-warning[hidden] { display: none; }
/* --- Generate page — ruedita de atributos de identidad (admin-only) --- */
.lora-config-btn {
display: inline-flex; align-items: center; gap: 7px;
margin-top: 10px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.03);
color: rgba(255,255,255,0.8); font-size: 12px; font-weight: 600;
transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.lora-config-btn:hover { border-color: var(--accent); color: var(--accent); }
.lora-config-btn svg { display: block; }
.lora-config-btn[hidden] { display: none; }
/* Fila: selector de Model (crece) + el icono ⚙ de Identity attributes a su lado. */
.lora-field__control { display: flex; align-items: center; gap: 8px; }
.lora-field__control .dropdown { flex: 1 1 auto; min-width: 0; }
/* Variante SOLO ICONO del botón de identity attributes, cuadrado, junto al selector. */
.lora-config-btn--icon {
flex: none; margin-top: 0; gap: 0; padding: 0;
width: 34px; height: 34px; justify-content: center;
}
/* Fail-closed: nunca visible para VAs, aunque el JS fallara al ocultarlo. */
html:not(.is-admin) .lora-config-btn { display: none !important; }
/* Modal de atributos: panel más estrecho que el trainer (reutiliza .trainer-modal). */
.lora-config__panel { width: min(520px, 94vw); padding: 26px 28px 22px; }
.loracfg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.loracfg-chip {
padding: 7px 14px; border-radius: 999px; cursor: pointer;
border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.03);
color: rgba(255,255,255,0.78); font-size: 13px; font-weight: 600;
transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.loracfg-chip:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.loracfg-chip.is-active {
border-color: var(--accent); color: var(--accent);
background: rgba(201,95,46,0.12);
}
#loracfg-save { transition: border-color .2s ease, color .2s ease, background .2s ease; }
#loracfg-save.is-saving { opacity: 0.7; cursor: default; }
#loracfg-save.is-saved {
border-color: #5fbf6a; color: #5fbf6a; background: rgba(95,191,106,0.10);
animation: attrs-pop 0.35s ease;
}
/* --- Generate page — "in her room" scene toggle (solo LoRA de ejemplo) --- */
.scene-toggle { margin-top: 12px; }
.scene-toggle[hidden] { display: none; }
.scene-toggle__label {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 13px;
color: var(--text-soft);
user-select: none;
}
.scene-toggle__label input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 16px; height: 16px;
margin: 0;
border: 1px solid var(--border-medium);
border-radius: 4px;
background: transparent;
cursor: pointer;
position: relative;
transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.scene-toggle__label input[type="checkbox"]:hover { border-color: var(--text-soft); }
.scene-toggle__label input[type="checkbox"]:checked {
background: #C95F2E;
border-color: #C95F2E;
}
.scene-toggle__label input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 5px; top: 2px;
width: 4px; height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.scene-toggle__label input[type="checkbox"]:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(201, 95, 46, 0.4);
}
/* ── Duration slider (LTX video) ───────────────────────────────────── */
.duration-field { --pct: 50%; }
.duration-field__head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 10px;
}
.duration-field__value {
display: inline-flex; align-items: baseline; gap: 1px;
padding: 3px 10px;
border-radius: 999px;
background: rgba(201, 95, 46, 0.16);
border: 1px solid rgba(201, 95, 46, 0.35);
color: var(--accent);
font-weight: 700;
font-variant-numeric: tabular-nums;
font-size: 14px; line-height: 1.2;
}
.duration-field__unit { font-size: 11px; font-weight: 600; opacity: .8; }
.duration-field__presets {
display: flex; gap: 6px;
margin-bottom: 12px;
}
.duration-preset {
flex: 1;
padding: 6px 0;
border-radius: 8px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
color: rgba(255,255,255,.62);
font: inherit; font-size: 12px; font-weight: 600;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.duration-preset:hover {
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.9);
}
.duration-preset.is-active {
background: rgba(201, 95, 46, 0.18);
border-color: rgba(201, 95, 46, 0.45);
color: var(--accent);
}
.duration-slider {
-webkit-appearance: none; appearance: none;
width: 100%; height: 6px; margin: 4px 0; padding: 0;
border-radius: 999px;
background:
linear-gradient(to right, var(--accent) 0%, var(--accent) var(--pct),
rgba(255,255,255,.12) var(--pct), rgba(255,255,255,.12) 100%);
cursor: pointer;
outline: none;
transition: filter .15s ease;
}
.duration-slider:hover { filter: brightness(1.08); }
/* WebKit thumb */
.duration-slider::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--accent);
box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 0 0 rgba(201,95,46,.45);
transition: box-shadow .18s ease, transform .12s ease;
}
.duration-slider:hover::-webkit-slider-thumb { transform: scale(1.06); }
.duration-slider:active::-webkit-slider-thumb,
.duration-slider:focus-visible::-webkit-slider-thumb {
box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 0 6px rgba(201,95,46,.22);
}
/* Firefox thumb + track */
.duration-slider::-moz-range-thumb {
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--accent);
box-shadow: 0 2px 6px rgba(0,0,0,.45);
transition: box-shadow .18s ease, transform .12s ease;
}
.duration-slider:active::-moz-range-thumb,
.duration-slider:focus-visible::-moz-range-thumb {
box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 0 6px rgba(201,95,46,.22);
}
.duration-slider::-moz-range-track {
height: 6px; border-radius: 999px; background: rgba(255,255,255,.12);
}
.duration-slider::-moz-range-progress {
height: 6px; border-radius: 999px; background: var(--accent);
}
.duration-field__ticks {
display: flex; justify-content: space-between;
margin-top: 7px;
font-size: 10px; letter-spacing: .04em;
color: rgba(255,255,255,.38);
font-variant-numeric: tabular-nums;
}
/* ---- Desglose de coste de licencias (Members + modal Add member) ---- */
.org-billing {
margin: 2px 0 16px; padding: 10px 14px;
border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
background: rgba(255,255,255,.03);
font-size: 13px; color: rgba(255,255,255,.7);
}
.org-billing b { color: #fff; font-weight: 600; }
.am-billing {
margin: -4px 0 14px; font-size: 12.5px; color: rgba(255,255,255,.62);
font-variant-numeric: tabular-nums;
}
.am-billing b { color: #fff; font-weight: 600; }
.am-billing__delta { color: var(--accent, #c9a227); font-weight: 600; }
/* ---- Botón "Select your style" + popup de LoRAs de estilo (JET Onyx Upgraded/Reference) ---- */
.style-select-btn {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 11px 14px; border-radius: 12px; cursor: pointer; font: inherit; text-align: left;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #fff;
transition: border-color .15s ease, background .15s ease;
}
.style-select-btn:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22); }
.style-select-btn__label { font-weight: 600; }
.style-select-btn__count { margin-left: auto; font-size: 13px; color: rgba(255,255,255,0.45); }
.style-select-btn__count.has-selection { color: var(--accent); }
.style-select-btn__arrow { color: rgba(255,255,255,0.5); flex: none; }
/* El popup reusa .trainer-modal (backdrop + panel + close) para el estilo de plataforma. */
.style-modal__panel { width: min(760px, 94vw); max-height: 84vh; overflow-y: auto; }
.style-modal__hint { margin: -6px 0 16px; font-size: 13px; color: rgba(255,255,255,0.55); }
.style-modal__body { min-height: 40px; }
.style-modal__actions { display: flex; justify-content: flex-end; margin-top: 22px; }
/* Modo prepare: "Prepare studio" arriba a la derecha (a la izquierda de la ×), no al pie. */
.style-modal--prepare .style-modal__actions {
position: absolute; top: 11px; right: 56px; margin-top: 0; z-index: 2;
}
.style-modal--prepare .trainer-modal__head { padding-right: 210px; }
.style-modal__done {
padding: 10px 28px; border-radius: 10px; border: none; cursor: pointer;
background: var(--accent); color: #fff; font-weight: 600; font-size: 14px;
transition: filter .15s ease;
}
.style-modal__done:hover { filter: brightness(1.08); }
/* El popup de estilo debe AJUSTARSE al contenido (el .trainer-modal__panel base fuerza
height:700px !important; lo overrideamos como hacen el trainer/otros modales) + cards uniformes. */
#style-modal .trainer-modal__panel {
width: min(920px, 94vw) !important;
height: auto !important;
max-height: 88vh !important;
}
.style-modal__body .krea2-loras {
grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
gap: 12px;
}
/* Todas las cards MISMO tamaño: min-height fijo + head centrado, así el nombre de 1 o 2 líneas
(p.ej. "Emotion Enhancer") ocupa igual y la rejilla no se descuadra. */
.style-modal__body .krea2-lora-card {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 66px;
}
/* Card skeleton del popup de estilo (mientras carga el catálogo de LoRAs): mismo tamaño que una
card real + shimmer, para que el popup nunca se abra vacío. Reusa @keyframes skShimmer. */
.krea2-lora-skel {
min-height: 66px;
border-radius: 12px;
border: 1px solid var(--border-medium);
background: linear-gradient(100deg,
rgba(255,255,255,0.045) 30%,
rgba(255,255,255,0.11) 50%,
rgba(255,255,255,0.045) 70%);
background-size: 200% 100%;
animation: skShimmer 1.3s ease-in-out infinite;
pointer-events: none;
}
/* ============ Onboarding wizard (guided tour: TOC + screenshots) ============ */
.onboarding{
position:fixed; inset:0; z-index:1200;
display:flex; align-items:center; justify-content:center;
padding:24px; opacity:0; pointer-events:none;
transition:opacity .2s ease;
}
.onboarding.is-open{ opacity:1; pointer-events:auto; }
body.onb-open{ overflow:hidden; }
.onboarding__backdrop{
position:absolute; inset:0;
background:rgba(8,6,4,.7); backdrop-filter:blur(5px);
}
.onboarding__card{
position:relative; z-index:1;
display:flex; width:min(1200px,93vw); height:min(860px,92vh);
background:#141110; border:1px solid rgba(255,255,255,.09);
border-radius:18px; overflow:hidden;
box-shadow:0 30px 90px rgba(0,0,0,.6);
color:#f2ece3;
}
.onboarding__close{
position:absolute; top:12px; right:14px; z-index:3;
width:30px; height:30px; border-radius:8px;
background:rgba(0,0,0,.32); border:none; color:rgba(242,236,227,.7);
font-size:20px; line-height:1; cursor:pointer;
}
.onboarding__close:hover{ background:rgba(0,0,0,.55); color:#fff; }
/* Left: table of contents */
.onboarding__toc{
flex:0 0 256px; display:flex; flex-direction:column;
padding:24px 16px; gap:1px; overflow-y:auto;
background:#100d0c; border-right:1px solid rgba(255,255,255,.07);
}
.onboarding__toc-title{
font-size:15px; font-weight:650; padding:0 10px; margin-bottom:8px; color:#f7f2ea;
}
.onboarding__toc-group{
font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
color:#6f6862; padding:14px 10px 6px;
}
.onboarding__toc-item{
display:flex; align-items:center; gap:9px;
padding:8px 10px; border-radius:9px; cursor:pointer;
background:none; border:none; width:100%; text-align:left;
font-size:13px; color:#a89f96; transition:background .15s, color .15s;
}
.onboarding__toc-item:hover{ background:rgba(255,255,255,.05); color:#f2ece3; }
.onboarding__toc-item.is-current{ background:rgba(224,137,74,.14); color:#f7f2ea; }
.onboarding__toc-dot{
flex:0 0 16px; height:16px; border-radius:50%;
border:1.5px solid rgba(255,255,255,.22);
display:flex; align-items:center; justify-content:center;
font-size:9px; font-weight:700; color:#141110;
}
.onboarding__toc-item.is-current .onboarding__toc-dot{ border-color:#e0894a; }
.onboarding__toc-item.is-done .onboarding__toc-dot{ background:#e0894a; border-color:#e0894a; }
.onboarding__toc-skip{
margin-top:auto; padding:12px 10px 2px; background:none; border:none;
color:#6f6862; font-size:12px; cursor:pointer; text-align:left;
}
.onboarding__toc-skip:hover{ color:#a89f96; }
/* Right: content */
.onboarding__main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.onboarding__shot{
flex:0 0 auto; aspect-ratio:16 / 10; max-height:520px; margin:18px 18px 0;
border-radius:12px; overflow:hidden;
border:1px solid rgba(255,255,255,.08); background:#0a0807;
}
.onboarding__img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; }
/* Panel "Coming soon" (paso sin captura): lista de features con badge */
.onboarding__soon{
width:100%; height:100%; box-sizing:border-box;
display:flex; flex-direction:column; justify-content:center; gap:12px;
padding:26px clamp(24px,6%,64px);
}
.onboarding__soon-item{
display:flex; align-items:center; gap:14px;
padding:15px 18px; border-radius:12px;
background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08);
}
.onboarding__soon-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.onboarding__soon-name{ font-size:15px; font-weight:650; color:#f7f2ea; }
.onboarding__soon-note{ font-size:12.5px; color:#8f877e; }
.onboarding__soon-badge{
margin-left:auto; flex:0 0 auto;
font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:#e0894a; background:rgba(224,137,74,.12); border:1px solid rgba(224,137,74,.35);
padding:4px 9px; border-radius:999px;
}
.onboarding__content{ padding:18px 26px 4px; flex:1 1 auto; min-height:0; overflow-y:auto; }
.onboarding__eyebrow{
font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#e0894a;
}
.onboarding__title{ font-size:25px; font-weight:650; margin:8px 0 12px; color:#f7f2ea; }
.onboarding__body{ font-size:15px; line-height:1.62; color:#b3aaa1; margin:0; max-width:620px; }
.onboarding__footer{
display:flex; align-items:center; gap:14px;
padding:14px 26px; border-top:1px solid rgba(255,255,255,.07);
}
.onboarding__progress{ font-size:12px; color:#8a8178; }
.onboarding__dots{ display:flex; gap:6px; }
.onboarding__dot{
width:7px; height:7px; border-radius:50%; padding:0; border:none;
background:rgba(255,255,255,.2); cursor:pointer; transition:background .2s, transform .2s;
}
.onboarding__dot.is-active{ background:#e0894a; transform:scale(1.3); }
.onboarding__nav-btns{ margin-left:auto; display:flex; gap:8px; }
.onboarding__btn{
font-size:13px; font-weight:600; border-radius:9px; padding:9px 18px; cursor:pointer;
border:1px solid transparent;
}
.onboarding__btn--ghost{ background:rgba(255,255,255,.06); color:#f2ece3; border-color:rgba(255,255,255,.12); }
.onboarding__btn--ghost:hover{ background:rgba(255,255,255,.12); }
.onboarding__btn--ghost[hidden]{ display:none; }
.onboarding__btn--primary{ background:#d17a35; color:#fff; }
.onboarding__btn--primary:hover{ background:#e0894a; }
@media (max-width:720px){
.onboarding__card{ flex-direction:column; height:min(90vh,760px); }
.onboarding__toc{
flex:0 0 auto; flex-direction:row; align-items:center;
overflow-x:auto; padding:12px; gap:6px;
border-right:none; border-bottom:1px solid rgba(255,255,255,.07);
}
.onboarding__toc-title, .onboarding__toc-group, .onboarding__toc-skip{ display:none; }
.onboarding__toc-item{ white-space:nowrap; width:auto; }
.onboarding__shot{ aspect-ratio:16 / 10; max-height:40vh; }
}
@media (prefers-reduced-motion: reduce){ .onboarding{ transition:none; } }
/* Botón Help: "?" en un botón redondeado (sin el círculo completo) */
#help-btn{
border:1px solid var(--border-medium); background:transparent; border-radius:10px;
font-family:var(--font-body); font-size:17px; font-weight:700; line-height:1;
}
#help-btn:hover{ background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.3); color:#fff; }
/* Pista en el botón Help tras cerrar el tour: anillo pulsante + burbuja "reabrir tour" */
#help-btn.help-hint{ position:relative; color:#e0894a; border-color:rgba(224,137,74,.6); }
#help-btn.help-hint::after{
content:''; position:absolute; inset:-3px; border-radius:12px;
border:1.5px solid #e0894a; pointer-events:none;
animation:helpHintPulse 1.5s ease-out infinite;
}
@keyframes helpHintPulse{ 0%{ opacity:.85; transform:scale(1); } 100%{ opacity:0; transform:scale(1.4); } }
.help-hint-bubble{
position:fixed; z-index:1250; max-width:230px;
background:#e0894a; color:#241505; font-size:12.5px; font-weight:600; line-height:1.35;
padding:8px 12px; border-radius:9px; box-shadow:0 10px 28px rgba(0,0,0,.45);
opacity:0; transform:translateY(-5px); transition:opacity .25s ease, transform .25s ease;
}
.help-hint-bubble.is-shown{ opacity:1; transform:translateY(0); }
.help-hint-bubble::before{
content:''; position:absolute; top:-4px; right:15px;
width:9px; height:9px; background:inherit; transform:rotate(45deg);
}
@media (prefers-reduced-motion: reduce){ #help-btn.help-hint::after{ animation:none; } }
/* ===== Billing (SellAuth): modal de compra + banner de caducidad ===== */
.billing-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; }
.billing-modal[hidden] { display: none; }
.billing-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); }
.billing-modal__panel { position: relative; z-index: 1; width: min(460px, 92vw); max-height: 85vh; overflow-y: auto;
background: #15110f; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 24px; }
.billing-modal__close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color: #fff; cursor: pointer; font-size: 18px; }
.billing-modal__title { margin: 0 0 16px; font-size: 18px; }
.billing-modal__hint { color: #8a8074; font-size: 13px; }
.billing-modal__err { color: #e2695f; font-size: 13px; margin-top: 10px; }
.billing-item { display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 14px; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; margin-bottom: 10px; }
.billing-item__info { display: flex; flex-direction: column; }
.billing-item__name { font-weight: 600; }
.billing-item__sub { color: #8a8074; font-size: 12px; }
.billing-item__buy { background: var(--accent, #C95F2E); border: none; color: #fff; padding: 8px 14px;
border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 13px; white-space: nowrap; }
.billing-item__buy:disabled { opacity: .6; cursor: default; }
.billing-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 8500;
display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 999px;
background: rgba(201,95,46,.15); border: 1px solid var(--accent, #C95F2E); color: #fff; font-size: 13px;
backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.billing-banner[hidden] { display: none; }
.billing-banner--expired { background: rgba(226,105,95,.18); border-color: #e2695f; }
.billing-banner__btn { background: var(--accent, #C95F2E); border: none; color: #fff; padding: 6px 14px;
border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 13px; }
/* ============ Generate — image-wall + floating bar ============ */
#page-generate { position: relative; }
.gen-stage { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; }
/* Capa 1: muro de fondo */
.gen-wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Dos filas de imágenes: rejilla de 2 filas que fluye por COLUMNAS (grid-auto-flow: column),
así las miniaturas van llenando izquierda->derecha en dos alturas. Lo que no cabe a la
derecha NO se recorta: se recorre arrastrando (ver initWallDrag en gen-wall.js).
`grid-auto-columns` en px fijos (no 1fr) para que las columnas no se compriman hasta
caber en pantalla — si lo hicieran no habría nada que desplazar. */
.gen-wall__grid {
display: grid;
grid-template-rows: repeat(2, minmax(0, 1fr));
grid-auto-flow: column;
grid-auto-columns: 200px;
gap: 8px; padding: 8px;
height: 100%;
overflow-x: auto; overflow-y: hidden;
scrollbar-width: none; /* Firefox: sin barra (es un fondo) */
-ms-overflow-style: none;
overscroll-behavior-x: contain; /* no dispara el "atrás" del navegador al llegar al tope */
cursor: default; /* solo "agarrable" si hay fotos de sobra (is-scrollable) */
user-select: none; /* es un fondo: arrastrar no debe seleccionar las fotos */
-webkit-user-select: none;
opacity: .38; filter: saturate(.85);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,.25) 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,.25) 100%);
}
.gen-wall__grid::-webkit-scrollbar { display: none; } /* Chrome/Safari */
/* Con pocas fotos no hay nada que desplazar: ni cursor de agarre ni gesto (ver syncScrollable). */
.gen-wall__grid.is-scrollable { cursor: grab; }
.gen-wall__grid.is-scrollable.is-dragging { cursor: grabbing; }
/* Mientras se arrastra, las miniaturas no deben capturar el gesto como un drag de imagen. */
.gen-wall__grid.is-dragging .gen-wall__tile { pointer-events: none; }
/* Cada tile es la celda del grid; la media (img/vídeo) la llena sin deformarse. Clicable ->
abre el lightbox (ver gen-wall.js). */
.gen-wall__tile {
position: relative; width: 100%; height: 100%;
margin: 0; border-radius: 10px; overflow: hidden; background: #14110e;
cursor: pointer; /* sin lupa/"+" del zoom-in al pasar por encima */
}
.gen-wall__media { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Tile "generando": placeholder con barra de progreso al pie, mientras se genera. */
.gen-wall__tile.is-pending { cursor: default; background: #1a1611; }
.gen-wall__prog {
position: absolute; left: 8px; right: 8px; bottom: 8px; height: 4px;
border-radius: 999px; background: rgba(255,255,255,.15); overflow: hidden;
}
.gen-wall__prog-fill {
display: block; height: 100%; width: 0;
background: var(--accent, #C95F2E); border-radius: 999px; transition: width .4s ease;
}
.gen-wall__tile.is-pending::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
background-size: 220% 100%; animation: gen-wall-shimmer 1.3s linear infinite;
}
@keyframes gen-wall-shimmer { from { background-position: 200% 0; } to { background-position: -20% 0; } }
.gen-wall__empty {
position: absolute; inset: 0; display: grid; place-items: center;
color: var(--muted, #8a8178); font-size: 14px; letter-spacing: .01em;
}
.gen-wall__grid:not(:empty) ~ .gen-wall__empty { display: none; }
/* Capa 2: superficie activa centrada */
.gen-stage > #generate-canvas {
position: absolute; inset: 0; z-index: 1;
display: grid; place-items: center;
padding: 24px 24px 140px;
background: transparent; pointer-events: none;
}
.gen-stage > #generate-canvas:has(.gen-progress),
.gen-stage > #generate-canvas:has(.gen-preview),
.gen-stage > #generate-canvas:has(.result-card) { pointer-events: auto; }
/* Capa 3: barra flotante */
.gen-bar {
position: absolute; left: 50%; bottom: 22px; z-index: 3;
transform: translateX(-50%);
width: min(920px, calc(100% - 32px));
}
/* Compositor de 2 filas: prompt arriba, chips + Generate abajo. */
.gen-bar__composer {
display: flex; flex-direction: column; gap: 8px;
background: rgba(32,27,22,.97); border: 1px solid rgba(255,255,255,.12);
border-radius: 16px; padding: 10px; backdrop-filter: blur(14px);
box-shadow: 0 18px 54px rgba(0,0,0,.6);
overflow: visible;
transition: border-color .15s, background .15s;
}
/* Arrastrando un fichero encima: la barra entera es la diana (ver initBarDrop). */
.gen-bar.is-dropping .gen-bar__composer {
border-color: rgba(255,255,255,.45);
background: rgba(46,39,31,.98);
}
/* Fila 1: prompt */
.gen-bar__promptrow { display: flex; }
.gen-bar__prompt { flex: 1 1 auto; min-width: 0; }
.gen-bar__prompt #prompt-group { margin: 0; }
/* El alto lo calcula initPromptAutogrow (crece con el texto hasta 10 líneas y luego scroll),
así que aquí NO se fija max-height: lo pone el JS a partir del line-height real. */
.gen-bar__prompt .prompt-input {
/* `block`: un textarea en línea deja un hueco de ~8px bajo la línea base, y eso hacía que
.prompt-wrap fuera más alto que el propio campo -> la franja del autoprompter (que se
posiciona contra el wrap) sobresalía y su icono no quedaba centrado con el texto. */
display: block;
min-height: 46px; border-radius: 10px; resize: none;
padding: 10px 12px; /* el .prompt-input global trae 14/16: aquí la barra va más compacta */
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
overflow-y: hidden; /* pasa a auto cuando toca el tope de 10 líneas */
scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
/* Scrollbar del prompt al pasar de 10 líneas, al estilo del resto del studio. */
.gen-bar__prompt .prompt-input::-webkit-scrollbar { width: 8px; }
.gen-bar__prompt .prompt-input::-webkit-scrollbar-track { background: transparent; }
.gen-bar__prompt .prompt-input::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.14); border-radius: 9999px;
border: 2px solid transparent; background-clip: content-box;
}
.gen-bar__prompt .prompt-input::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.24); }
/* Hueco entre el autoprompter y el textarea dentro de la barra (el global es de 12px). */
.gen-bar__prompt #prompt-group { gap: 8px; }
/* Fila 2: chips (izq) + acciones (der) */
.gen-bar__controlrow { display: flex; align-items: center; gap: 10px; }
/* Una sola línea de chips: no envuelven (si no, la fila crece y estira el botón Generate). Si no
caben, la tira scrollea en horizontal con la barra oculta. */
.gen-bar__chips {
display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
flex-wrap: nowrap; overflow-x: auto;
scrollbar-width: none; -ms-overflow-style: none;
}
.gen-bar__chips::-webkit-scrollbar { display: none; }
.gen-bar__chips > * { flex: 0 0 auto; } /* los chips no se encogen; conservan su tamaño */
/* Options solo en JET Onyx (krea2): en Motion/Fusion/Reference ya no hay ajustes sueltos ahí. */
.gen-bar__chips .gen-bar__options { display: none; }
html[data-gen-engine="krea2"] .gen-bar__options { display: inline-flex; }
/* Chip de ratio: solo en engines con aspect ratio (krea2). data-gen-engine lo pone updatePromptVisibility. */
.gen-bar__chips .gen-bar__ratio { display: none; }
html[data-gen-engine="krea2"] .gen-bar__ratio { display: inline-flex; }
/* Pills por engine: ocultas por defecto, cada engine revela las suyas.
Mismo mecanismo que .gen-bar__ratio (data-gen-engine lo pone updatePromptVisibility).
OJO con la especificidad: cada pill es TAMBIÉN un .gen-bar__trigger, y esa regla
(display: inline-flex) va después en este fichero. Con un selector de una sola clase
estas reglas empatarían en especificidad y perderían por orden -> se veían todas las
pills en todos los engines. Por eso van calificadas con .gen-bar__chips (0,2,0), que
gana a .gen-bar__trigger (0,1,0); las de mostrar son (0,2,1) y siguen ganando a estas. */
.gen-bar__chips .gen-bar__pill--identity,
.gen-bar__chips .gen-bar__pill--styles,
.gen-bar__chips .gen-bar__pill--duration,
.gen-bar__chips .gen-bar__pill--denoise { display: none; }
html[data-gen-engine="krea2"] .gen-bar__pill--identity,
html[data-gen-engine="krea2i2i"] .gen-bar__pill--identity { display: inline-flex; }
html[data-gen-engine="krea2"] .gen-bar__pill--styles,
html[data-gen-engine="ltx"] .gen-bar__pill--styles,
html[data-gen-engine="krea2i2i"] .gen-bar__pill--styles { display: inline-flex; }
html[data-gen-engine="ltx"] .gen-bar__pill--duration { display: inline-flex; }
html[data-gen-engine="krea2i2i"] .gen-bar__pill--denoise { display: inline-flex; }
/* El chip Task es solo para VAs (deben elegir una task asignada). El admin genera libre por
defecto (dropdownState.task = '' = "No task"), así que no necesita el selector. */
html.is-admin #gen-bar-task-trigger { display: none; }
/* Chips de imagen de referencia: miniatura de 24px; vacío = círculo punteado con "+". */
.gen-bar__ref { padding-left: 5px; }
.gen-bar__ref-thumb {
width: 24px; height: 24px; border-radius: 50%;
background-position: center; background-size: cover;
border: 1px dashed rgba(255,255,255,.25);
display: inline-flex; align-items: center; justify-content: center;
color: var(--muted, #8a8178); font-size: 13px; line-height: 1;
}
.gen-bar__ref-thumb::before { content: '+'; }
.gen-bar__ref-thumb.has-image { border: 1px solid rgba(255,255,255,.35); }
.gen-bar__ref-thumb.has-image::before { content: ''; }
/* Visibilidad por engine (cada rol solo en el engine que lo usa). */
/* Misma calificación con .gen-bar__chips que las pills: si no, .gen-bar__trigger gana y
se ven los cuatro chips en todos los engines. */
.gen-bar__chips .gen-bar__ref { display: none; }
html[data-gen-engine="ltx"] .gen-bar__ref--start { display: inline-flex; }
html[data-gen-engine="flux2"] .gen-bar__ref--base,
html[data-gen-engine="flux2"] .gen-bar__ref--face { display: inline-flex; }
html[data-gen-engine="krea2i2i"] .gen-bar__ref--image { display: inline-flex; }
/* × del chip: oculto hasta que hay imagen (span role="button", no