/* Hacer en vivo, simple (el dueño 2026-11-05: "así funciona en otra app la parte de crear en vivo, nosotros lo tenemos
   muy complicado"): la cámara a pantalla completa, ✕ arriba a la izquierda, abajo Girar y Ajustes, la tarjeta con la
   foto + "Agrega un título" y el botón grande "Iniciar en vivo". El resto (categoría, descripción, quién puede ver,
   comentarios, regalos, colaboradores) en la hoja de Ajustes. Colores VYNKO. Prefijo vkgl-. JS: live-now.js. */

#createLiveView.vkgl { position: fixed !important; inset: 0 !important; z-index: 11000 !important; margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; border: 0 !important; border-radius: 0 !important; background: #05060d !important; box-shadow: none !important; overflow: hidden !important; }
#createLiveView.vkgl.hidden { display: none !important; }
#createLiveView.vkgl .mp-cl-form { position: absolute; inset: 0; margin: 0; padding: 0; display: block; }

/* La cámara llena la pantalla */
#createLiveView .vkgl-cam { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; aspect-ratio: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: radial-gradient(circle at 50% 35%, #1e2a5a, #05060d 75%) !important; overflow: hidden; }
#createLiveView .vkgl-cam video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; }
#createLiveView .vkgl-cam .mp-cl-camera-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: rgba(255, 255, 255, .85) !important; padding-bottom: 160px; }
#createLiveView .vkgl-cam .mp-cl-camera-placeholder svg { width: 40px; height: 40px; }
#createLiveView .vkgl-cam .mp-cl-camera-placeholder strong { color: #fff; font-size: 1.1rem; }
#createLiveView .vkgl-cam #createLiveFlipCameraBtn { display: none !important; }
/* Sombra arriba y abajo para leer los botones sobre cualquier imagen */
#createLiveView.vkgl .mp-cl-form::before, #createLiveView.vkgl .mp-cl-form::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
#createLiveView.vkgl .mp-cl-form::before { top: 0; height: 140px; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
#createLiveView.vkgl .mp-cl-form::after { bottom: 0; height: 330px; background: linear-gradient(0deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)); }

.vkgl-top { position: absolute; z-index: 3; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 10px); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.vkgl-x { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: #fff; padding: 0; cursor: pointer; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
#createLiveView .vkgl-ready { color: #fff !important; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(15, 23, 42, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.vkgl-bottom { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 14px calc(env(safe-area-inset-bottom, 0px) + 16px); display: flex; flex-direction: column; gap: 14px; }
.vkgl-tools { display: flex; justify-content: center; gap: 34px; }
.vkgl-tool { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.vkgl-tool svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); }
.vkgl-tool:active { transform: scale(.92); }

.vkgl-card { padding: 12px; border-radius: 22px; background: rgba(20, 22, 40, .55); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.vkgl-titlerow { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; }
.vkgl-avatar { flex: none; width: 34px; height: 34px; border-radius: 9px; overflow: hidden; background: #6366f1; display: inline-flex; }
.vkgl-avatar > * { width: 100% !important; height: 100% !important; border-radius: 0 !important; font-size: 15px; }
.vkgl-avatar img { object-fit: cover; }
#createLiveView .vkgl-titlerow input { flex: 1; min-width: 0; border: 0 !important; outline: none; background: none !important; box-shadow: none !important; padding: 0 !important; color: #fff !important; font: inherit; font-size: 16px; }
#createLiveView .vkgl-titlerow input::placeholder { color: rgba(255, 255, 255, .6); }
.vkgl-count { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .55); }
.vkgl-msg { margin: 0 4px 8px; color: #fecaca; font-size: 13px; text-align: center; }
.vkgl-msg:empty { display: none; }
#createLiveView .vkgl-go { width: 100%; height: 54px; border: 0; border-radius: 16px; color: #fff; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; background: linear-gradient(135deg, #ff4d6d, #ff2d55 45%, #e11d48) !important; box-shadow: 0 10px 26px -10px rgba(225, 29, 72, .9); }
#createLiveView .vkgl-go:disabled { opacity: .6; }
#createLiveView .vkgl-go:active { transform: scale(.98); }

/* Hoja de Ajustes */
.vkgl-sheet { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-end; background: rgba(0, 0, 0, .45); }
.vkgl-sheet.hidden { display: none; }
.vkgl-sheet-box { width: 100%; max-height: 82%; overflow-y: auto; background: #fff; border-radius: 22px 22px 0 0; padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 18px); box-sizing: border-box; color: #0f172a; }
.vkgl-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vkgl-sheet-head strong { font-size: 1.1rem; }
.vkgl-sheet-ok { border: 0; border-radius: 999px; padding: 8px 18px; color: #fff; font: inherit; font-weight: 800; background: linear-gradient(135deg, #35d5ff, #087cf0 55%, #006bff); cursor: pointer; }
.vkgl-sheet-box .field-label { display: block; margin: 10px 0; }
.vkgl-sheet-box .mp-jbc-row2 { margin-top: 10px; }
.vkgl-sheet-box .mp-jb-iv-tip { margin-top: 14px; }

/* "Iniciar en vivo" en azul cielo suave, no rojo (el dueño 2026-11-05: "en el en vivo cambia de color rojo a azul cielo suave"). */
#createLiveView .vkgl-go { background: linear-gradient(135deg, #a5e3ff 0%, #6ccbff 45%, #38b2f8 100%) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(14, 116, 184, .45); box-shadow: 0 10px 26px -10px rgba(56, 178, 248, .85), inset 0 1px 0 rgba(255, 255, 255, .55) !important; }