/* Estudio IA, Fase 2: video animado (2026-10-13). */

/* Vista previa del paso 4 y portada de la invitacion: el video va encima de su imagen, con el mismo encuadre. */
.invitation-image-current>video.invitation-image-video,
.public-cover-media>video.public-cover-video{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;pointer-events:none;background:transparent}
.invitation-image-current>video[hidden],.public-cover-media>video[hidden]{display:none!important}

.invitation-video-bar{display:flex;align-items:center;gap:10px;width:min(420px,100%);margin:8px 0;padding:10px 12px;border:1px solid #e3d9ff;border-radius:12px;background:#fbf9ff}
.invitation-video-bar[hidden]{display:none}
.invitation-video-bar>i{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:9px;background:#7c3cff;color:#fff}
.invitation-video-bar>span{display:grid;gap:2px;min-width:0;flex:1}
.invitation-video-bar strong{color:var(--dark2);font-size:.76rem}
.invitation-video-bar small{color:var(--muted);font-size:.64rem;line-height:1.35}
.invitation-video-bar .btn{flex:0 0 auto;min-height:34px;padding:6px 10px;font-size:.68rem}
@media(max-width:520px){.invitation-video-bar{flex-wrap:wrap}.invitation-video-bar .btn{width:100%}}

/* Pestañas Imagen / Video animado dentro del Estudio. */
.ai-studio-dialog:has(>.ai-studio-tabs:not([hidden])){grid-template-rows:auto auto minmax(0,1fr) auto}
.ai-studio-tabs{display:flex;gap:4px;margin:12px 22px 0;padding:4px;border:1px solid #e3d9ff;border-radius:999px;background:#fbf9ff;width:max-content;max-width:100%}
.ai-studio-tabs[hidden]{display:none}
.ai-studio-tabs button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 14px;border:0;border-radius:999px;background:transparent;color:var(--dark2);font-size:.74rem;font-weight:850;cursor:pointer}
.ai-studio-tabs button.is-active{background:#7c3cff;color:#fff;box-shadow:0 6px 16px rgba(124,60,255,.25)}
.ai-studio-tabs button:focus-visible{outline:3px solid rgba(124,60,255,.25)}
@media(max-width:760px){.ai-studio-tabs{margin:10px 16px 0}}

/* Imagen de partida para la animacion. */
.ai-video-sources{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.ai-video-source{position:relative;display:block;margin:0;aspect-ratio:9/16;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#f5f3f9;cursor:pointer}
.ai-video-source input{position:absolute;opacity:0;pointer-events:none}
.ai-video-source img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ai-video-source span{position:absolute;right:4px;bottom:4px;left:4px;padding:2px 5px;border-radius:999px;background:rgba(17,15,38,.72);color:#fff;font-size:.56rem;font-weight:850;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-video-source:has(input:checked){border-color:#7c3cff;box-shadow:0 0 0 3px rgba(124,60,255,.2)}
.ai-video-source:has(input:focus-visible){outline:3px solid rgba(124,60,255,.3)}
.ai-video-sources-empty{display:block;color:var(--muted);font-size:.7rem;line-height:1.4}
.ai-video-sources-empty[hidden]{display:none}

/* Tarjetas de animaciones en la galeria. */
.ai-studio-item.is-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ai-studio-item.is-video.is-queued,.ai-studio-item.is-video.is-in_progress{background-size:cover;background-position:center}
.ai-studio-item.is-video.is-queued small,.ai-studio-item.is-video.is-in_progress small{color:#fff}

/* Vitrina de la tienda: muestra real del video. */
.store-ai-media.has-sample video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}