:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#f8f8ff;background:#080c1e;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 55% -20%,#293069 0,transparent 46%),#080c1e}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #91b6ff;outline-offset:3px}.aurora{position:fixed;border-radius:50%;filter:blur(75px);pointer-events:none;opacity:.17}.a1{height:300px;width:340px;background:#8653ef;left:-210px;top:220px}.a2{height:280px;width:330px;background:#338dff;right:-230px;bottom:90px}.app{max-width:570px;margin:auto;min-height:100dvh;position:relative;background:linear-gradient(145deg,#101630b8,#0d1126c9);border-inline:1px solid #ffffff0d;padding-bottom:100px}.top{height:78px;display:flex;justify-content:space-between;align-items:center;padding:18px 22px;position:sticky;top:0;z-index:5;backdrop-filter:blur(28px);background:#0b1026dc;border-bottom:1px solid #ffffff0d}.brand{font-size:40px;font-weight:900;font-style:italic;letter-spacing:-7px;padding-right:8px;background:linear-gradient(140deg,#e7b8ff,#62d2ff 65%,#b3a0ff);color:transparent;background-clip:text;text-shadow:0 0 23px #7c6bff45}.top-actions{display:flex;gap:10px}.icon-btn{width:42px;height:42px;border-radius:50%;background:#ffffff0a;border:1px solid #ffffff2a;display:grid;place-items:center}.icon-btn svg,.nav svg,.action svg{height:21px;width:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.view{padding:12px 16px 18px}.heading{font-size:24px;margin:12px 3px 22px;letter-spacing:-.7px}.subtle{color:#969bb7;font-size:13px}.stories{display:flex;gap:16px;overflow:auto;padding:12px 4px 24px;scrollbar-width:none}.story{flex:0 0 68px;text-align:center;font-size:12px;color:#e7e8fa}.avatar{width:55px;height:55px;display:grid;place-items:center;margin:0 auto 7px;border-radius:50%;background:linear-gradient(140deg,#6acbff,#a55cf6);padding:3px;box-shadow:0 0 18px #7564e34b}.avatar span{width:100%;height:100%;border-radius:50%;background:#202744;display:grid;place-items:center;font-weight:700;font-size:18px}.story:first-child .avatar{background:#ffffff18;border:1px solid #a29bf9}.panel{background:linear-gradient(145deg,#ffffff16,#ffffff08 55%,#ffffff0c);border:1px solid #ffffff27;border-radius:26px;box-shadow:inset 1px 1px 0 #ffffff12,0 10px 28px #0003;backdrop-filter:blur(20px)}.post{margin-bottom:22px;overflow:hidden}.post-head{display:flex;align-items:center;gap:11px;padding:15px 15px 13px}.post-head .avatar{width:42px;height:42px;margin:0;flex:0 0 auto}.post-head .avatar span{font-size:15px}.grow{flex:1;min-width:0}.username{font-size:14px;font-weight:700}.verified{color:#67bdff}.post-img{display:block;width:100%;max-height:620px;object-fit:cover;background:#19203e}.post-actions{display:flex;align-items:center;gap:18px;padding:13px 15px}.action{display:flex;gap:6px;align-items:center;border:0;background:transparent;padding:4px 0;font-size:13px}.action.liked{color:#ff6aaf}.action.saved{color:#b7a0ff}.action.right{margin-left:auto}.caption{padding:0 15px 15px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}.bottom{position:fixed;bottom:13px;left:50%;transform:translateX(-50%);width:calc(100% - 28px);max-width:536px;height:74px;border:1px solid #ffffff3c;border-radius:30px;z-index:10;background:linear-gradient(135deg,#333953dd,#171c3cdd);box-shadow:0 4px 30px #080b22, inset 0 1px 0 #ffffff47;backdrop-filter:blur(30px);display:flex;justify-content:space-around;align-items:center;padding:8px}.nav{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:48px;color:#a9abc6}.nav.active{color:#fff;text-shadow:0 0 15px #90acff}.nav small{font-size:10px}.nav.create{border:1px solid #ffffff61;background:linear-gradient(140deg,#4379f8,#ae60dd);box-shadow:0 0 23px #697aff79;width:48px;height:48px;min-width:48px;border-radius:50%;color:white;font-size:32px;line-height:1}.grid-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.tile{aspect-ratio:1;overflow:hidden;border:0;background:#222b4c;padding:0;border-radius:9px}.tile img{width:100%;height:100%;object-fit:cover}.search{width:100%;padding:14px 16px;background:#ffffff0c;color:white;border:1px solid #ffffff30;border-radius:16px;margin-bottom:17px}.empty{text-align:center;padding:60px 20px;color:#a6aac6}.empty strong{display:block;color:white;font-size:18px;margin-bottom:7px}.profile-hero{text-align:center;padding:18px 8px 22px}.profile-hero .avatar{width:92px;height:92px}.profile-hero .avatar span{font-size:31px}.stats{display:flex;justify-content:center;gap:30px;margin:20px 0}.stats b{display:block;font-size:19px}.stats span{color:#a4a8c1;font-size:12px}.primary{background:linear-gradient(120deg,#376cf1,#aa67eb);box-shadow:0 5px 21px #5d61ff4a;border:1px solid #ffffff3e;border-radius:18px;color:white;padding:14px 20px;font-weight:700}.primary:disabled{opacity:.45;cursor:not-allowed}.wide{width:100%}.field{display:block;margin:20px 0 7px;font-size:13px;color:#b7b9d0}.text-field{width:100%;background:#ffffff0b;color:white;border:1px solid #ffffff2c;border-radius:15px;padding:14px;resize:vertical}.upload{min-height:220px;border:1px dashed #8986be;border-radius:24px;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;gap:8px;overflow:hidden;background:#ffffff08;cursor:pointer}.upload img{max-width:100%;max-height:400px;object-fit:contain}.upload input{display:none}.upload .plus{font-size:45px;color:#b5b0ff}.hint{line-height:1.5;color:#a0a4c0;font-size:12px;margin-top:14px}.detail-back{border:0;background:none;margin:5px 0 20px;color:#c0c5e2;font-weight:600}.comment-list{padding:15px}.comment{border-bottom:1px solid #ffffff15;padding:10px 0;font-size:13px;overflow-wrap:anywhere}.comment-form{display:flex;gap:7px;margin-top:15px}.comment-form input{min-width:0;flex:1}.comment-form button{padding:10px 15px}.about{line-height:1.7}.about strong{color:white}#toast{position:fixed;bottom:105px;left:50%;transform:translateX(-50%);background:#30385e;color:white;border:1px solid #ffffff50;border-radius:20px;padding:10px 18px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30;text-align:center;width:max-content;max-width:90vw}#toast.show{opacity:1}@media(min-width:650px){.app{box-shadow:0 0 90px #0008}.bottom{max-width:536px}}

/* Indicador de mensajes no leídos: oculto completamente cuando está en cero. */
.icon-btn{position:relative}.message-badge{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;border-radius:12px;background:linear-gradient(135deg,#5faeff,#a55bf3);color:white;font-size:10px;font-weight:800;line-height:19px;padding:0 4px;box-shadow:0 0 0 2px #0b1026;text-align:center}.message-badge[hidden]{display:none!important}.message-row{display:flex;align-items:center;gap:12px;width:100%;padding:15px;margin-bottom:10px;text-align:left}.message-row .avatar{margin:0;width:42px;height:42px;flex-shrink:0}.message-row.unread{border-color:#8e91ff}

/* Perfil V 0.1.2 */
.profile-full{padding:0 0 22px;text-align:center;position:relative}.profile-cover{height:195px;margin:-12px -16px 0;position:relative;background-color:#26315f;background-image:linear-gradient(to bottom,#324480,#192041 65%,#10152e 100%);background-size:cover;background-position:center;border-radius:0 0 18px 18px}.profile-cover:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(to bottom,transparent,#10152e);pointer-events:none}.profile-cover>.edit-pencil{position:absolute;right:24px;top:16px;z-index:2}.profile-pic-wrap{position:relative;display:table;margin:-55px auto 8px;z-index:2}.profile-pic-wrap .avatar{height:104px;width:104px;margin:0;border:3px solid #8f94f8;box-shadow:0 0 0 5px #111730}.profile-avatar-image{width:100%;height:100%;border-radius:50%;object-fit:cover}.profile-pic-wrap>.edit-pencil{position:absolute;right:-11px;bottom:0}.profile-info{display:flex;flex-direction:column;gap:5px;padding:0 18px}.profile-editable{display:flex;justify-content:center;align-items:center;gap:7px;min-width:0}.profile-editable:first-child .profile-field-value{font-size:22px;font-weight:750;color:#fff}.profile-field-value{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.5;color:#c5c8de}.profile-field-value.placeholder{color:#8c91ae;font-style:italic}.edit-pencil{border:1px solid #ffffff48;background:#30385cd9;width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;box-shadow:0 3px 15px #0007}.edit-pencil svg{height:17px;width:17px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}.profile-edit-input{width:min(100%,380px);max-height:180px;min-height:38px;resize:vertical;background:#252b4e;border:1px solid #ac9bff;border-radius:12px;color:#fff;padding:9px;text-align:center}.profile-close-row{position:absolute;top:10px;left:0;right:0;z-index:3;pointer-events:none;display:flex;justify-content:flex-start}.profile-close{pointer-events:auto;border:1px solid #ffffff66;background:#151a37bb;border-radius:50%;width:36px;height:36px;font-size:20px;display:grid;place-items:center}.profile-buttons{display:flex;justify-content:center;gap:10px;padding:0 12px}.profile-buttons button{flex:1;max-width:180px;padding:12px}.profile-secondary{background:#ffffff17;border:1px solid #ffffff39;border-radius:18px;font-weight:700}.viral-option{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:14px;margin:18px 8px 0;padding:15px}.viral-option input{width:23px;height:23px;accent-color:#8d7aff}.viral-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.viral-stat{padding:20px;text-align:center}.viral-stat b{display:block;font-size:25px}.viral-stat span{font-size:13px;color:#b2b5d0}

/* V 0.1.3: foto de perfil realmente circular, sin anillo ni sombra */
.profile-pic-wrap .avatar{width:104px;height:104px;padding:0;border:0;box-shadow:none;background:#202744;border-radius:50%;overflow:hidden;display:grid;place-items:center;margin:0}
.profile-pic-wrap .avatar span{width:100%;height:100%;border-radius:50%}
.profile-pic-wrap .profile-avatar-image{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:0;box-shadow:none}
.crop-open{overflow:hidden}.crop-overlay{position:fixed;inset:0;background:#040614dc;z-index:100;display:grid;place-items:center;padding:16px;backdrop-filter:blur(10px)}
.crop-sheet{width:min(100%,430px);background:linear-gradient(150deg,#222949,#10162e);border:1px solid #ffffff3b;box-shadow:0 20px 90px #000a;border-radius:26px;padding:20px;color:#fff}
.crop-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:17px}.crop-close{background:#ffffff16;border:1px solid #ffffff35;width:35px;height:35px;border-radius:50%;font-size:19px}
.crop-hint{font-size:12px;color:#afb6d3;line-height:1.5;margin:10px 0 18px}
.crop-stage{position:relative;touch-action:none;user-select:none;width:min(100%,320px);aspect-ratio:1;margin:auto;border-radius:50%;overflow:hidden;cursor:grab;border:2px solid #ffffffc7;box-shadow:0 0 0 8px #ffffff0b,0 0 35px #7169f54b;background:#0d1025}
.crop-stage:active{cursor:grabbing}.crop-preview{display:block;width:100%;height:100%;border-radius:50%}
.crop-zoom{display:flex;align-items:center;gap:14px;margin:22px 0 18px;font-size:13px;color:#dce0f9}.crop-zoom input{flex:1;width:100%;accent-color:#9575f1}
.crop-actions{display:flex;gap:10px}.crop-actions button{flex:1;padding:13px 10px}.crop-actions .profile-secondary{color:#fff}

/* V 0.1.5 · Historias de imágenes con cámara */
.story{border:0;background:transparent;padding:0;cursor:pointer;color:inherit}.story-add .avatar,.add-another .avatar{font-size:24px}.story-open{overflow:hidden}.story-overlay{position:fixed;inset:0;z-index:110;background:#050716;display:flex;align-items:center;justify-content:center;color:#fff}.camera-overlay{background:#03040a}.camera-video{width:100%;height:100%;object-fit:cover}.story-camera-top,.story-view-top{position:absolute;top:max(20px,env(safe-area-inset-top));left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;z-index:2;text-shadow:0 1px 8px #000}.story-tool{background:#172035a8;border:1px solid #ffffff55;color:#fff;width:42px;height:42px;border-radius:50%;font-size:21px}.camera-controls,.story-publish-bar{position:absolute;bottom:max(34px,env(safe-area-inset-bottom));left:15px;right:15px;display:flex;align-items:center;justify-content:space-evenly;gap:22px;z-index:2}.camera-secondary{background:#202844cf;border:1px solid #ffffff65;border-radius:22px;padding:12px 16px;min-width:84px}.camera-shutter{height:76px;width:76px;flex-shrink:0;background:#fff;border:6px solid #161a32;outline:3px solid white;border-radius:50%;box-shadow:0 0 22px #8c8eff88}.camera-status{position:absolute;top:50%;left:18px;right:18px;text-align:center;color:#fff;text-shadow:0 1px 10px #000;pointer-events:none}.story-full-img{height:100%;width:100%;object-fit:contain}.story-view-info{font-weight:700}.story-next{position:absolute;right:0;top:25%;height:50%;width:25%;background:transparent;border:0;font-size:60px;text-align:right;padding-right:20px}.story-publish-bar{justify-content:center}.story-publish-bar .primary{min-width:180px}

/* V 0.1.6: selector de cámara y corrección de orientación */
.camera-viewport{position:absolute;inset:0;overflow:hidden;background:#05070d}
.camera-viewport .camera-video{position:absolute;top:50%;left:50%;object-fit:cover;transform-origin:center center}
.camera-overlay:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,#0007,transparent 22%,transparent 68%,#000b);z-index:1}
.camera-modes{position:absolute;bottom:calc(max(34px,env(safe-area-inset-bottom)) + 103px);left:8px;right:8px;display:flex;justify-content:center;gap:7px;z-index:3}
.camera-mode{background:#1a2041b5;border:1px solid #ffffff40;border-radius:22px;padding:10px 12px;color:#c9cae0;font-size:12px;white-space:nowrap}
.camera-mode.selected{background:linear-gradient(115deg,#4070ef,#9859dc);color:white;border-color:#ffffff91;box-shadow:0 0 18px #6468f955;font-weight:700}
.camera-controls{z-index:3}.camera-viewport+.camera-status{z-index:2}.story-camera-top{z-index:4}.preview-modes{bottom:calc(max(34px,env(safe-area-inset-bottom)) + 100px)}
.story-preview .camera-caption{position:absolute;bottom:calc(max(34px,env(safe-area-inset-bottom)) + 160px);left:16px;right:16px;width:calc(100% - 32px);z-index:4;max-height:90px;background:#121930d9}
.story-preview .camera-caption[hidden]{display:none}.story-preview .story-full-img{max-height:100dvh}
.story-preview .story-publish-bar{gap:10px}.story-preview .story-publish-bar .primary{min-width:0;flex:1}.story-preview .camera-secondary{flex:0 0 auto}
@media(max-width:360px){.camera-mode{font-size:11px;padding:9px 8px}}

/* V 0.1.7: filtros y efectos */
.camera-effect-name{position:absolute;top:20%;left:50%;transform:translateX(-50%);z-index:3;border:1px solid #ffffff55;background:#151a35a8;padding:8px 16px;border-radius:24px;font-size:14px;white-space:nowrap;pointer-events:none}
.camera-effect-rail{position:absolute;bottom:calc(max(34px,env(safe-area-inset-bottom)) + 25px);right:8px;max-width:27%;height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;z-index:4;scrollbar-width:none;mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.effect-chip{border-radius:24px;background:#151b36cb;color:white;border:1px solid #fff5;padding:9px 6px;font-size:11px;min-height:40px}.effect-chip.selected{border-color:#b3a2ff;background:#6650aada;box-shadow:0 0 14px #695ddd8a}
.camera-overlay .camera-controls{right:28%}.camera-overlay .camera-secondary{min-width:63px;padding:11px 8px;font-size:12px}.camera-overlay .camera-shutter{width:70px;height:70px}
.effects-form{display:flex;flex-direction:column;gap:12px;padding:16px}.effect-review{padding:14px;margin:10px 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}.effect-review .subtle{flex:1;min-width:110px}

/* V 0.1.8: filtros verticales solo en vista previa, sin botones flotantes */
.camera-effect-name,.camera-effect-rail{display:none!important}
.camera-overlay .camera-controls{right:15px}
.camera-overlay .camera-secondary{min-width:73px;padding:12px 13px;font-size:12px}
.story-preview .story-full-img{touch-action:pan-x;user-select:none;-webkit-user-select:none}
.preview-filter-name{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) scale(.95);z-index:5;background:#10152ab8;color:white;border:1px solid #ffffff45;border-radius:28px;padding:9px 20px;pointer-events:none;opacity:0;transition:opacity .18s,transform .18s;backdrop-filter:blur(12px);font-size:16px;font-weight:600;white-space:nowrap}
.preview-filter-name.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* V 0.2 — filtros de realidad visual en directo */
.camera-overlay .camera-viewport{isolation:isolate;}
.camera-overlay .camera-video{object-fit:cover;filter:none;}
.live-effects{position:absolute;z-index:5;bottom:calc(max(34px,env(safe-area-inset-bottom)) + 184px);left:0;right:0;display:flex;align-items:center;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 36vw 10px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;}
.live-effects::-webkit-scrollbar{display:none}
.live-effect-item{display:flex;flex-direction:column;align-items:center;gap:5px;scroll-snap-align:center;min-width:64px;border:none;background:none;color:white;font:inherit;padding:0;opacity:.75;}
.live-effect-item.active{opacity:1;}
.live-effect-thumb{height:56px;width:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#819ff2,#9c58cd);border:2px solid #ffffffa0;font-size:25px;box-shadow:0 3px 12px #0009;}
.live-effect-item.active .live-effect-thumb{border:3px solid #fff;box-shadow:0 0 0 2px #9876f3,0 0 15px #9772ff;}
.live-effect-caption{font-size:11px;text-shadow:0 1px 5px #000;white-space:nowrap;max-width:72px;overflow:hidden;text-overflow:ellipsis}
.live-effects-hint{position:absolute;z-index:4;bottom:calc(max(34px,env(safe-area-inset-bottom)) + 265px);left:0;right:0;text-align:center;color:#fff;font-size:12px;text-shadow:0 1px 6px #000}
@media (max-height:630px){.live-effects{bottom:calc(max(34px,env(safe-area-inset-bottom)) + 155px)}.live-effects-hint{display:none}}

/* v0.2.1: creator live effects separated from post-capture color filters */
.photo-edit-tools{position:absolute;z-index:6;right:18px;top:calc(max(20px,env(safe-area-inset-top)) + 64px);display:flex;flex-direction:column;gap:10px}
.photo-text-overlay{position:absolute;pointer-events:none;left:5%;right:5%;top:50%;transform:translateY(-50%);text-align:center;color:#fff;font-size:clamp(22px,6vw,38px);font-weight:800;text-shadow:0 2px 6px #000,0 0 12px #000;z-index:3;overflow-wrap:anywhere;white-space:pre-wrap}
.camera-overlay .live-effects{bottom:calc(max(34px,env(safe-area-inset-bottom)) + 180px)}
.camera-overlay .live-effects-hint{bottom:calc(max(34px,env(safe-area-inset-bottom)) + 265px)}

/* V 0.2.2: zoom táctil de cámara; no permitir que Safari amplíe la página */
.camera-viewport{touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;}
.camera-viewport .camera-video{object-fit:contain;pointer-events:none;}
.camera-zoom-indicator{position:absolute;bottom:38%;left:50%;transform:translateX(-50%);background:#12192dba;border:1px solid #ffffff55;border-radius:20px;padding:6px 12px;color:#fff;font-size:13px;font-weight:700;pointer-events:none;z-index:2;}

/* V 0.2.3: orientación vertical inicial y control de horizontal */
.camera-zoom-indicator{display:none!important}
.camera-orientation{display:flex;align-items:center;justify-content:center}
.camera-orientation.is-landscape{background:#5469bdcc;border-color:#a2afff}

/* v0.2.4: evita el zoom de Safari por doble toque o toques rápidos.
   Conserva desplazamiento y el pinch de dos dedos implementado en cámara. */
html,body,.app,button,a,.nav,.icon-btn,.story,.post,.story-overlay{touch-action:manipulation;}
.camera-viewport,.crop-stage{touch-action:none;}

/* v0.2.5: La orientación selecciona el formato del encuadre, nunca gira el video. */
.camera-overlay .camera-viewport{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;}
.camera-overlay .camera-viewport.is-landscape{inset:auto 0;top:50%;transform:translateY(-50%);height:auto;aspect-ratio:16 / 9;}
.camera-overlay .camera-viewport .camera-video{object-fit:cover;pointer-events:none;}

/* v0.2.6: vista completa sin zoom de recorte forzado */
.camera-overlay .camera-viewport .camera-video{object-fit:contain!important;pointer-events:none;}
.camera-overlay .camera-viewport .camera-video-background{object-fit:cover!important;filter:blur(24px) brightness(.48)!important;opacity:.85;transform:translate(-50%,-50%);}

/* v0.2.7: vista vertical inmersiva; no rotar el sensor ni añadir franjas.
   Cuando WebKit proporciona un stream 4:3, el formato 9:16 necesita recorte. */
.camera-overlay .camera-viewport .camera-video:not(.camera-video-background){object-fit:cover!important;}
.camera-overlay .camera-viewport .camera-video-background{display:none!important;}


/* v0.3.1: centrar mejor la vista y espejar la cámara frontal como en apps sociales */
.camera-overlay .camera-viewport .camera-video{object-position:center center!important;}
.camera-overlay .camera-viewport{display:block;}


/* v0.3.2: reducir el zoom aparente del selfie mostrando más encuadre */
.camera-overlay .camera-viewport{background:#05070d;}
.camera-overlay .camera-viewport .camera-video-background{display:block!important;object-fit:cover!important;filter:blur(26px) brightness(.42)!important;opacity:.95;}
.camera-overlay .camera-viewport .camera-video:not(.camera-video-background){object-fit:contain!important;object-position:center center!important;}
.camera-overlay .camera-viewport.is-landscape .camera-video:not(.camera-video-background){object-fit:cover!important;}

/* V 0.3.3: mantener para grabar y deslizar para zoom */
.camera-shutter{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.record-progress{position:absolute;inset:-9px;border-radius:50%;pointer-events:none;background:conic-gradient(#f43f67 var(--progress,0%),transparent 0);mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));}
.camera-shutter.recording{background:#f23c59;transform:scale(.92);border-color:#fff;}
.camera-shutter.recording::after{content:'';display:block;width:22px;height:22px;margin:auto;border-radius:5px;background:#fff;}
.video-preview .story-full-img{object-fit:contain;max-width:100%;}
.video-preview-note{position:absolute;bottom:135px;left:22px;right:22px;text-align:center;font-size:12px;text-shadow:0 1px 7px #000;z-index:4;}

/* v0.3.4: la vista en vivo DURANTE la grabación es el mismo canvas exportado */
.camera-recording-preview{
 position:absolute;inset:0;width:100%;height:100%;z-index:2;
 display:block;object-fit:contain;background:#05070d;
 pointer-events:none;
}
.camera-viewport:not(.recording-live) .camera-recording-preview{display:none}

/* v0.3.5: solo una vista mientras se graba; sin video duplicado detrás */
.camera-viewport.recording-live > video.camera-video,
.camera-viewport.recording-live > video.camera-video-background{visibility:hidden!important;}
.camera-viewport.recording-live > canvas.camera-recording-preview{
 visibility:visible!important;display:block!important;position:absolute!important;
 inset:0!important;width:100%!important;height:100%!important;
 object-fit:contain!important;z-index:3!important;background:#05070d;
}

/* V 0.3.6 - visor horizontal por defecto, editor de encuadre */
.camera-overlay .camera-viewport.is-landscape .camera-video:not(.camera-video-background){
 object-fit:contain!important;
}
.composition-modal{z-index:150}
.composition-sheet{max-height:95dvh;overflow-y:auto}
.composition-options{display:flex;justify-content:center;gap:10px;margin:12px 0}
.composition-options button{font-size:13px}
.composition-stage{width:min(100%,310px);max-height:53dvh;margin:0 auto;background:#080a16;overflow:hidden;border:2px solid #a19aff;border-radius:16px;touch-action:none;user-select:none}
.composition-canvas{display:block;width:100%;height:100%;touch-action:none}

/* v0.3.8: mostrar el fotograma completo; no ampliar ni recortar previamente */
.camera-overlay .camera-viewport .camera-video:not(.camera-video-background){object-fit:contain!important;object-position:center center!important;}

/* V 0.3.9: selector de cámara */
.camera-choice{padding:24px;z-index:140;background:radial-gradient(circle at 50% 20%,#25345d,#070b1c 70%)}
.camera-choice-sheet{width:min(100%,430px);padding:22px;display:flex;flex-direction:column;gap:13px}
.camera-choice-sheet .hint{margin:0 0 6px}
.camera-choice-action{width:100%;padding:17px 12px;border-radius:18px;font-weight:700;border:1px solid #ffffff35}