@media (max-width: 600px) {
	#guardarbidi {
		padding:6px 27px 30px !important;
	}
	body #bottom_nav .next {
		padding: 0px 27px 30px !important;
		height:60px !important;
		line-height:60px !important;
		width: 33% !important;
		box-sizing: border-box;
		float: left;
	}
	#bottom_nav .goback img {
		width: inherit !important;	
	}
	.ayuda,
	#next,
	#backtxt {
		float: left !important;
		width: 33% !important;
		box-sizing: border-box;
	}
	.goback {
	    height: 100% !important;
		position:relative;
	}
	.goback img {
		margin: auto;
		position: absolute;
		top: 0; left: 0; bottom: 0; right: 0;
	}
}
#top_tabs {
	z-index:1;
	text-align:center;
	position:fixed;
	top:0;
	padding:10px;
	box-sizing:border-box;
	width:100%;
	background:#fff;
}
#top_tabs #titulo { font-weight:bold; }
#top_tabs .info {
	text-align:right;
	float: right;
	max-width:70%;
	margin-top:15px;
}
#bottom_nav {
	text-align: center;
	position:fixed;
	bottom:0;
	left:0;
	box-sizing:border-box;
    background: #ddd;
	width:100%;
	height: 61px;
    overflow: hidden;
}
#bottom_nav .goback {
    float: left;
    background: #15528B;
    color: #fff;
    text-align: center;
    padding: 10px 15px 10px 15px;
    cursor: pointer;
	width: 52px;
}
#bottom_nav .goback img { width:100%; }
#bottom_nav .next {
    cursor: pointer;
    float: right;
    background: #000036;
    color: #fff;
    text-align: center;
    padding: 20px 20px 30px 20px;
    font-weight: bold;
    font-size: 18px;
}
#bottom_nav .next2 .sep {
	width:100%;
	height:1px;
	display:inline-block;
}
#bottom_nav .next2 {
    cursor: pointer;
    float: right;
    background: #000036;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    padding: 6px 0px 9px !important;
}
#bidipic_container {
	padding-top:62px !important;
	padding-bottom: 250px !important;
}
.element-invisible {
  position: absolute !important;
  top: -9999px !important;
  left: 0px !important;
  width:100%;
}
.element-visible { text-align:center; }
#marcos {
	display:block !important;
	max-height: 100px;
    overflow-y: hidden;
}
.al {
	width:20px;
	border-radius:12px;
	left:10px;
	position:absolute;
}
.ar {
	width:20px;
	border-radius:12px;
	position:absolute;
	right:10px;
}
#step1 {
	margin:0 auto;
	text-align:center;
	width:100%;
	max-width:400px;
	color:#fff !important;
	font-size:14px;
}
#step1 .b {
    cursor: pointer;
    width: 100%;
    margin-bottom: 5px;
    text-align: left;
    padding-left: 35px;
    box-sizing: border-box;
}
#step1 .b .txt {
    font-weight: bold;
	padding:25px 0;
    display: inline-block;
    text-align: center;
	font-size: 20px;	 
}
body #bidipic_container { padding-top:115px !important; }
#step1 .b img { width:55px; }
#step1 .b .img {
	float:right;
	margin-right:20px;
}
#logotop {
    width: 100%;
    position: absolute;
    left: 0;
    padding-top: 22px;
}
#logotop img { height:45px; }
.nuevofotograma {
	width: 100%;
    display: inline-block;
    max-width: 400px;
    background: #3C679B;
    font-size: 18px;
    text-align: left;
    padding: 10px 20px;
    box-sizing: border-box;
    font-weight: bold;
    cursor: pointer;
	height: 80px;
}
.nuevofotograma span { float:left; }
.nuevofotograma img { float:right; width:85px !important; }
.desdecamara img { float:right; width:85px !important; }
.desdecamara span { float:left; }
#guardarbidi { text-decoration:none !important; }
.desdecamara {
	height: 80px;
	color:#ffffff !important;
	width: 100%;
    display: inline-block;
    max-width: 400px;
	background:#D3DE00;
    font-size: 18px;
    text-align: left;
    padding: 10px 20px;
    box-sizing: border-box;
    font-weight: bold;
    cursor: pointer;
}
.ayuda {
	cursor:pointer;
	background: #FF191D;
    display: inline-block;
    padding: 20px 20px 30px 20px; 
    margin: 0 auto;
    font-weight: bold;
    font-size: 18px;
}
#step2 #loadingvid { display:none; }
.step { text-align:center; }
#bottom_nav { z-index:1; }
#progressDiv { display:none; }
.bcontainer .videocs { text-align:center; }
.arrows_capture {
    display: inline-block;
    width: 100%;
    background: #D5E100;
    max-width: 400px;
    padding: 20px;
    box-sizing: border-box;
	margin-top:6px;
}
.prevarrow { float: left; cursor:pointer; }
.nextarrow { cursor:pointer; float: right; }
.prevarrow2 {
	background: #D5E100;
	display:inline-block;
	padding:10px;
	box-sizing:border-box;
    float: left;
	margin-right:5px;
	cursor:pointer;
}
#bidipic img { border-radius: 5px; }
.marcor34 {
	float:left;
	cursor:pointer;
	background:#FF5A00;
	max-height:133px;
	margin-right:5px;
}
.marcor11 {
	margin-left:5px;
	background:#009ADA;
	float:right;
	cursor:pointer;
	max-height:133px;
}
.nextarrow2 {
	background: #D5E100;
	display:inline-block;
	padding:10px;
	box-sizing:border-box;
    float: right;
	margin-left:5px;
	cursor:pointer;
}
.btn2_content,
.tipos_marcos,
.flechas_marcos {
	display:inline-block;
	margin-top:3px;
}
.btn2_content .left {
	background: #D5E100;
	display:inline-block;
	padding:10px;
	box-sizing:border-box;
    float: left;
	margin-right:5px;
	cursor:pointer;
}
.btn2_content .left img { max-height:100px; }
.btn2_content .right img { max-height:100px; }
.btn2_content .right {
	background: #3C679B;
	display:inline-block;
	padding:10px;
	box-sizing:border-box;
    float: right;
	margin-left:5px;
	cursor:pointer;
}
.txtbtn { font-weight:bold; font-size:15px; }
.capturetxt {
	width:100%;
	font-weight:bold;
	padding-top:4px;
	text-align:center;
}
#step3 { text-align:center; }
.marcoslider.hor {
    padding: 15px 15px 60px 15px;
	background-size: 100% 100%;
    width: auto;
    display: inline-block;
    margin: 0 auto;
}
.marcoslider.ver {
    padding: 15px 15px 60px 15px;
	background-size: 100% 100%;
    width: auto !important;
    display: inline-block;
    margin: 0 auto;
}
.marcoslider.def {
    padding: 15px 15px 60px 15px;
    background-size: cover;
    width: auto;
    display: inline-block;
    margin: 0 auto;
	background:#fff;
}
.marcoslider.cua img {
	width:250px;
	height:250px;
	max-height: 250px !important;
	object-fit: cover;
}
.marcoslider.cua {
    padding: 15px 15px 60px 15px;
    background-size: cover;
    width: auto;
    display: inline-block;
    margin: 0 auto;
}
#slider_marcos { margin-top:3px; }
#slider_marcos div { cursor:pointer; }
.slick-slide img { max-width:250px; }
#w3txt {
	border: 3px solid #eee;
	padding: 2px 10px;
    box-sizing: border-box;
	resize:none;
}
.popupcontainer {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0000009c;
    z-index: 990;
}
.popupcontent {
	height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 20px;
    box-sizing: border-box;
	font-weight: bold;
    font-size: 18px;
    background: #242320;
    color: #fff !important;	
}
.popup2 {
    position: relative;
    max-width: 500px;
    width: 100%;
    height: 100%;
    max-height: 535px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    background-color: #F5F4F0;
    z-index: 100000000000000000;
    border: 8px solid #F5F4F0;
    border-radius: 3px;
    padding: 0px;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 140px;
}
.popup {
    position:       relative;
    max-width:      500px;
    width:          100%;
    height:         100%;
    max-height:     535px;
    font-family:    Arial,Helvetica,sans-serif;
    font-size:      13px;
    background-color: #F5F4F0;
    z-index:        100000000000000000;
    border:         8px solid #F5F4F0;
    border-radius:  3px;
    padding:        0;
    box-sizing:     border-box;
    margin:         0 auto;
    margin-top:     140px;
    display:        flex;
    flex-direction: column;
}
#closebtn2 {
    position:     relative !important;
    top:          auto !important;
    left:         auto !important;
    margin:       10px;
    align-self:   flex-start;
    cursor:       pointer;
    background:   #444;
    padding:      15px;
    box-sizing:   border-box;
    border-radius: 50px;
    flex-shrink:  0;
}
#closebtn2 img { width:20px; }
#closebtn3 {
	right: -10px;
    top: -70px;
    cursor: pointer;
    background: #444;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 50px;
    position: absolute;
}
#closebtn3 img { width:20px; }
.fontnew img {
	width: 100%;
    margin-bottom: 10px;
    display: inline-block;
	cursor:pointer;
	padding:6px 0;
}
#fuente {
    overflow: scroll;
    height: 100%;
    overflow-x: hidden;
}
.bidicontainerimg {
	padding-top:130px !important;
	padding-bottom:100px !important;
}
.escanea,
.socialh,
#socialshare {
	color: #000 !important;
    display: inline-block;
    padding: 20px 20px 30px 20px;
    box-sizing: border-box;
    background: #D5E100;
    margin-top: 20px;
    width: 100%;
    max-width: 400px;
}
.descargarbfbtn1 {
	width:100%;
	max-width:400px;
	margin-top:15px;
	background:#FF5E00 !important;
	border-radius: 0 !important;
	line-height:2;
}
.descargarbfbtn2 {
	width:100%;
	max-width:400px;
	background:#F71A1C !important;
	border-radius: 0 !important;
	line-height:2;
}
.descargarbfbtn2 img,
.descargarbfbtn1 img { float:right; } 
#bf_btns img { height:30px !important; }
@media (max-width: 600px) {
	.prevarrow {
		width:20% !important;
		float:left;
	}
	.prevarrow img,
	.nextarrow img { width:100%; }
	.nextarrow {
		width:20% !important;
		float:right;
	}
	#capturaframe {
		width:10% !important;
		display:inline-block;
	}
	body .descargarbfbtn2,
	body .descargarbfbtn1 {
		max-width:100% !important;
		margin-bottom:3px !important;
	}
	body #bf_btns .subirvideo {
		margin-bottom: 3px !important;
		text-align:left !important;
	}
	body #imgplay { margin-bottom:15px !important; }
	body #bf_btns { margin: 0 auto !important; }
	.bidicontainerimg br { display:none !important; }
	body .escanea, body .socialh, body #socialshare { margin-top: 0 !important; }
	#imprimirbf, #descargarbf {
		padding: 4px 20px !important;
		text-align:left !important;
	}
	body #bf_btns { margin: -32px auto !important; }
	body #bottom_nav { padding: 0 !important; }
	body #bottom_nav .next { padding: 20px 27px 30px; }
	#w3txt { min-height: 130px; }
	#bottom_nav .goback { padding: 13px 15px 10px 15px !important; }
	body #bottom_nav #backtxt,	
	body #bottom_nav .ayuda,
	body #bottom_nav #next { border-radius: 0 !important; }
	body #inputColor { max-width:100% !important; }
	body #drawingPad { max-width: 100% !important; }
	.btn2_content, .tipos_marcos, .flechas_marcos { width:100% !important; }
	.btn2_content .left,
	.btn2_content .right {
		width:49% !important;
		margin-left:0 !important;
	}
	body .subirvideo {
		border-radius: 0 !important;
		width:100%;
		box-sizing:border-box;
		max-width:100% !important;
	}
	#bottom_nav .next { border-radius:0 !important; }
	body .flechas_marcos img { max-height:35px !important; }
	body .tipos_marcos img { max-height:50px !important; }
	body #bidipic {
		width: 94% !important;
		padding: 3% 3% 12% 3% !important;
	}
	body #step3 #bidipic,
	body #step3 #bidipic.hor,
	body #step3 #bidipic.ver,
	body #step3 #bidipic.def,
	body #step3 #bidipic.cua {
    	display: block !important;
    	width: 100% !important;
    	padding: 0 !important;
    	margin: 0 !important;
    	box-sizing: border-box !important;
    	background-color: #1f1f20 !important;
	}
	body .tipos_marcos { width:100%; }
	.marcor34,
	.marcor11 {
		width:49% !important;
		margin: 0 !important;
	}
	body #bidipic img { width:100% !important; }
	body #step3 #bidipic img,
	body #step3 #bidipic #bidipicimg {
		width: 100% !important;
		max-width: 100% !important;
		max-height: none !important;
		height: auto !important;
		display: block !important;
	}
	.slick-slide img { max-width:100% !important; }
	#slider_marcos { margin-top: 9px !important; }
	#bidipic.ver #bidipicimg { aspect-ratio: 0.8 / 1; }
	#bidipic.hor #bidipicimg { aspect-ratio: 1 / 0.6; }
	body #bidipic.cua #bidipicimg {
		max-height: initial !important;
		height: inherit !important;
		object-fit: cover;
		aspect-ratio: 1 / 1;
	}
	#bidipic.cua #bidipicimg { height: inherit !important; }
	.flechas_marcos .nextarrow2 {
		width:49%;
		float:right;
		margin-left:0 !important;
	}
	.flechas_marcos .prevarrow2 {
		width:49%;
		float:left;
		margin-left:0 !important;
	}
	.arrows_capture {
		padding: 10px 20px 5px;
		max-width:100% !important;
	}
	.flechas_marcos { width:100% !important; }
	.slick-dotted.slick-slider { margin-bottom: 0 !important; }
	.slick-dots { display:none !important; }
	#logotop img {
		height: 30px !important;
		position: absolute;
		left: 100px;
		top: 0px;
	}
}
#descargarbf { box-sizing: border-box !important; }

/* ============================================================
   BIDIPIC — NUEVO DISEÑO
   ============================================================ */

html, body {
    background: #111 !important;
    padding: 0 !important;
    margin: 0 !important;
}
#bidipic_container, #bidipic_container * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
#top_tabs         { display: none !important; }
#bottom_nav       { display: none !important; }
.volverescritorio { display: none !important; }
#bidipic_container {
    padding-top:    48px !important;
    padding-bottom: 20px !important;
    background:     #111 !important;
    min-height:     100vh !important;
}
#bp_header {
    background:  transparent !important;
    padding:     0 !important;
    margin-top:  0 !important;
}
#bp_statusbar {
    display: none !important;
}
#bp_header_main {
    background:      transparent !important;
    display:         flex !important;
    justify-content: space-between !important;
    align-items:     center !important;
    padding:         8px 14px !important;
}
#bp_logo {
    display:     flex;
    align-items: center;
    gap:         6px;
}
#bp_logo img { height: 22px; display: block; }
#bp_logo_text {
	display:     none;
    color:       #fff;
    font-size:   20px;
    font-weight: 700;
}
#bp_help_btn {
    width:       28px;
    height:      28px;
    border:      none !important;
    border-radius: 50%;
    display:     flex;
    align-items: center;
    justify-content: center;
    cursor:      pointer;
    color:       #aaa;
    font-weight: bold;
    font-size:   14px;
    user-select: none;
}
#bp_help_btn img { width: 24px !important; height: 24px !important; }
#bp_help_btn:hover { color: #fff; }

#bp_logo_group {
    display:     flex;
    align-items: center;
    gap:         10px;
	flex:        1;
}
.bp-extra-icon {
    width:  28px !important;
    height: 28px !important;
}
#bp_firma_icons .bp-extra-icon:first-child {
    margin-left: -28px;
}
#bp_firma_icons {
    display:     none;
    align-items: center;
    gap:         6px;
	margin-left: auto;
	margin-right: 10px
}

/* Iconos de certificado apagados (usuario sin firma biométrica) */
.bp-extra-icon.bp-icon-off,
.bp-texto-icon.bp-icon-off img {
	filter: grayscale(100%) brightness(0.55) !important;
	opacity: 0.5 !important;
}
.bp-texto-icon.bp-icon-off {
	cursor: default !important;
	pointer-events: none !important;
}
#bp_extra_timer {
    font-size:      15px;
    letter-spacing: 1px;
}
#bp_extra_timer.bp-active   { color: #fff; }
#bp_extra_timer.bp-inactive { color: #999; }

/* ---- FOOTER ---- */
#bp_footer {
    position:        fixed;
    bottom:          0;
    left:            0;
    width:           100%;
    background:      transparent !important;
    border-top:      none !important;
    display:         flex;
    justify-content: space-around;
    align-items:     center;
    padding:         8px 4px 16px;
    box-sizing:      border-box;
    z-index:         1000;
}
.bp-nav-btn {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            3px;
    cursor:         pointer;
    color:          #aaa;
    font-size:      10px;
    min-width:      44px;
    user-select:    none;
}
.bp-nav-btn img { width: 22px !important; height: 22px !important; object-fit: contain !important; }
.bp-nav-btn:hover { color: #fff; }
.bp-nav-register-circle {
    width:           22px;
    height:          22px;
    border:          1.5px solid #aaa;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.bp-nav-register-circle svg { width: 12px; height: 12px; }

/* ---- POPUP AYUDA ---- */
#bidiayuda {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 99999;
    align-items: flex-end;
    justify-content: center;
}
.bp-help-panel {
    background: #1a1a1a;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 65px;
}
.bp-help-arrow-close {
    text-align: right;
    color: #aaa;
    font-size: 22px;
    padding: 10px 18px 6px;
    cursor: pointer;
    line-height: 1;
    user-select: none;
}
.bp-help-arrow-close:hover { color: #fff; }
.bp-help-body { overflow-y: auto; padding: 0 0 24px; }
.bp-help-section-block {
    border-bottom: 1px solid #555;
    margin: 0 20px;
    padding: 10px 4px;
}
.bp-help-section-block:last-child { border-bottom: none; }
.bp-help-section-title {
    font-size: 11px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 5px;
    font-weight: 600;
}
.bp-help-section-content {
    font-size: 15px;
    color: #fff;
    line-height: 1.6;
    font-weight: 400;
}
.bp-help-section-content a { color: #f4a261; text-decoration: none; }
.bp-help-section-content a:hover { text-decoration: underline; }

/* ---- PASO 1 ---- */
#step1 {
    display:        flex !important;
    flex-direction: column !important;
    padding:        16px 20px !important;
    max-width:      100% !important;
    width:          100% !important;
    box-sizing:     border-box !important;
    gap:            0 !important;
    margin-top:     -140px !important;
    text-align:     center;
    color:          #fff !important;
    font-size:      14px;
}
#selec_video {
    display:        flex !important;
    flex-direction: column !important;
    gap:            16px !important;
    padding:        16px 2px !important;
    background:     transparent !important;
    border:         none !important;
}
.bp-card-wrapper {
    border:        1px solid #444 !important;
    border-radius: 12px !important;
    padding:       10px !important;
    box-sizing:    border-box !important;
    width:         100% !important;
}
.bp-card {
    background:      #1c1c1c !important;
    border:          none !important;
    border-radius:   10px !important;
    padding:         0 !important;
    width:           100% !important;
    height:          170px !important;
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             8px !important;
    box-sizing:      border-box !important;
    cursor:          pointer !important;
    margin:          0 !important;
}
.bp-card:hover  { background: #252525; }
.bp-card:active { background: #2d2d2d; }
.bp-card-icon { width: 32px !important; height: 32px !important; object-fit: contain !important; }
.bp-card .bp-card-icon[src*="youtube"] {
    height:        80px !important;
    width:         auto !important;
    margin-bottom: -18px !important;
}
.bp-card-label {
    font-size:   13px;
    font-weight: 400 !important;
    color:       #fff;
    text-align:  center;
    line-height: 1.4;
}
.bp-card-label.bp-card-bold { font-weight: 800 !important; }
.bp-card-sub { font-size: 11px; color: #777; text-align: center; }
.bp-yt-badge-wrap { display: flex; align-items: center; gap: 2px; }
.bp-yt-word       { font-size: 14px; color: #fff; font-weight: 600; }
.bp-yt-badge      { background: #fff; color: #000; font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }

/* ---- PASO 2 ---- */
#step2.element-visible {
    display:        flex !important;
    flex-direction: column !important;
    padding:        8px !important;
    box-sizing:     border-box !important;
    margin-top:     -120px !important;
    height:         calc(100vh - 160px) !important;
}
#step2 .videoc #thumbnailContainer {
    margin-top: 12px !important;
}
#previavideo {
    border:        1px solid #fff !important;
    border-radius: 12px !important;
    padding:       4px !important;
    box-sizing:    border-box !important;
    background:    #1f1f20 !important;
	flex:          1 !important;
}
.videoc { padding: 0 !important; margin: 0 !important; }
#videoc { width: 100% !important; border-radius: 10px !important; overflow: hidden !important; }
#videoc video {
    width:         100% !important;
    height:        auto !important;
    min-height:    42vh !important;
    max-height:    45vh !important;
    border-radius: 10px !important;
    object-fit:    cover !important;
    display:       block !important;
}

#videoc.bp-video-ver video { object-fit: contain !important; }
/* El video horizontal se estaba recortando por los lados: la caja impone un
   alto minimo de 42vh y el cover llenaba ese alto cortando los bordes. Con
   el alto libre y contain se ve entero y se aprecia que es apaisado. */
#videoc.bp-video-hor video {
	object-fit: contain !important;
	min-height: 0 !important;
	height: auto !important;
	max-height: 45vh !important;
}
.arrows_capture {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    background:      #1c1c1c !important;
    width:           100% !important;
    max-width:       100% !important;
    padding:         10px 24px !important;
    box-sizing:      border-box !important;
    margin:          0 !important;
    border-radius:   10px !important;
    position:        relative !important;
}
.arrows_capture_wrapper {
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 10px !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
}
.prevarrow, .nextarrow {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    width:          auto !important;
    cursor:         pointer !important;
    background:     transparent !important;
    float:          none !important;
}
.prevarrow img, .nextarrow img {
    width:  34px !important;
    height: 34px !important;
    filter: brightness(0) invert(1) !important;
}
.prevarrow::after, .nextarrow::after {
    content:    "Deslizar";
    font-size:  10px;
    color:      #ccc;
    margin-top: 8px !important;
}
#capturaframe {
    width:            48px !important;
    height:           48px !important;
    background-color: #db0000 !important;
    padding:          5px !important;
    border-radius:    50% !important;
    border:           3px solid #fff !important;
    box-sizing:       border-box !important;
    margin:           0 !important;
    cursor:           pointer !important;
    box-shadow:       0 0 12px rgba(255,255,255,0.4) !important;
}
.capturetxt {
    position:        absolute !important;
    bottom:          1px !important;
    left:            50% !important;
    transform:       translateX(-50%) !important;
    font-size:       10px !important;
    color:           #fff !important;
    font-weight:     bold !important;
    width:           auto !important;
    padding:         0 !important;
    letter-spacing:  1px !important;
}
#thumbnailContainer {
    width:         100% !important;
    padding:       0 !important;
    box-sizing:    border-box !important;
    margin:        0 !important;
    background:    #1c1c1c !important;
    border-radius: 10px !important;
	margin-top: 8px !important;
}
#thumbnailContainer .vimg {
    border-radius: 6px !important;
    overflow:      hidden !important;
    position:      relative !important;
    margin:        0 !important;
}
#thumbnailContainer .vimg img {
    width:      100% !important;
    height:     100px !important;
    object-fit: cover !important;
    display:    block !important;
}
#thumbnailContainer .slick-slide { margin: 0 !important; padding: 0 !important; }
#thumbnailContainer .slick-track { margin: 0 !important; }
#thumbnailContainer .slick-list  { margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
#thumbnailContainer .slick-slide img { width: 100% !important; max-width: 100% !important; }
.ctime {
    display:       block !important;
    text-align:    center !important;
    font-size:     12px !important;
    color:         #fff !important;
    background:    transparent !important;
    padding:       2px 6px !important;
    border-radius: 3px !important;
    font-weight:   bold !important;
}
#thumbnailContainer .vimg {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}
/* ---- PASO 3 ---- */
#step3.element-visible {
    display:        flex !important;
    flex-direction: column !important;
    padding:        8px !important;
    box-sizing:     border-box !important;
    margin-top:     -120px !important;
    height:         calc(100vh - 160px) !important;
}
#step3 br { display: none !important; }
#previamarco {
    border:        1px solid #fff !important;
    border-radius: 12px !important;
    padding:       4px !important;
    box-sizing:    border-box !important;
    background:    #1f1f20 !important;
    overflow:      hidden !important;
    flex: 1 !important;
}
#step3 .videoc { padding: 0 !important; margin: 0 !important; }
body #step3 #bidipic,
body #step3 #bidipic.def {
    display:             flex !important;
    align-items:         flex-start !important;
    justify-content:     center !important;
    width:               100% !important;
    aspect-ratio:        9 / 16 !important;
    background-size:     100% 100% !important;
    background-position: center !important;
    border-radius:       10px !important;
    overflow:            hidden !important;
    padding:             8px !important;
    margin:              0 !important;
    box-sizing:          border-box !important;
    background-color:    #1f1f20 !important;
}

body #step3 #bidipic.ver {
    aspect-ratio: 9 / 16 !important;
}
body #step3 #bidipic.hor {
    aspect-ratio: 4 / 3 !important;
}
body #step3 #bidipic.cua {
    aspect-ratio: 1 / 1 !important;
}

body #step3 #bidipic img,
body #step3 #bidipic #bidipicimg {
    width:      100% !important;
    height:     100% !important;
    object-fit: contain !important;
    margin:     0 !important; padding: 0 !important;
    border-radius: 0 !important;
    display:    block !important;
}
#step3 .tipos_marcos { display: none !important; }
#step3 #slider_marcos {
    width:         100% !important;
    background:    #1c1c1c !important;
    border-radius: 10px !important;
    overflow:      hidden !important;
    margin-top:    14px !important;
    padding:       0 !important;
}
#step3 #slider_marcos .slick-list,
#step3 #slider_marcos .slick-track {
    height: auto !important;
    overflow: visible !important;
}
#step3 #slider_marcos .marcoslider.ver img {
    max-height: 90px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}
@media (min-width: 1024px) {
	#step3 #slider_marcos .marcoslider.ver img {
		max-height: 70px !important;
	}
	#step3 #slider_marcos:has(.marcoslider.ver) {
		overflow: visible !important;
		min-height: 130px !important;
	}
	#step3 #slider_marcos:has(.marcoslider.ver) .slick-list,
	#step3 #slider_marcos:has(.marcoslider.ver) .slick-track {
		overflow: visible !important;
	}
}
#step3 #slider_marcos .slick-slide img {
    width:      100% !important;
    height:     auto !important;
    object-fit: contain !important;
}
#step3 #slider_marcos .slick-slide { margin: 0 !important; padding: 0 !important; }
#step3 #slider_marcos .slick-track,
#step3 #slider_marcos .slick-list  { margin: 0 !important; padding: 0 !important; }
#step3 .marcoslider {
    padding: 10px 10px 40px 10px;
}

#step3 .marcoslider img {
    width:      100% !important;
    height:     auto !important;
    object-fit: contain !important;
}
#step3 #slider_marcos .slick-slide {
    padding: 0 4px !important;
}
#step3 #slider_marcos .slick-list {
    padding: 0 !important;
    margin: 0 -4px !important;
}
#step3 .arrows_capture_wrapper {
    margin-top: -42vh !important;   /* ← sube los botones y, con ellos, los marcos */
}
#bp_texto_popup {
    position:      fixed;
    left:          28px;
    bottom:        110px;
    width:         55%;
    max-width:     180px;
    background:    rgba(45,45,45,0.98);
    border:        1px solid rgba(255,255,255,0.5);
    border-radius: 12px;
    padding:       10px 12px 14px 12px;
    box-sizing:    border-box;
    z-index:       1500;
    text-align:    left;
}
.bp-texto-msg {
    color:       #fff;
    font-size:   13px;
    line-height: 1.4;
    margin-bottom: 12px;
}
.bp-texto-icons {
    display:    flex;
    gap:        60px;
    margin-top: 24px;
}
.bp-texto-icon {
    width:           40px;
    height:          40px;
    border:          1px solid rgba(255,255,255,0.4);
    border-radius:   8px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
}
.bp-texto-icon img {
    width:  20px;
    height: 20px;
}
#step3_1.element-visible {
    display:        flex !important;
    flex-direction: column !important;
    padding:        8px !important;
    box-sizing:     border-box !important;
    margin-top:     -120px !important;
    height:         calc(100vh - 160px) !important;
    position: relative !important;
    top:            auto !important;
}
#step3_1.element-visible::before {
    content:    "⌄";
    position:   absolute;
    bottom:     -1px;
    left:       143px;
    color:      #aaa;
    font-size:  20px;
    line-height: 1;
    z-index:    10;
}
#previafirma {
    border:        1px solid #fff !important;
    border-radius: 12px !important;
    padding:       4px !important;
    box-sizing:    border-box !important;
    background:    #1f1f20 !important;
    overflow:      hidden !important;
    flex:          1 !important;
    display:       flex !important;
    flex-direction: column !important;
    gap:           4px !important;
    justify-content: flex-start !important;
}
#previafirma .videoc {
    flex:          0 0 55% !important;
    background:    #fff !important;
    border-radius: 10px !important;
    overflow:      hidden !important;
    display:       flex !important;
    align-items:   center !important;
    justify-content: center !important;
}
#previafirma .bp-firma-clear-btn {
    margin-top: 0 !important;
}
#drawingPad {
    width:  100% !important;
    height: 100% !important;
    touch-action: none;
}
.bp-firma-btns {
    display:    flex !important;
    gap:        8px !important;
    margin-top: 4px !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
}
.bp-firma-clear-btn,
.bp-firma-save-btn {
    flex:           1 !important;
    background:     #3a3a3a !important;
    color:          #fff !important;
    text-align:     center !important;
    font-weight:    bold !important;
    font-size:      14px !important;
    padding:        16px 8px !important;
    border-radius:  8px !important;
    cursor:         pointer !important;
    letter-spacing: 1px !important;
    border:         1px solid #444 !important;
}
.bp-firma-clear-btn span,
.bp-firma-save-btn span {
    font-weight: 400 !important;
    font-size:   12px !important;
    display:     block !important;
    margin-top:  2px !important;
}
#step3_2.element-visible {
    display:        flex !important;
    flex-direction: column !important;
    padding:        8px !important;
    box-sizing:     border-box !important;
    margin-top:     -120px !important;
    height:         calc(100vh - 160px) !important;
    position: relative !important;
    top:            auto !important;
}
#previatexto {
    border:          1px solid #fff !important;
	border-radius: 12px !important;
   	padding: 4px 14px 4px 8px !important;
    box-sizing:      border-box !important;
    background:      #1f1f20 !important;
    overflow:        hidden !important;
    flex:            1 !important;
    display:         flex !important;
    flex-direction:  column !important;
    gap:             4px !important;
    justify-content: flex-start !important;
}
#previatexto .videoc {
    flex:           0 0 55% !important;
    background:     #fff !important;
    overflow:       hidden !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    stretch !important;
    margin:         4px !important;
    box-sizing:     border-box !important;
}
#bp_fuente_preview {
    text-align:  center !important;
    padding:     8px 8px 0 8px !important;
    background:  #fff !important;
    flex-shrink: 0 !important;
}
#bp_fuente_preview img {
    max-width:  100% !important;
    max-height: 36px !important;
    object-fit: contain !important;
    filter:     invert(1) !important;
}
#bp_w3txt {
    flex:        1 !important;
    width:       100% !important;
    border:      none !important;
    outline:     none !important;
    padding:     16px !important;
    font-size:   18px !important;
    resize:      none !important;
    box-sizing:  border-box !important;
    background:  #fff !important;
    color:       inherit !important;
}
.bp-texto-clear-btn,
.bp-texto-save-btn {
    flex:           1 !important;
    background:     #2a2a2a !important;
    color:          #fff !important;
    text-align:     center !important;
    font-weight:    bold !important;
    font-size:      14px !important;
    padding:        16px 8px !important;
    border-radius:  8px !important;
    cursor:         pointer !important;
    letter-spacing: 1px !important;
    border:         1px solid #444 !important;
}
.bp-texto-clear-btn span,
.bp-texto-save-btn span {
    font-weight: 400 !important;
    font-size:   12px !important;
    display:     block !important;
    margin-top:  2px !important;
}
#bp_fuente_preview {
    text-align:  center !important;
    padding:     6px 4px !important;
    background:  transparent !important;
    flex-shrink: 0 !important;
}
#bp_fuente_preview img {
    max-width:  100% !important;
    max-height: 36px !important;
    object-fit: contain !important;
    filter:     invert(1) !important;
}
#step3_2.element-visible::before {
    content:    "⌄";
    position:   absolute;
    bottom:     -1px;
    left:       143px;
    color:      #aaa;
    font-size:  20px;
    line-height: 1;
    z-index:    10;
}
#bp_color_popup {
    position:      fixed;
    left:          50%;
    transform:     translateX(-50%);
    bottom:        80px;
    width:         92%;
    max-width:     360px;
    background:    rgba(30,30,30,0.97);
    border:        1px solid rgba(255,255,255,0.3);
    border-radius: 12px;
    padding:       18px;
    box-sizing:    border-box;
    z-index:       2000;
}
.bp-color-titulo {
    color:         #fff;
    font-size:     13px;
    font-weight:   bold;
    margin-bottom: 10px;
    text-align:    center;
}
.bp-color-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   6px;
    margin-bottom:         12px;
}
.bp-color-item {
    width:         100%;
    aspect-ratio:  1;
    border-radius: 4px;
    cursor:        pointer;
    height:        22px;
}
.bp-color-bottom {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}
.bp-color-fila-central {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             6px;
}
.bp-color-personalizado {
    background:  transparent;
    color:       #4a9eff;
    font-size:   11px;
    cursor:      pointer;
    border:      none;
    padding:     0;
    white-space: nowrap;
}
.bp-color-elegido-wrap {
    display:     flex;
    align-items: center;
    gap:         8px;
}
.bp-color-elegido-label {
    color:       #aaa;
    font-size:   11px;
    white-space: nowrap;
    margin-left: auto;
}
#bp_color_elegido {
    width:         30px;
    height:        16px;
    flex:          none;
    border-radius: 3px;
    border:        1px solid #555;
}
.bp-color-acciones {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}
.bp-color-cancelar {
    color:     #ff4444;
    font-size: 12px;
    cursor:    pointer;
}
.bp-color-establecer {
    background:  transparent;
    color:       #4a9eff;
    font-size:   12px;
    cursor:      pointer;
    border:      none;
    padding:     0;
}
.bp-color-establecer span {
    display: inline;
}
#bp_aspecto_popup {
    position:      fixed;
    right:         16px;
    bottom:        80px;
    width:         200px;
    background:    rgba(30,30,30,0.97);
    border:        1px solid rgba(255,255,255,0.3);
    border-radius: 12px;
    padding:       12px;
    box-sizing:    border-box;
    z-index:       2000;
}
.bp-aspecto-titulo {
    color:         #fff;
    font-size:     12px;
    font-weight:   bold;
    text-align:    right;
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.bp-aspecto-opciones {
    margin-bottom: 10px;
}
.bp-aspecto-opcion {
    color:       #fff;
    font-size:   11px;
    padding:     3px 0;
    cursor:      pointer;
    text-align:  right;
}
.bp-aspecto-opcion:hover { color: #ccc; }
.bp-aspecto-btns {
    display:         flex;
    justify-content: flex-end;
    gap:             6px;
}
.bp-aspecto-btn {
    background:    #2a2a2a;
    color:         #aaa;
    font-size:     9px;
    padding:       6px 8px 5px;
    border-radius: 6px;
    cursor:        pointer;
    border:        1px solid #444;
    text-align:    center;
    min-width:     36px;
}
.bp-aspecto-btn::before {
    display:       block;
    margin:        0 auto 4px;
    border:        1.5px solid #aaa;
    content:       '';
}
.bp-aspecto-btn:nth-child(1)::before { width: 14px; height: 14px; }
.bp-aspecto-btn:nth-child(2)::before { width: 20px; height: 12px; }
.bp-aspecto-btn:nth-child(3)::before { width: 12px; height: 18px; }
.bp-aspecto-btn-active::before { border-color: #fff !important; }
.bp-aspecto-btn-disabled::before { border-color: #333 !important; }
.bp-aspecto-btn-active {
    background: #444;
    color:      #fff;
    border:     1px solid #fff;
}
.bp-aspecto-disabled {
    opacity:        0.4 !important;
    cursor:         default !important;
    pointer-events: none !important;
}
.bp-aspecto-btn-disabled {
    background:     #1a1a1a !important;
    color:          #444 !important;
    border:         1px solid #333 !important;
    cursor:         default !important;
    pointer-events: none !important;
}
#step3_3.element-visible {
    display:        flex !important;
    flex-direction: column !important;
    padding:        8px !important;
    box-sizing:     border-box !important;
    margin-top:     -120px !important;
    height:         calc(100vh - 160px) !important;
    position:       relative !important;
    top:            auto !important;
}
#previaconfirm {
    border:          1px solid #fff !important;
    border-radius:   12px !important;
    padding:         4px !important;
    box-sizing:      border-box !important;
    background:      #1f1f20 !important;
    overflow:        hidden !important;
    flex:            1 !important;
    display:         flex !important;
    flex-direction:  column !important;
    gap:             4px !important;
    justify-content: flex-start !important;
}
#previaconfirm_frame {
    flex:            0 1 auto !important;
    min-height:      0 !important;
    max-height:      48% !important;        /* tope de alto para verticales */
    width:           100% !important;
    margin:          0 auto !important;
    overflow:        hidden !important;
    border-radius:   10px !important;
    /* el aspect-ratio lo pone mostrar_confirm() por JS según el marco */
}
#previaconfirm_frame #bidipic {
    width:           100% !important;       /* llena el ancho → sin bandas laterales */
    height:          100% !important;       /* llena el alto del contenedor */
    aspect-ratio:    inherit;
    background-size: 100% 100% !important;
    transform:       none !important;
    margin:          0 !important;
    padding:         0 !important;
    display:         block !important;
    box-sizing:      border-box !important;
}
#previaconfirm_frame #bidipic img,
#previaconfirm_frame #bidipic #bidipicimg {
    width:            100% !important;
    height:           100% !important;
    object-fit:       contain !important;
    display:          block !important;
    position:         relative !important;
    z-index:          5 !important;
    transform:        scale(1.40) translate(-4%, 19%) !important;
    transform-origin: center !important;
}
.bp-confirm-btns {
    display:  flex !important;
    gap:      8px !important;
    padding:  0 4px 4px 4px !important;
	margin-top: 20px !important;
}
.bp-confirm-btn {
    flex:            1 !important;
    background:      #2a2a2a !important;
    border:          1px solid #444 !important;
    border-radius:   8px !important;
    display:         flex !important;
    flex-direction:  column-reverse !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         18px 6px !important;
    cursor:          pointer !important;
    gap:             4px !important;
}
.bp-confirm-btn img {
    width:      24px !important;
    height:     24px !important;
    object-fit: contain !important;
}
.bp-confirm-btns .bp-confirm-btn:first-child {
    gap: 0 !important;
	justify-content: center !important;
    padding-top: 8px !important;
}
.bp-confirm-btn:first-child img {
    width:      32px !important;
    height:     32px !important;
    object-fit: contain !important;
}
.bp-confirm-btn span {
    color:          #fff !important;
    font-size:      11px !important;
    font-weight:    bold !important;
    text-align:     center !important;
    letter-spacing: 1px !important;
}
.bp-confirm-btn small {
    font-weight: 400 !important;
    font-size:   10px !important;
    display:     block !important;
}
/* ============ PANTALLA FINAL (bidipic generada) ============ */
#bp_final_media {
    position:        relative;
    border-radius:   12px;
    overflow:        hidden;
    flex:            0 0 auto;
    display:         flex;
    align-items:     center;
    justify-content: center;
    max-height: 52vh;
    width: 100% !important;
    max-width:       100% !important;
    margin:          0 auto !important;
    background:      #1c1c1c;
    border:          1px solid #444;
    box-sizing:      border-box;
    transform:        scaleX(1.15) !important;
    transform-origin: center !important;
}
#bp_final_media a#bp_final_link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        relative;
    width:           auto !important;
}
#bp_final_media img#bp_final_img {
    width:      100% !important;
    height: auto !important;
    max-width:  100%;
    max-height: 52vh;
    object-fit: fill;
    display:    block;
}
#bp_final_play {
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    width:           64px;
    height:          64px;
    border-radius:   50%;
    background:      rgba(0,0,0,0.55);
    border:          2px solid #2ee6a8;
    color:           #2ee6a8;
    font-size:       26px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding-left:    5px;
    box-sizing:      border-box;
}
#bp_final_share {
    display:         flex;
    justify-content: space-around;
    align-items:     center;
    background:      #1f1f20;
    border:          1px solid #444;
    border-radius:   12px;
    padding:         12px 8px;
}
.bp-share-btn {
    width:           38px;
    height:          38px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none;
}
.bp-share-btn img {
    width:      26px;
    height:     26px;
    object-fit: contain;
}
#bp_final_bottom {
    display: flex;
    gap:     10px;
}
#bp_final_qr {
    flex:            1;
    background:      #fff;
    border-radius:   12px;
    padding:         8px;
    display:         flex;
    align-items:     center;
    justify-content: center;
}
#bp_final_qr img {
    width:     100%;
    max-width: 160px;
    display:   block;
}
#bp_final_dl {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            10px;
}
.bp-dl-btn {
    flex:            1;
    background:      #2a2a2a;
    border:          1px solid #444;
    border-radius:   10px;
    color:           #fff;
    text-decoration: none;
    display:         flex;
    align-items:     center;
    padding: 8px 14px !important;
    justify-content: space-between !important;
    font-weight:     bold;
    font-size:       14px;
}
#bp_final_share,
#bp_final_bottom {
    flex: 0 0 auto;
}
.bp-dl-btn img {
    width:      25px !important;
    height:     25px !important;
    object-fit: contain !important;
}
#bp_final_qr img { max-width: 90px; }
.bp-share-btn { width: 34px; height: 34px; }
.bp-share-btn img { width: 22px; height: 22px; }
.bp-dl-btn { font-size: 13px; padding: 8px 4px; }
#step6.element-visible {
    display:        flex !important;
    flex-direction: column !important;
    height:         100% !important;
    box-sizing:     border-box !important;
}
#step6.element-visible {
    justify-content: flex-start !important;
}
#step6 #infoticket1,
#step6 #infoticket2,
#step6 #infoticket3 {
    display: none !important;
}
#bp_final {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    padding:        4px;
    box-sizing:     border-box;
    overflow:       hidden;
	border:        1px solid #fff !important;
    border-radius: 12px !important;
    padding:       8px !important;
    background:    #1f1f20 !important;
}
#bidipic_container:has(#step6.element-visible) {
    padding-top:     1px !important;
    justify-content: flex-start !important;
    align-items:     stretch !important;
}
#step6 br { display: none !important; }

#step6 > *:not(#bp_final):not(#loadingvid2):not(#status2) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

#bp_final {
    margin-top: 0 !important;
}

#bp_final > *:first-child {
    margin-top: 0 !important;
}

#bp_final {
    height:     auto !important;
    max-height: calc(100vh - 1px - 90px) !important;
}
#bp_final_video {
    position:   absolute !important;
    top:        3.9% !important;
    left:       2.9% !important;
    width:      94.6% !important;
    height:     79.6% !important;
    transform:  none !important;
    object-fit: fill !important;
    z-index:    6 !important;
    border-radius: 0 !important;
}
.bp-dl-bloqueado {
	opacity: 0.4;
	filter: grayscale(1);
	cursor: not-allowed;
	pointer-events: none;
}
/* Corrección del frame HORIZONTAL en la pantalla de confirmación */
#previaconfirm_frame #bidipic.hor {
	height: 100% !important;
	max-height: 100% !important;
	overflow: hidden !important;
}
#previaconfirm_frame #bidipic.hor img,
#previaconfirm_frame #bidipic.hor #bidipicimg {
	transform: none !important;
	object-fit: contain !important;
	width: 100% !important;
	height: 100% !important;
}
/* Encoger solo el vídeo horizontal dentro de su marco de colores (confirmación) */
#previaconfirm_frame #bidipic.hor #bidipicimg {
	transform: translate(-8%, 8%) !important;
	width: 75% !important;
	height: 75% !important;
	object-fit: contain !important;
	margin: auto !important;
}
/* Quitar el estirón horizontal de la pantalla final */
#bp_final_media {
	transform: none !important;
}
#bp_final_media img#bp_final_img {
	object-fit: contain !important;
}
/* Estirar el recuadro final hasta abajo para llenar el hueco */
#step6.element-visible #bp_final.bp-final-hor {
	height: 100% !important;
	max-height: calc(100vh - 170px) !important;
	justify-content: space-around !important;
}
/* ---- BLOQUE YOUTUBE: todo dentro del mismo recuadro ---- */
.bp-yt-box {
	border:        1px solid #fff !important;
	border-radius: 12px !important;
	padding:       12px !important;
	box-sizing:    border-box !important;
	background:    #1f1f20 !important;
	display:        flex !important;
	flex-direction: column !important;
	gap:            12px !important;
	width:          100% !important;
}
.bp-yt-box #youtubeinput {
	width:         100% !important;
	box-sizing:    border-box !important;
	background:    #2a2a2a !important;
	border:        1px solid #444 !important;
	border-radius: 8px !important;
	color:         #fff !important;
	padding:       14px 12px !important;
	font-size:     14px !important;
	outline:       none !important;
	margin:        0 !important;
}
.bp-yt-box #youtubeinput::placeholder { color: #888 !important; }
.bp-yt-box #loadyt {
	display:        block !important;
	width:          100% !important;
	box-sizing:     border-box !important;
	background:     #db0000 !important;
	color:          #fff !important;
	text-align:     center !important;
	font-weight:    bold !important;
	font-size:      15px !important;
	padding:        14px 8px !important;
	border-radius:  8px !important;
	cursor:         pointer !important;
	margin:         0 !important;
	text-decoration: none !important;
}
.bp-yt-box #arrows_capture2 { margin: 0 !important; }
.bp-yt-box #player,
.bp-yt-box #player iframe {
	width:         100% !important;
	border-radius: 8px !important;
}

/* Que se respete el display:none en los controles de captura */
.arrows_capture[style*="display:none"],
.arrows_capture[style*="display: none"] {
	display: none !important;
}
/* Ocultar el recuadro del vídeo normal en modo YouTube mientras no haya miniaturas */
#step2:has(#youtube_container[style*="block"]) #previavideo:not(:has(.vimg)) {
	display: none !important;
}
/* Que se respete el display:none del botón de cargar */
.bp-yt-box #loadyt[style*="display:none"],
.bp-yt-box #loadyt[style*="display: none"] {
	display: none !important;
}
/* Subir un poco las miniaturas dentro del bloque de YouTube */
.bp-yt-box #thumbnailContainer {
	margin-top: -30px !important;
}
/* Botones de captura y flechas más pequeños en el bloque de YouTube */
.bp-yt-box #capturaframeyt {
	width:            58px !important;
	height:           58px !important;
	background-color: #db0000 !important;
	padding:          5px !important;
	border-radius:    50% !important;
	border:           3px solid #fff !important;
	box-sizing:       border-box !important;
	margin:           0 !important;
	box-shadow:       0 0 12px rgba(255,255,255,0.4) !important;
}
.bp-yt-box .prevarrow img,
.bp-yt-box .nextarrow img {
	width:  26px !important;
	height: 26px !important;
}
/* Icono de casa: vuelve al escritorio del usuario */
#bp_icon_casa {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin-right: 4px;
}
/* Aviso de tiempo agotado en el contador de firma */
#bp_extra_timer.bp-inactive {
	font-size: 12px !important;
	letter-spacing: 0 !important;
}
/* Foto y video certificado: en la confirmacion no se ofrece capturar otro
   frame ni subir otro video. Si no queda ningun boton, se quita la barra. */
body.bp-cert-flujo #step3_3 .bp-confirm-btn:not(.bp-confirm-btn-crear) {
	display: none !important;
}
body.bp-cert-flujo #step3_3 .bp-confirm-btns:not(:has(.bp-confirm-btn-crear)) {
	display: none !important;
}
/* ============================================================
   DISEÑO ESCRITORIO (>=1024px)
   Reemplaza TODA la sección anterior desde este comentario
   hasta el final del archivo.
   ============================================================ */
@media (min-width: 1024px) {

	/* Header móvil oculto en escritorio */
	#bp_header { display: none !important; }

	/* Contenedor principal: dos paneles en fila */
	#bidipic_container {
		display: flex !important;
		flex-direction: row !important;
		justify-content: flex-start !important;
		align-items: stretch !important;
		gap: 16px !important;
		padding: 60px 24px 24px 24px !important;
		box-sizing: border-box !important;
		min-height: 100vh !important;
	}

	/* Columna izquierda: los steps (el step2 vive en el panel derecho) */
	#step1:not(.element-invisible),
	#step3_1.element-visible,
	#step3_2.element-visible{
		width: 380px !important;
		max-width: 380px !important;
		flex: 0 0 380px !important;
		margin: 0 !important;
		margin-top: -45px !important;
		height: calc(100vh - 240px) !important;
		position: relative !important;
		top: auto !important;
	}
	/* Mantener columna izquierda (cards) durante la confirmación step3_3 */
	#bidipic_container:has(#step3_3.element-visible) #step1 {
		width: 380px !important;
		max-width: 380px !important;
		flex: 0 0 380px !important;
		margin: 0 !important;
		margin-top: -45px !important;
		height: calc(100vh - 240px) !important;
		position: relative !important;
		top: auto !important;
		display: flex !important;
	}
	/* Ocultar el preview de vídeo de la columna en la pantalla final */
	#bidipic_container:has(#step6.element-visible) #previavideo {
		display: none !important;
	}
	/* Ocultar textos de carga/debug de la columna en la pantalla final */
	#bidipic_container:has(#step6.element-visible) #status,
	#bidipic_container:has(#step6.element-visible) #statusResponse {
		display: none !important;
	}

	/* Ocultar la lista de archivos de subida en la pantalla final */
	#bidipic_container:has(#step6.element-visible) #fileList,
	#bidipic_container:has(#step6.element-visible) #upload_form {
		display: none !important;
	}
	/* El nombre del archivo subido no se muestra en el diseño nuevo */
	#fileList,
	#statusResponse {
		display: none !important;
	}
	/* Recuadro de vista previa vacío en la columna izquierda */
	#previavideo:empty {
		display: none !important;
	}

	/* Panel derecho de previsualización */
	#bp_panel_derecho {
		display: flex !important;
		flex-direction: column !important;
		flex: 1 1 auto !important;
		border: 1px solid #444;
		border-radius: 12px;
		background: #1a1a1a;
		margin-top: -94px !important;
		height: calc(100vh - 32px) !important;
		box-sizing: border-box;
		overflow: hidden;
	}

	/* Card estática del panel (pantalla inicial) */
	#bp_panel_card {
		width: 336px;
		height: 160px;
		background: #1c1c1c;
		border: 1px solid #444;
		border-radius: 12px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		cursor: pointer;
		margin: auto !important;
	}
	/* Ocultar el preview de vídeo de la columna izquierda durante la confirmación */
	#bidipic_container:has(#step3_3.element-visible) #previavideo {
		display: none !important;
	}
	#bp_panel_card:hover { background: #252525; }
	#bp_panel_card img { width: 32px; height: 32px; }
	#bp_panel_card span { color: #fff; font-size: 13px; font-weight: bold; }
	#bp_panel_card small { color: #777; font-size: 11px; }

	/* Cabecera de la columna: titulo Certificados + pestañas */
	#bp_col_header {
		display: block !important;
		position: fixed;
		top: 16px;
		left: 24px;
		width: 380px;
		z-index: 500;
	}
	#bp_col_titulo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		font-weight: bold;
		font-size: 16px;
		padding: 6px 4px;
		border-bottom: 1px solid #333;
	}
	#bp_col_titulo img { width: 22px; height: 22px; cursor: pointer; }
	#bp_col_tabs { display: flex; gap: 8px; padding: 10px 0 10px 20px; }
	.bp-cert-tab {
		background: #1c1c1c;
		border: 1px solid #555;
		border-radius: 8px;
		color: #fff;
		font-size: 11px;
		font-weight: bold;
		padding: 8px 10px;
		cursor: pointer;
	}
	.bp-tab-activa {
		background: #2b7fd4 !important;
		border-color: #2b7fd4 !important;
	}

	/* Nota de las pestañas de certificados (posicionada por JS) */
	#bp_cert_nota {
		background: #fff;
		color: #111;
		border-radius: 12px;
		padding: 16px;
		font-size: 15px;
		line-height: 1.5;
	}
	.bp-nota-link { color: #2b7fd4; font-weight: bold; }

	/* Texto BidiPic entre las dos tarjetas */
	#bp_marca_texto {
		display: block !important;
		text-align: center;
		color: #555;
		font-size: 20px;
		font-weight: bold;
		letter-spacing: 1px;
		padding: 0;
		margin: 0;
		line-height: 1.1;
	}

	/* Botón rojo de captura bajo la columna */
	#bp_captura_btn_desktop {
		display: flex !important;
		position: fixed;
		bottom: 16px;
		left: 46px;
		width: 336px;
		height: 44px;
		background: #ff0000;
		border-radius: 10px;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 500;
	}
	#bp_captura_btn_desktop img { width: 56px; height: 56px; }

	/* Footer sobre el botón rojo, bajo la columna */
	#bp_footer {
		width: 380px !important;
		left: 24px !important;
		bottom: 70px !important;
		background: #111 !important;
		justify-content: space-around !important;
	}

	/* Botón Texto (pluma) solo escritorio */
	#bp_nav_firma_pc { display: flex !important; }

	/* ---------- Paso 2 dentro del panel derecho ---------- */
	#bp_panel_derecho #step2.element-visible {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 auto !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 16px !important;
		box-sizing: border-box !important;
		position: relative !important;
		top: auto !important;
	}
	#bp_panel_derecho #step2.element-invisible {
		display: none !important;
	}
	#bp_panel_derecho #step2 video,
	#bp_panel_derecho #step2 #video {
		max-height: 55vh !important;
		width: auto !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		display: block !important;
	}
	/* Con el step2 activo, la card estática desaparece */
	#bp_panel_derecho:has(#step2.element-visible) #bp_panel_card {
		display: none !important;
	}
	/* Contener el step2 dentro del panel */
	#bp_panel_derecho #step2.element-visible {
		overflow: hidden !important;
		overflow-y: auto !important;
	}
	#bp_panel_derecho #step2 #previavideo {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}
	#bp_panel_derecho #step2 .videoc {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	#bp_panel_derecho #step2 #video {
		max-height: 48vh !important;
		width: auto !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		display: block !important;
		margin-bottom: 24px !important;
	}
	#bp_panel_derecho #step2 #thumbnailContainer {
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}
	/* Columna izquierda con cards visibles: paso 2, paso 3 y pantalla final (step6) */
	#bidipic_container:has(#step2.element-visible) #step1.element-invisible,
	#bidipic_container:has(#step3.element-visible) #step1.element-invisible,
	#bidipic_container:has(#step6.element-visible) #step1.element-invisible {
		display: block !important;
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: 380px !important;
		max-width: 380px !important;
		flex: 0 0 380px !important;
		margin: 0 !important;
		margin-top: -45px !important;
		height: auto !important;
		overflow: visible !important;
	}
	/* Sin el marco blanco del paso 2 en escritorio */
	#bp_panel_derecho #step2 #previavideo {
		border: none !important;
	}
	/* Miniaturas más juntas: recortar el ancho del slide */
	#bp_panel_derecho #step2 .slide-img {
		width: auto !important;
		padding: 0 4px !important;
	}
	#bp_panel_derecho #step2 .slide-img img {
		width: 240px !important;
		display: block !important;
	}
	#bp_panel_derecho #step2 #thumbnailContainer.bp-thumbs-ver .slide-img img {
		width: auto !important;
		height: 150px !important;
		max-height: 150px !important;
		object-fit: contain !important;
		margin: 0 auto !important;
	}
	#bp_panel_derecho #step2 .slide-img .ctime {
		display: block !important;
		text-align: center !important;
	}
	/* Paso 3 dentro del panel derecho */
	#bp_panel_derecho #step3.element-visible {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 auto !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 16px !important;
		box-sizing: border-box !important;
		position: relative !important;
		top: auto !important;
		overflow: hidden !important;
		overflow-y: auto !important;
	}
	#bp_panel_derecho #step3.element-invisible {
		display: none !important;
	}
	#bp_panel_derecho:has(#step3.element-visible) #bp_panel_card {
		display: none !important;
	}
	/* ============================================================
   PASO 3 — FRAME PRINCIPAL IGUAL QUE EN EL CARRUSEL
   ============================================================ */

	/* Recuadro general del paso 3 */
	#bp_panel_derecho #step3 #previamarco {
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		max-height: 100% !important;

		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: center !important;
		gap: 12px !important;

		margin: 0 !important;
		border: none !important;
		box-sizing: border-box !important;

		overflow-x: hidden !important;
		overflow-y: hidden !important;
	}

	/* Contenedor del frame */
	#bp_panel_derecho #step3 #previamarco > .videoc {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;

		width: 100% !important;
		height: auto !important;
		max-height: none !important;

		flex: 0 0 auto !important;
		overflow: visible !important;
	}

	/* Ocultar el segundo bidipic duplicado */
	#bp_panel_derecho
	#step3
	#previamarco
	> .videoc
	> #bidipic:nth-of-type(2) {
		display: none !important;
	}

	/* Marco horizontal principal */
	#bp_panel_derecho #step3 #bidipic.hor {
		display: inline-block !important;

		width: auto !important;
		max-width: none !important;

		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;

		aspect-ratio: auto !important;

		/*
		 * Misma proporción que el carrusel:
		 * 10px 10px 40px escalado para el frame grande.
		 */
		padding: 24px 24px 96px 24px !important;

		margin: 0 auto !important;
		box-sizing: content-box !important;

		background-size: 100% 100% !important;
		background-position: center !important;
		background-repeat: no-repeat !important;

		overflow: hidden !important;
		flex: 0 0 auto !important;
		transform: none !important;
	}

	/* Captura colocada dentro del frame */
	#bp_panel_derecho #step3 #bidipic.hor #bidipicimg {
		width: auto !important;
		height: auto !important;
		max-width: min(440px, calc(100vw - 520px)) !important;
		max-height: 30vh !important;
		display: block !important;
		object-fit: contain !important;
		margin: -10px 0 0 0 !important;
		padding: 0 !important;
		transform: none !important;
		border-radius: 0 !important;
	}
	/* Marco vertical principal (gemelo del .hor pero en vertical) */
	#bp_panel_derecho #step3 #bidipic.ver {
		display: inline-block !important;
		width: auto !important;
		max-width: none !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: auto !important;
		padding: 15px 20px 68px 20px !important;
		margin: 0 auto !important;
		box-sizing: content-box !important;
		background-size: 100% 100% !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
		overflow: hidden !important;
		flex: 0 0 auto !important;
		transform: none !important;
	}
	#bp_panel_derecho #step3 #bidipic.ver #bidipicimg {
		width: min(340px, calc(100vw - 520px)) !important;
		height: auto !important;
		max-width: min(340px, calc(100vw - 520px)) !important;
		max-height: 46vh !important;
		display: block !important;
		aspect-ratio: 1666 / 2034 !important;
		object-fit: contain !important;
		margin: -10px 0 0 0 !important;
		padding: 0 !important;
		transform: none !important;
		transform-origin: center !important;
		position: relative !important;
		top: 0 !important;
		border-radius: 0 !important;
	}

	/* Mantener el carrusel contenido en el panel */
	#bp_panel_derecho #step3 #slider_marcos {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;

		margin-bottom: 2px !important;
		overflow: hidden !important;
	}

	/* Controles debajo del frame */
	#bp_panel_derecho #step3 .arrows_capture_wrapper {
		flex: 0 0 auto !important;
		margin-top: 12px !important;
		width: 100% !important;
		align-self: stretch !important;
	}

	/* Posición actual de controles y carrusel */
	#bp_panel_derecho #step3 .arrows_capture_wrapper,
	#bp_panel_derecho #step3 #slider_marcos {
		transform: translateY(10px) !important;
	}

	/* El espaciador antiguo ya no hace falta */
	#bp_panel_derecho #step3 #bp_bidipic_spacer {
		display: none !important;
	}
	/* Ocultar botones LIMPIAR/GUARDAR del texto en escritorio */
	#bp_panel_derecho ~ * .bp-firma-btns,
	#step3_2 .bp-firma-btns {
		display: none !important;
	}
	#step3_2 .bp-firma-btns {
		display: none !important;
	}
	/* Cuadro de texto sobre la columna izquierda (sobre las cards) */
	#step3_2.element-visible {
		position: fixed !important;
		left: 24px !important;
		top: 400px !important;
		width: 380px !important;
		max-width: 380px !important;
		height: auto !important;
		flex: none !important;
		z-index: 400 !important;
		background: transparent !important;
	}
	#step3_2 #previatexto {
		height: auto !important;
		max-height: none !important;
	}
	#step3_2.element-visible #bp_w3txt,
	#bidipic_container #step3_2 textarea#bp_w3txt {
		height: 140px !important;
		min-height: 140px !important;
		max-height: 140px !important;
	}
	#step3_2.element-visible .videoc {
		height: auto !important;
		max-height: none !important;
	}
	#bp_nav_next {
		display: none !important;
	}
	#bp_captura_btn_desktop {
		gap: 10px !important;
	}
	#bp_captura_btn_desktop span {
		color: #fff !important;
		font-weight: bold !important;
		font-size: 16px !important;
	}
	#bp_captura_icon {
		width: 54px !important;
		height: 54px !important;
	}
	#bp_captura_next_arrow {
		width: 22px !important;
		height: 22px !important;
		transform: rotate(-90deg) !important;
	}
	/* Selector de fuentes en la columna izquierda (escritorio) */
	#pfuentes {
		position: fixed !important;
		left: 24px !important;
		top: 160px !important;
		width: 380px !important;
		max-width: 380px !important;
		height: calc(100vh - 320px) !important;
		max-height: calc(100vh - 320px) !important;
		background: transparent !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		z-index: 450 !important;
	}
	/* Panel interior de fuentes: más estrecho y más alto */
	#step4 #pfuentes .popup,
	body #pfuentes div.popup {
		width: 340px !important;
		max-width: 340px !important;
		height: calc(100vh - 160px) !important;
		max-height: calc(100vh - 160px) !important;
		overflow-y: auto !important;
		box-sizing: border-box !important;
	}
	/* Fuentes (imágenes) más pequeñas para que se vean enteras */
	#pfuentes .popup img {
		max-width: 90% !important;
		height: auto !important;
	}
	/* Popup de aspecto sobre el botón Aspecto de la columna (como el mockup) */
	#bp_aspecto_popup {
		position: fixed !important;
		left: 150px !important;
		bottom: 155px !important;
		top: auto !important;
		right: auto !important;
		width: 200px !important;
		z-index: 600 !important;
	}
	/* Selector de color sobre la card de YouTube (como el mockup) */
	#bp_color_popup {
		position: fixed !important;
		left: 210px !important;
		bottom: 155px !important;
		top: auto !important;
		right: auto !important;
		width: 380px !important;
		max-width: 380px !important;
		z-index: 600 !important;
	}
	/* Paso confirmación (step3_3) dentro del panel derecho */
	#bp_panel_derecho #step3_3.element-visible {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 auto !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 16px !important;
		box-sizing: border-box !important;
		position: relative !important;
		top: auto !important;
		display: flex !important;
		flex-direction: column !important;
		overflow: hidden !important;
	}
	#bp_panel_derecho #step3_3.element-invisible {
		display: none !important;
	}
	#bp_panel_derecho:has(#step3_3.element-visible) #bp_panel_card {
		display: none !important;
	}
	/* Contener el frame del paso confirmación (step3_3) */
	#bp_panel_derecho #step3_3 #previaconfirm {
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		padding-top: 8px !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: stretch !important;
		overflow: hidden !important;
		gap: 12px !important;
	}
	#bp_panel_derecho #step3_3 #previaconfirm_frame {
		max-height: none !important;
		overflow: visible !important;
		aspect-ratio: auto !important;
		height: auto !important;
		flex: 0 0 auto !important;
	}
	#bp_panel_derecho #step3_3 #previaconfirm_frame #bidipic {
		display: inline-block !important;
		width: auto !important;
		max-width: none !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: auto !important;
		padding: 24px 24px 96px 24px !important;
		margin: 0 auto !important;
		box-sizing: content-box !important;
		background-size: 100% 100% !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
		overflow: hidden !important;
		border: none !important;
		transform: none !important;
	}
	#bp_panel_derecho #step3_3 #previaconfirm_frame #bidipicimg {
		width: min(440px, calc(100vw - 520px)) !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
		display: block !important;
		object-fit: contain !important;
		margin: -10px 0 0 0 !important;
		padding: 0 !important;
		transform: none !important;
		border-radius: 0 !important;
	}
	/* Confirmirmación: misma disposición vertical que en la pantalla anterior */
	#bp_panel_derecho
	#step3_3
	#previaconfirm_frame
	#bidipic.ver
	#bidipicimg {
		width: auto !important;
		height: auto !important;

		max-width: min(340px, calc(100vw - 520px)) !important;
		max-height: 46vh !important;

		object-fit: contain !important;
		display: block !important;

		margin: -10px 0 0 0 !important;
		padding: 0 !important;

		transform: scale(0.74) !important;
		transform-origin: top center !important;

		position: relative !important;
		top: 18px !important;

		border-radius: 0 !important;
	}
	/* Quitar borde blanco interior del contenedor de confirmación */
	#bp_panel_derecho #step3_3 #previaconfirm {
		border: none !important;
	}
	/* Separar la barra de botones del marco en la confirmación */
	#bp_panel_derecho #step3_3 .bp-confirm-btns {
		margin-top: 20px !important;
		position: relative !important;
		z-index: 5 !important;
	}
	/* Logo del botón CREAR en gris */
	#bp_panel_derecho #step3_3 .bp-confirm-btn-crear img {
		filter: grayscale(100%) brightness(1.6) !important;
	}
	/* Limitar altura de la columna en la pantalla final para que no estire la fila */
	#bidipic_container:has(#step6.element-visible) #step1.element-invisible {
		height: calc(100vh - 120px) !important;
		max-height: calc(100vh - 120px) !important;
		overflow: hidden !important;
	}
	
	/* Igualar el padding del contenedor en la pantalla final al del paso 3 */
	#bidipic_container:has(#step6.element-visible) {
		padding-top: 115px !important;
	}
	

	/* Pantalla final (step6) dentro del panel derecho */
	#bp_panel_derecho #step6.element-visible {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 auto !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 16px !important;
		box-sizing: border-box !important;
		position: relative !important;
		top: auto !important;
		display: flex !important;
		flex-direction: column !important;
		overflow: hidden !important;
		overflow-y: auto !important;
	}
	#bp_panel_derecho #step6.element-invisible {
		display: none !important;
	}
	/* Con el step6 activo, la card estática desaparece */
	#bp_panel_derecho:has(#step6.element-visible) #bp_panel_card {
		display: none !important;
	}
	/* Ocultar barra de redes sociales en la pantalla final (no está en el mockup) */
	#bp_panel_derecho #step6 #bp_final_share {
		display: none !important;
	}
	/* Estructura vertical del contenido final */
	#bp_panel_derecho #step6 #bp_final {
		width: 100% !important;
		height: 100% !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: stretch !important;
		gap: 16px !important;
		margin: 0 !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}
	/* Que no se corten las tarjetas de abajo en la pantalla final */
	#bp_panel_derecho #step6 #bp_final {
		height: auto !important;
		overflow: visible !important;
	}
	/* Contener el vídeo/marco arriba, centrado */
	#bp_panel_derecho #step6 #bp_final_media {
		flex: 0 0 auto !important;
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
		align-items: flex-start !important;
		overflow: visible !important;
	}
	#bp_panel_derecho #step6 #bp_final_media #bp_final_img,
	#bp_panel_derecho #step6 #bp_final_media img {
		height: 52vh !important;
		width: auto !important;
		max-width: 100% !important;
		object-fit: contain !important;
		display: block !important;
	}
	/* Zona inferior de la pantalla final: 3 botones en fila (mockup) */
	#bp_panel_derecho #step6 #bp_final_bottom {
		flex: 0 0 auto !important;
		display: flex !important;
		flex-direction: row !important;
		justify-content: center !important;
		align-items: stretch !important;
		gap: 16px !important;
		width: 100% !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}
	/* QR → botón "VER BIDICLIP" compacto (estilo tarjetas paso 3) */
	#bp_panel_derecho #step6 #bp_final_qr {
		flex: 1 1 0 !important;
		height: 191px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
		background: transparent !important;
		border: 1px solid #444 !important;
		border-radius: 12px !important;
		padding: 10px !important;
		box-sizing: border-box !important;
	}
	#bp_panel_derecho #step6 #bp_final_qr::before {
		content: "VER BIDICLIP" !important;
		color: #fff !important;
		font-weight: bold !important;
		font-size: 13px !important;
		margin-bottom: 0 !important;
	}
	#bp_panel_derecho #step6 #bp_final_qr img {
		width: 90px !important;
		height: 90px !important;
		display: block !important;
	}
	/* Contenedor de las dos descargas → en fila, cada una un botón */
	#bp_panel_derecho #step6 #bp_final_dl {
		flex: 2 1 0 !important;
		display: flex !important;
		flex-direction: row !important;
		gap: 16px !important;
		margin: 0 !important;
	}
	#bp_panel_derecho #step6 #bp_final_dl .bp-dl-btn {
		flex: 1 1 0 !important;
		height: 191px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
		background: transparent !important;
		border: 1px solid #444 !important;
		border-radius: 12px !important;
		padding: 10px !important;
		box-sizing: border-box !important;
		text-align: center !important;
	}
	#bp_panel_derecho #step6 #bp_final_dl .bp-dl-btn img {
		width: 32px !important;
		height: 32px !important;
	}
	/* Quitar el borde blanco interior de la pantalla final */
	#bidipic_container:has(#step6.element-visible) #bp_final {
		border: none !important;
	}
	/* Quitar el borde blanco interior de la pantalla final */
	#bidipic_container:has(#step6.element-visible) #bp_final {
		border: none !important;
	}
	/* Lienzo vertical completo, proporción final 1800 x 2400 */
	#bp_panel_derecho #step3 #bidipic.ver,
	#bp_panel_derecho
	#step3_3
	#previaconfirm_frame
	#bidipic.ver {
		position: relative !important;
		display: block !important;

		/*
		 * 470 px es aproximadamente el tamaño de la imagen final en PC.
		 * 50vh evita que se salga en pantallas de poca altura.
		 */
		width: min(470px, 50vh, calc(100vw - 520px)) !important;
		max-width: none !important;

		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: 3 / 4 !important;

		padding: 0 !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;

		background-size: 100% 100% !important;
		background-position: center !important;
		background-repeat: no-repeat !important;

		overflow: hidden !important;
		transform: none !important;
	}

	/*
	 * Hueco exacto de la fotografía dentro del diseño vertical.
	 * Estas proporciones coinciden con la imagen final.
	 */
	#bp_panel_derecho #step3 #bidipic.ver > #bidipicimg,
	#bp_panel_derecho
	#step3_3
	#previaconfirm_frame
	#bidipic.ver
	> #bidipicimg {
		position: absolute !important;

		left: 3.89% !important;
		top: 2.92% !important;

		width: 92.56% !important;
		height: 84.75% !important;

		min-width: 0 !important;
		min-height: 0 !important;
		max-width: none !important;
		max-height: none !important;

		display: block !important;

		object-fit: fill !important;
		object-position: center center !important;

		margin: 0 !important;
		padding: 0 !important;

		transform: none !important;
		transform-origin: center center !important;

		border-radius: 0 !important;
	}
	/* Lienzo cuadrado 1:1 en escritorio */
	#bp_panel_derecho #step3 #bidipic.cua,
	#bp_panel_derecho #step3_3 #previaconfirm_frame #bidipic.cua {
		position: relative !important;
		display: block !important;
		width: min(470px, 50vh, calc(100vw - 520px)) !important;
		max-width: none !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: 1 / 1 !important;
		padding: 0 !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
		background-size: 100% 100% !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
		overflow: hidden !important;
		transform: none !important;
	}
	#bp_panel_derecho #step3 #bidipic.cua > #bidipicimg,
	#bp_panel_derecho #step3_3 #previaconfirm_frame #bidipic.cua > #bidipicimg {
		position: absolute !important;
		left: 13% !important;
		top: 4.62% !important;
		width: 74% !important;
		height: 74% !important;
		object-fit: contain !important;
		max-width: none !important;
		max-height: none !important;
		display: block !important;
		object-fit: contain !important;
		margin: 0 !important;
		padding: 0 !important;
		transform: none !important;
		border-radius: 0 !important;
	}
	/* Pantalla de límite agotado */
	body:has(.bp-limite) #bp_panel_derecho,
	body:has(.bp-limite) #bp_footer,
	body:has(.bp-limite) #bp_captura_btn_desktop,
	body:has(.bp-limite) #bp_col_header {
		display: none !important;
	}
	.bp-limite {
		max-width: 620px;
		margin: 80px auto 0 auto;
		text-align: center;
		float: none !important;
	}
	.bp-limite h1 {
		display: block !important;
		width: 100% !important;
		float: none !important;
		font-size: 24px !important;
		line-height: 1.3 !important;
		margin-bottom: 18px !important;
	}
	.bp-limite .subirvideo {
		display: inline-block !important;
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 12px 34px !important;
		margin: 6px !important;
		float: none !important;
	}
	/* Sin borde blanco en el recuadro de YouTube */
	.bp-yt-box {
		border: none !important;
	}
	/* Borde también en la barra de captura de YouTube */
	.bp-yt-box .arrows_capture,
	.bp-yt-box #arrows_capture2 {
		border: 1px solid rgba(255,255,255,0.2) !important;
		border-radius: 10px !important;
	}
}
#bp_panel_derecho { display: none; }
#bp_col_header { display: none; }
#bp_captura_btn_desktop { display: none; }
#bp_nav_firma_pc { display: none; }
/* ---- RESPONSIVE ---- */
@media (max-width: 420px) {
    .bp-nav-btn span { font-size: 9px; }
    .bp-card         { padding: 18px 14px; }
}
@media (max-width: 600px) {
    #guardarbidi   { padding: 6px 27px 30px !important; }
    #w3txt         { min-height: 130px; }
    body #inputColor  { max-width: 100% !important; }
    body #drawingPad  { max-width: 100% !important; }
    .slick-dotted.slick-slider { margin-bottom: 0 !important; }
    .slick-dots    { display: none !important; }
    body #step3 #bidipic,
	body #step3 #bidipic.hor,
	body #step3 #bidipic.ver,
	body #step3 #bidipic.def,
	body #step3 #bidipic.cua {
    	display:             flex !important;
    	align-items:         flex-start !important;   
    	justify-content:     center !important;
    	width:               100% !important;
    	height:              42vh !important;          
    	background-size:     100% 100% !important;
    	background-position: center !important;
    	border-radius:       10px !important;
    	overflow:            hidden !important;
    	padding:             8px !important;
    	margin:              0 !important;
    	box-sizing:          border-box !important;
    	background-color:    #1f1f20 !important;
	}
	
	/* El horizontal manda su proporcion 4:3, sin alto fijo que la deforme */
	body #step3 #bidipic.hor {
		height: auto !important;
		aspect-ratio: 4 / 3 !important;
	}
	/* Confirmacion: mismo criterio que el paso 3, el marco horizontal manda
	   su proporcion 4:3 y no se estira. */
	body #step3_3 #previaconfirm_frame:has(> #bidipic.hor) {
		width: min(360px, calc(100vw - 40px)) !important;
		height: auto !important;
		max-height: none !important;
		aspect-ratio: 4 / 3 !important;
		margin: 0 auto !important;
		overflow: hidden !important;
	}

	body #step3_3 #previaconfirm_frame > #bidipic.hor {
		position: relative !important;
		display: flex !important;
		align-items: flex-start !important;
		justify-content: center !important;
		width: 100% !important;
		height: 100% !important;
		aspect-ratio: 4 / 3 !important;
		margin: 0 !important;
		padding: 2% 0 0 0 !important;
		box-sizing: border-box !important;
		background-size: 100% 100% !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
		transform: none !important;
		overflow: hidden !important;
	}
	/* Igual que el paso 3: se dimensiona por ALTO y se centra. Asi la foto
	   4:3 deja su margen blanco a los lados y el video 16:9 sigue llenando
	   el ancho, sin tener que distinguir entre foto y video. */
	body #step3_3 #previaconfirm_frame > #bidipic.hor > #bidipicimg {
		position: static !important;
		width: auto !important;
		height: 78% !important;
		max-width: 96% !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		object-fit: contain !important;
		transform: none !important;
		z-index: 5 !important;
	}

	body #step3 #bidipic img,
	body #step3 #bidipic #bidipicimg {
    	width:      100% !important;
    	height:     auto !important;
    	max-width:  100% !important;
    	max-height: 32vh !important;                  
    	object-fit: contain !important;
    	margin:     0 !important; padding: 0 !important;
    	border-radius: 0 !important;
    	display:    block !important;
	}
}
@media (max-width: 480px) {
    #thumbnailContainer .slick-slide,
    #thumbnailContainer .slick-track,
    #thumbnailContainer .slick-list,
    #thumbnailContainer .vimg,
    #thumbnailContainer .vimg img {
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }
}
/* MÓVIL: preview vertical basada en las proporciones del resultado final */
@media (max-width: 600px) {

	/* Contenedor de la pantalla de confirmación */
	body #step3_3 #previaconfirm_frame {
		display: block !important;
		width: 100% !important;

		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: auto !important;

		margin: 0 auto !important;
		overflow: visible !important;
		text-align: center !important;
	}

	/* Marco vertical: preview y confirmación */
	body #step3 #bidipic.ver,
	body #step3_3 #previaconfirm_frame > #bidipic.ver {
		position: relative !important;
		display: block !important;

		width: min(360px, calc(100vw - 40px)) !important;
		max-width: none !important;

		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: 3 / 4 !important;

		padding: 0 !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;

		background-size: 100% 100% !important;
		background-position: center !important;
		background-repeat: no-repeat !important;

		transform: none !important;
		overflow: hidden !important;
	}

	/* Zona exacta de la foto o vídeo */
	body #step3 #bidipic.ver > #bidipicimg,
	body #step3_3 #previaconfirm_frame > #bidipic.ver > #bidipicimg {
		position: absolute !important;

		left: 3.89% !important;
		top: 2.92% !important;

		width: 92.56% !important;
		height: 84.75% !important;

		max-width: none !important;
		max-height: none !important;

		display: block !important;
		object-fit: cover !important;

		margin: 0 !important;
		padding: 0 !important;

		transform: none !important;
		transform-origin: initial !important;

		border-radius: 0 !important;
		z-index: 5 !important;
	}
	/* Todo el paso 3 se desplaza dentro de su propio espacio */
	#step3.element-visible {
		overflow-y: auto !important;
		overflow-x: hidden !important;
		flex: 0 0 auto !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: calc(100dvh - 95px) !important;

		padding-bottom: 15px !important;
		box-sizing: border-box !important;

		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;

		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
	}

	#step3.element-visible::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}

	/* Evita que el cuadro corte los botones y los marcos */
	#step3 #previamarco {
		flex: 0 0 auto !important;

		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;

		overflow: visible !important;
	}

	/* El carrusel mantiene su funcionamiento horizontal */
	#step3 #slider_marcos {
		height: auto !important;
		min-height: 150px !important;
		max-height: none !important;

		overflow: hidden !important;
		margin-bottom: 20px !important;
	}

	#step3 #slider_marcos .slick-list,
	#step3 #slider_marcos .slick-track {
		height: auto !important;
		min-height: 140px !important;
	}
	/* Ocultar el slider_marcos vacío que aparece después de frameseleccionado */
	#step3 #frameseleccionado + #slider_marcos {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
	}
	/* Ocultar el bidipic vacío duplicado */
	#step3 #previamarco > .videoc > #bidipic.def {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
	}

	/* Ajustar la caja de la imagen a su altura real */
	#step3 #previamarco > .videoc {
		display: block !important;

		width: 100% !important;
		height: fit-content !important;
		min-height: 0 !important;
		max-height: none !important;

		flex-grow: 0 !important;
		flex-shrink: 0 !important;
		flex-basis: auto !important;

		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}
	/* Los botones continúan después del marco, sin subir encima */
	#step3 .arrows_capture_wrapper {
		position: static !important;
		display: block !important;

		width: 100% !important;
		margin: 8px 0 0 0 !important;
		padding: 0 !important;

		transform: none !important;
		float: none !important;
		clear: both !important;

		box-sizing: border-box !important;
	}

	/* El separador antiguo ya no es necesario */
	#step3 #bp_bidipic_spacer {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* Confirmación cuadrada 1:1 */
	body #step3_3
	#previaconfirm_frame:has(> #bidipic.cua) {
		width: min(360px, calc(100vw - 40px)) !important;
		height: auto !important;
		max-height: none !important;
		aspect-ratio: 1 / 1 !important;

		margin: 0 auto !important;
		overflow: hidden !important;
	}

	body #step3 #bidipic.cua,
	body #step3_3
	#previaconfirm_frame
	> #bidipic.cua {
		position: relative !important;
		display: block !important;

		width: 100% !important;
		height: 100% !important;
		aspect-ratio: 1 / 1 !important;

		margin: 0 !important;
		padding: 0 !important;

		background-size: 100% 100% !important;
		background-position: center !important;
		background-repeat: no-repeat !important;

		transform: none !important;
		overflow: hidden !important;
	}

	body #step3 #bidipic.cua > #bidipicimg,
	body #step3_3
	#previaconfirm_frame
	> #bidipic.cua
	> #bidipicimg {
		position: absolute !important;

		left: 13% !important;
		top: 4.62% !important;
		width: 74% !important;
		height: 74% !important;

		max-width: none !important;
		max-height: none !important;

		margin: 0 !important;
		padding: 0 !important;

		object-fit: contain !important;
		transform: none !important;
	}
	
}
/* ===== Miniaturas del paso 2 con la relacion de aspecto elegida ===== */
#thumbnailContainer .vimg img {
	width: auto !important;
	height: 100px !important;
	object-fit: cover !important;
	margin: 0 auto !important;
	display: block !important;
}
#thumbnailContainer.bp-rel-cua .vimg img {
	aspect-ratio: 1 / 1 !important;
}
#thumbnailContainer:not(.bp-rel-cua).bp-thumbs-ver .vimg img {
	aspect-ratio: 9 / 16 !important;
}
#thumbnailContainer:not(.bp-rel-cua).bp-thumbs-hor .vimg img {
	aspect-ratio: 16 / 9 !important;
}

@media (min-width: 1024px) {
	#bp_panel_derecho #step2 #thumbnailContainer .slide-img img {
		width: auto !important;
		height: 150px !important;
		max-height: 150px !important;
		object-fit: cover !important;
		margin: 0 auto !important;
	}
	#bp_panel_derecho #step2 #thumbnailContainer.bp-rel-cua .slide-img img {
		aspect-ratio: 1 / 1 !important;
	}
	/* Video vertical pasado a 1:1: la miniatura debe recortarse a cuadrado,
	   no verse entera con bandas. Va con dos clases para ganar a la regla
	   de bp-thumbs-ver, que impone object-fit: contain. */
	#bp_panel_derecho #step2 #thumbnailContainer.bp-rel-cua.bp-thumbs-ver .slide-img img {
		aspect-ratio: 1 / 1 !important;
		width: auto !important;
		object-fit: cover !important;
	}
	#bp_panel_derecho #step2 #thumbnailContainer:not(.bp-rel-cua).bp-thumbs-ver .slide-img img {
		aspect-ratio: 9 / 16 !important;
	}
	#bp_panel_derecho #step2 #thumbnailContainer:not(.bp-rel-cua).bp-thumbs-hor .slide-img img {
		aspect-ratio: 16 / 9 !important;
	}
	#bp_col_titulo #bp_cast_btn {
		margin-right: auto;
	}
}
/* Boton de enviar el BidiClip a la tele */
#bp_cast_btn {
	width: 28px;
	height: 28px;
	margin-left: 8px;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
#bp_cast_btn.bp-cast-visible {
	display: flex;
}
/* Boton de cast con sesion activa: al pulsarlo desconecta */
#bp_cast_btn.bp-cast-activo svg {
	fill: #2ee6a8 !important;
}
/* El nombre del archivo subido no se muestra en ningún tamaño */
#fileList,
#statusResponse {
	display: none !important;
}
/* El recuadro de vista previa vacío no se muestra */
#previavideo:empty {
	display: none !important;
}
/* Aviso de fallo al subir al servidor externo. El mensaje original venia con
   color #ddd, gris casi blanco, invisible sobre el fondo oscuro. */
.bp-aviso-serverex {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 12px;
	padding: 10px 14px;
	border-radius: 6px;
	background: #7a1f1f;
	color: #fff;
	font-weight: bold;
	text-align: center;
}

/* El carrusel del paso 2 se partia en dos filas: la miniatura tiene
   aspect-ratio 16/9 con altura fija de 150px, asi que el navegador le calcula
   266px de ancho, mas que los ~196px que slick asigna al slide. Se fija el
   ancho en pixeles y la altura sale de la proporcion. */
@media (min-width: 1024px) and (max-width: 1600px) {
	#bp_panel_derecho #step2 #thumbnailContainer .vimg {
		min-width: 0 !important;
		overflow: hidden !important;
	}
	#bp_panel_derecho #step2 #thumbnailContainer .vimg img,
	#bp_panel_derecho #step2 #thumbnailContainer .slide-img img {
		width: 180px !important;
		max-width: 180px !important;
		min-width: 0 !important;
		height: auto !important;
		max-height: none !important;
		object-fit: cover !important;
		display: block !important;
		margin: 0 auto !important;
	}
}

/* El aviso de archivo no valido quedaba tapado por el footer y el boton rojo
   en pantallas de poco alto. En escritorio pasa al panel derecho, encima de
   la tarjeta del visor, que es donde el usuario esta mirando. */
@media (min-width: 1024px) {
	#bidipic_container #checkupload2:not(:empty) {
		position: fixed !important;
		left: 436px !important;
		right: 24px !important;
		top: 76px !important;
		width: auto !important;
		max-width: none !important;
		box-sizing: border-box !important;
		background: #7a1f1f !important;
		color: #fff !important;
		font-weight: bold !important;
		text-align: center !important;
		padding: 12px 16px !important;
		border-radius: 8px !important;
		z-index: 700 !important;
	}
}

/* En movil el aviso de la subida sale al final de la columna, debajo de las
   tarjetas. Enrique lo quiere arriba del todo, encima de la primera. */
@media (max-width: 1023px) {
	#bidipic_container #checkupload2:not(:empty) {
		display: block !important;
		box-sizing: border-box !important;
		margin: 0 0 12px 0 !important;
		padding: 10px 14px !important;
		background: #7a1f1f !important;
		color: #fff !important;
		font-weight: bold !important;
		text-align: center !important;
		border-radius: 6px !important;
		order: -1 !important;
	}
}

/* El boton CREAR BidiPic es el paso siguiente de la pantalla de confirmacion,
   pero se veia igual que los otros dos y el usuario no sabia por donde seguir.
   Se destaca con el verde de la web, dejando el fondo oscuro como los demas. */
.bp-confirm-btn.bp-confirm-btn-crear {
	border-color: #B5E745 !important;
}
.bp-confirm-btn.bp-confirm-btn-crear span,
.bp-confirm-btn.bp-confirm-btn-crear small {
	color: #B5E745 !important;
}
/* El icono estaba forzado a gris: se pasa al mismo verde */
#bp_panel_derecho #step3_3 .bp-confirm-btn-crear img,
.bp-confirm-btn.bp-confirm-btn-crear img {
	filter: none !important;
}

/* Carrusel de marcos en vertical y PC (16/9): slick usa variableWidth y cada
   miniatura ocupa su propio ancho. Se agrandan un 50 % manteniendo la
   proporcion y se deja una separacion fija entre ellas. */
@media (min-width: 1024px) {
    #step3 #slider_marcos .marcoslider.ver {
        padding: 10px 10px 25px 10px !important;
    }
    #step3 #slider_marcos .marcoslider.ver img {
        max-height: 160px !important;
    }
    #step3 #slider_marcos:has(.marcoslider.ver) .slick-slide {
        padding: 0 12px !important;
    }
    #step3 #slider_marcos:has(.marcoslider.ver) .slick-list {
        margin: 0 -12px !important;
    }
}

/* Pantallas de poca altura en PC (16/9): el panel derecho se reduce entero
   con zoom para que la vista previa, las flechas y el carrusel quepan sin
   cortarse. La altura se divide por el mismo factor para compensar. */
@media (min-width: 1024px) and (max-height: 1060px) {
    #bp_panel_derecho {
        zoom: .85;
        height: calc((100vh - 32px) / .85) !important;
    }
}
@media (min-width: 1024px) and (max-height: 699px) {
    #bp_panel_derecho {
        zoom: .75;
        height: calc((100vh - 32px) / .75) !important;
    }
}

/* Carrusel de marcos en PC (17/9): la fila mide lo que sus miniaturas y se
   centra bajo la vista previa. Con muchos marcos es mas ancha que el hueco,
   el centrado no actua y el carrusel se desplaza como siempre. */
@media (min-width: 1024px) {
    #step3 #slider_marcos .slick-track {
        display: flex !important;
        width: max-content !important;
        margin: 0 auto !important;
    }
}

/* Carrusel de frames en video vertical y PC (17/9): misma separacion
   que el carrusel de marcos. */
@media (min-width: 1024px) {
    #bp_panel_derecho #step2 #thumbnailContainer.bp-thumbs-ver .slick-slide {
        margin: 0 8px !important;
    }
    #bp_panel_derecho #step2 #thumbnailContainer.bp-thumbs-ver .slick-list {
        margin: 0 -8px !important;
    }
}

/* Miniaturas de marcos en vertical y pantallas bajas (17/9): foto algo menor
   para que quepan enteras con el zoom del panel. */
@media (min-width: 1024px) and (max-height: 1060px) {
    #step3 #slider_marcos .marcoslider.ver img {
        max-height: 230px !important;
    }
}

/* 17/9: boton CREAR BidiPic con fondo verde (peticion de Enrique) para que
   destaque como paso siguiente. Sustituye al borde verde del 31/8. */
.bp-confirm-btn.bp-confirm-btn-crear,
#bp_panel_derecho #step3_3 .bp-confirm-btn.bp-confirm-btn-crear {
    background: #B5E745 !important;
    border-color: #B5E745 !important;
}
.bp-confirm-btn.bp-confirm-btn-crear span,
.bp-confirm-btn.bp-confirm-btn-crear small,
#bp_panel_derecho #step3_3 .bp-confirm-btn-crear span,
#bp_panel_derecho #step3_3 .bp-confirm-btn-crear small {
    color: #1a1a1a !important;
}
.bp-confirm-btn.bp-confirm-btn-crear img,
#bp_panel_derecho #step3_3 .bp-confirm-btn-crear img {
    filter: none !important;
}

/* 17/9: limite del bono en verde corporativo para que se vea antes de subir
   el video (peticion de Enrique). */
.bp-card-sub,
#bp_panel_card small {
    color: #B5E745 !important;
}

/* 17/9: vista previa vertical con la foto entera y fondo difuminado
   (lo pone bp_preview.js). Gana a la regla que estiraba la foto. */
#bp_panel_derecho #step3 #bidipic.ver[data-bp-blur="1"] > #bidipicimg,
#bp_panel_derecho #step3_3 #previaconfirm_frame #bidipic.ver[data-bp-blur="1"] > #bidipicimg,
body #bidipic.ver[data-bp-blur="1"] > #bidipicimg {
    object-fit: contain !important;
    object-position: center center !important;
}
#bp_blur {
    position: absolute !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
#bp_blur .bp-blur-img {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(18px) brightness(.85);
    transform: scale(1.15);
}

/* 17/9: etiqueta "Preview - BidiPic en proceso" (colores de Enrique).
   Solo en PC y en las pantallas de marco y confirmacion. */
#bp_preview_wrap {
    position: relative;
    height: 0;
    flex: 0 0 0;
    z-index: 50;
}
#bp_preview_badge {
    display: none;
}
@media (min-width: 1024px) {
    /* 20/9: la etiqueta sale tambien en la pantalla de fotogramas (peticion de Enrique) */
    body.bp-comprimiendo #bp_preview_badge,
    #bp_panel_derecho:has(#step2.element-visible) #bp_preview_badge,
    #bp_panel_derecho:has(#step3.element-visible) #bp_preview_badge,
    #bp_panel_derecho:has(#step3_3.element-visible) #bp_preview_badge {
        display: flex;
        position: absolute;
        top: 14px;
        right: 18px;
        flex-direction: column;
        align-items: flex-start;
        padding: 4px 10px;
        border: 1px solid #AFEEEE;
        border-radius: 6px;
        background: rgba(0, 0, 0, .35);
        pointer-events: none;
    }
    #bp_preview_badge .bp-pb-titulo {
        color: #AFEEEE;
        font-size: 13px;
        font-weight: bold;
        letter-spacing: 1px;
        line-height: 1.2;
    }
    #bp_preview_badge .bp-pb-sub {
        color: #00FFFF;
        font-size: 10px;
        line-height: 1.2;
    }
}

/* Carrusel de marcos en video horizontal y PC (17/9): los bloques del 16 y 17
   solo cubrian .marcoslider.ver, asi que en horizontal no se aplicaba nada y
   las miniaturas salian con el tamano original del plugin. Mismo criterio que
   en vertical, pero el limite aqui es el ancho porque el marco es apaisado. */
@media (min-width: 1024px) {
    #step3 #slider_marcos .marcoslider.hor {
        padding: 10px 10px 25px 10px !important;
    }
    #step3 #slider_marcos .marcoslider.hor img {
        max-width: 240px !important;
    }
    #step3 #slider_marcos:has(.marcoslider.hor) .slick-slide {
        padding: 0 12px !important;
    }
    #step3 #slider_marcos:has(.marcoslider.hor) .slick-list {
        margin: 0 -12px !important;
    }
}

/* Colocacion vertical en video horizontal y PC (17/9): la previa, la barra de
   CAPTURAR y el carrusel van dentro de #previamarco > .videoc, que queda
   anclada arriba y deja ~450px muertos abajo. Se empuja el conjunto hacia
   abajo para que el carrusel quede a la altura del de frames, y arriba queda
   hueco para los controles de edicion que pidio Enrique. Solo horizontal. */
@media (min-width: 1024px) {
    #step3:has(.marcoslider.hor) #previamarco > .videoc {
        padding-top: 20vh !important;
    }
}

/* Vista previa en video horizontal y PC (18/9): Enrique la queria mas grande
   manteniendo el marco tal cual, asi que se escala en vez de tocar medidas
   (cada marco tiene su proporcion y forzar aspect-ratio los deformaba). El
   translateY compensa el padding-top de la .videoc, que empuja tambien a la
   previa: si se cambia uno hay que ajustar el otro. Solo horizontal. */
@media (min-width: 1024px) {
    #step3:has(.marcoslider.hor) #previamarco > .videoc > #bidipic.hor {
        transform: translateY(-13vh) scale(1.2) !important;
        transform-origin: center top !important;
    }
}

/* Pantalla de frames en video horizontal y PC (18/9): se baja el conjunto
   para que el carrusel quede a la misma altura que el de marcos, que quedo
   mas abajo tras los ajustes de hoy. No se toca ningun tamano, solo la
   colocacion. Medido con la ventana a 961: marcos 647, frames 537. */
@media (min-width: 1024px) {
    #step2 #previavideo > .videoc {
        padding-top: 13.5vh !important;
    }
}

/* 20/9: indicador de preparacion del video en la cabecera, junto a la casa
   (peticion de Enrique). Lo crea bpPintaCirculo() en bp_video_compress.js. */
#bp_aviso_compresion.bp-circulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 6px;
    flex: 0 0 auto;
    cursor: default;
}
#bp_aviso_compresion.bp-circulo svg {
    width: 30px;
    height: 30px;
    display: block;
}
#bp_aviso_compresion .bp-circ-fondo {
    fill: none;
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 3;
}
#bp_aviso_compresion .bp-circ-avance {
    fill: none;
    stroke: #B5E745;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s linear;
}

#bp_aviso_compresion .bp-circ-num {
    fill: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
}

/* 20/9: en PC el indicador va fijo arriba a la derecha, debajo de la etiqueta
   Preview del panel (sitio elegido por Enrique). En movil va en la cabecera. */
#bp_aviso_compresion.bp-circulo-pc {
    position: absolute;
    top: 56px;
    right: 18px;
    z-index: 50;
}


/* 21/9: movil, foto vertical entera en elegir marco y confirmacion, desde el primer
   momento (sin esperar a bp_preview.js, que pone el difuminado despues), igual que en PC y en la bidipic final.
   Gana a la regla de max-width 600px que la ponia con cover (hacia zoom). */
@media (max-width: 600px) {
    body #step3 #bidipic.ver > #bidipicimg,
    body #step3_3 #previaconfirm_frame > #bidipic.ver > #bidipicimg {
        object-fit: contain !important;
        object-position: center center !important;
    }
}


/* 21/9: contador de caracteres de la ventana de texto (bp_contador.js). */
#bp_txt_contador {
    text-align: right;
    font-size: 13px;
    line-height: 1.2;
    color: #9a9a9a;
    margin: 6px 4px 0 0;
}
#bp_txt_contador.bp-txt-lleno {
    color: #d9534f;
    font-weight: bold;
}


/* 21/9: ventana de fuentes en PC. Ocupa todo #pfuentes (de 160px hasta
   100vh-160px, por encima de la barra de iconos) sin el margen de 140px
   del diseno viejo, y la lista se desplaza por dentro. En portatiles solo
   se veia un tercio porque la ventana se salia del contenedor. */
@media (min-width: 1024px) {
    #step4 #pfuentes .popup,
    body #pfuentes div.popup {
        margin-top: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }
    body #pfuentes #fuente {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow-y: auto !important;
    }
}


/* 21/9: video vertical antes de capturar en pantallas bajas (portatil).
   Con el zoom al 75% el video se quedaba en 318px y 90px mas abajo que el
   marco de la pantalla siguiente (442px), y al capturar daba un salto.
   Ahora empieza a la misma altura y mide lo mismo que el marco. */
@media (min-width: 1024px) and (max-height: 699px) {
    body #bp_panel_derecho #step2 #previavideo > .videoc:has(> #videoc.bp-video-ver) {
        padding-top: 0 !important;
    }
    body #bp_panel_derecho #step2 #videoc.bp-video-ver {
        height: auto !important;
        max-height: none !important;
    }
    body #bp_panel_derecho #step2 #videoc.bp-video-ver #video {
        height: 440px !important;
        max-height: 440px !important;
    }
}


/* 21/9: ventana de texto en pantallas bajas (portatil). Con top:400px
   acababa por debajo del borde de la barra de iconos (#bp_footer) y esta
   la tapaba. Ahora se cuelga desde abajo, 8px por encima de la barra. */
@media (min-width: 1024px) and (max-height: 760px) {
    body #bidipic_container #step3_2.element-visible {
        top: auto !important;
        bottom: 140px !important;
        margin-top: 0 !important;
    }
}


/* 21/9: contador arriba a la izquierda en PC, en el hueco de encima del
   cuadro de texto y en blanco (peticion de Enrique). En movil sigue debajo. */
@media (min-width: 1024px) {
    body #step3_2 #previatexto {
        position: relative !important;
    }
    body #step3_2 #previatexto #bp_txt_contador {
        position: absolute !important;
        top: 28px !important;
        left: 14px !important;
        margin: 0 !important;
        text-align: left !important;
        color: #ffffff !important;
        font-size: 14px !important;
        z-index: 5 !important;
    }
    body #step3_2 #previatexto #bp_txt_contador.bp-txt-lleno {
        color: #ff6b6b !important;
    }
}


/* 21/9: ejemplo de la fuente mas arriba y con hueco debajo para el contador
   (el contador va entre el ejemplo y el cuadro de texto). Solo PC. */
@media (min-width: 1024px) {
    body #step3_2 #previatexto #bp_fuente_preview {
        padding-top: 2px !important;
        margin-bottom: 18px !important;
    }
}


/* 21/9: ventana de fuentes con el estilo de la de texto: marco oscuro con
   borde blanco fino, titulos de seccion en verde corporativo y cada ejemplo
   de fuente en una pastilla blanca (los ejemplos son imagenes en negro).
   PC y movil. */
@media all {
    #step4 #pfuentes .popup,
    body #pfuentes div.popup {
        background: #1f1f20 !important;
        border: 1px solid #ffffff !important;
        border-radius: 12px !important;
        padding: 4px 8px 8px 8px !important;
    }
    body #pfuentes #closebtn2 {
        width: 36px !important;
        height: 36px !important;
        padding: 9px !important;
        margin: 6px 0 6px 2px !important;
        box-sizing: border-box !important;
    }
    body #pfuentes #closebtn2 img {
        width: 18px !important;
        height: 18px !important;
        display: block !important;
    }
    body #pfuentes #fuente {
        scrollbar-width: thin;
        scrollbar-color: #555 transparent;
        padding-right: 4px !important;
    }
    body #pfuentes #fuente .fontnew {
        background: transparent !important;
        padding: 0 !important;
        margin: 0 0 14px 0 !important;
    }
    body #pfuentes #fuente .fontnew h1 {
        color: #B5E745 !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
        letter-spacing: .08em !important;
        margin: 6px 0 8px 2px !important;
        padding: 0 !important;
    }
    body #pfuentes #fuente .fontnew br {
        display: none !important;
    }
    body #pfuentes #fuente .fontnew img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        background: #ffffff !important;
        border-radius: 8px !important;
        padding: 8px 10px !important;
        margin: 0 0 6px 0 !important;
        box-sizing: border-box !important;
        object-fit: contain !important;
        object-position: left center !important;
        outline: 2px solid transparent;
        cursor: pointer;
    }
    body #pfuentes #fuente .fontnew img:hover {
        outline-color: #B5E745;
    }
}


/* 22/9: aviso de la pantalla final del invitado (link_img.php). */
.bp-invitado-aviso {
    max-width: 520px;
    margin: 16px auto;
    padding: 14px 16px;
    border: 1px solid #B5E745;
    border-radius: 12px;
    color: #ffffff;
    text-align: center;
    font-size: 15px;
    line-height: 1.45;
}
.bp-invitado-aviso p { margin: 0 0 8px 0; }
.bp-invitado-aviso p:last-child { margin-bottom: 0; }
.bp-invitado-aviso strong { color: #B5E745; }


/* 22/9: aviso del invitado compacto en movil, para no empujar el QR y los
   botones de la pantalla final fuera de la vista. */
@media (max-width: 1023px) {
    .bp-invitado-aviso {
        margin: 6px auto !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
    .bp-invitado-aviso p { margin: 0 0 2px 0 !important; }
}


/* 22/9: pop-up de prueba gratuita agotada, por encima del capturador. */
#bp_popup_agotado {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
#bp_popup_agotado .bp-pa-caja {
    background: #1f1f20;
    border: 1px solid #ffffff;
    border-radius: 14px;
    padding: 24px 22px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
#bp_popup_agotado .bp-pa-txt {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 18px 0;
}
#bp_popup_agotado .bp-pa-txt strong { color: #B5E745; }
#bp_popup_agotado .bp-pa-btn {
    display: block;
    margin: 0 auto 10px auto;
    padding: 11px 18px;
    border-radius: 50px;
    background: #3a3a3a;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 15px;
}
#bp_popup_agotado .bp-pa-btn-reg {
    background: #3ecfb2; /* 22/9: agua marina, el mismo de la pantalla de marcos */
    color: #ffffff !important;
}
#bp_popup_agotado .bp-pa-salir {
    display: inline-block;
    margin-top: 6px;
    color: #9a9a9a !important;
    text-decoration: underline !important;
    font-size: 14px;
}
@media (max-width: 600px) {
    #bp_popup_agotado .bp-pa-caja { padding: 18px 16px; }
    #bp_popup_agotado .bp-pa-txt { font-size: 15px; }
}


/* 22/9: el popup se centra sobre el panel derecho en PC (la columna izquierda
   mide 380px, asi que se desplaza media columna). En movil no hay dos
   columnas y se queda centrado. */
@media (min-width: 1024px) {
    #bp_popup_agotado .bp-pa-caja {
        margin-left: 190px;
    }
}


/* 22/9: la pantalla de caducada va centrada: ahi no hay panel derecho. */
#bp_popup_agotado.bp-pa-centrado .bp-pa-caja { margin-left: 0 !important; }


/* 23/9: panel de ayuda mas alto en PC y portatil, que ahi sobra sitio y
   quedaba muy pequeno. El ancho no se toca. En movil, igual que estaba. */
@media (min-width: 1024px) {
    .bp-help-panel {
        max-height: calc(100vh - 160px);
        margin-bottom: 90px;
    }
}


/* 23/9: etiqueta freemium en la cabecera, en el hueco de la medalla y el
   reloj que el visitante no tiene. */
.bp-freemium-tag {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid #B5E745;
    border-radius: 50px;
    color: #B5E745;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .04em;
    line-height: 1.2;
    white-space: nowrap;
}


/* 23/9: aviso del invitado como pop-up en movil. En el flujo empujaba la
   pantalla final y en algunos telefonos cortaba el QR. */
.bp-invitado-capa {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 999998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.bp-invitado-capa .bp-invitado-aviso {
    position: relative;
    max-width: 340px;
    width: 100%;
    margin: 0 !important;
    padding: 26px 18px 16px !important;
    background: #1f1f20;
    font-size: 15px !important;
    line-height: 1.45 !important;
}
.bp-invitado-capa .bp-invitado-aviso p { margin: 0 0 8px 0 !important; }
.bp-invitado-capa .bp-invitado-aviso p:last-child { margin-bottom: 0 !important; }
.bp-invitado-cerrar {
    position: absolute;
    top: 4px;
    right: 12px;
    color: #9a9a9a;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

/* 25/9: visitante freemium con firma. El lapiz va pegado a la ayuda y la
   etiqueta freemium delante. Solo actua si existe la etiqueta (visitante). */
#bp_firma_icons:has(.bp-freemium-tag) .bp-freemium-tag {
    order: 1;
    margin-left: -28px;
}
#bp_firma_icons:has(.bp-freemium-tag) #bp_icon_firma {
    order: 2;
    margin-left: 0;
}

/* MARCOS VISIBLES EN MOVIL (28/9): en vertical la vista previa se ajusta para que el carrusel quepa entero,
   y el carrusel va remarcado en verde con "Elige tu marco". Solo movil. */
@media (max-width: 1023px) {
    body #step3 #bidipic.ver {
        width:      auto !important;
        height:     max(220px, calc(100svh - 430px)) !important;
        max-width:  100% !important;
        margin:     0 auto !important;
    }
    #step3 .videoc:has(#bidipic.ver) .arrows_capture_wrapper { margin-top: 10px !important; }
    #step3 #slider_marcos {
        border:     2px solid #8cc63f !important;
        box-shadow: 0 0 0 3px rgba(140,198,63,.25);
        animation:  bpMarcosLatido 1.2s ease-in-out .6s 3;
    }
    #step3 #slider_marcos::before {
        content:     "Elige tu marco";
        display:     block;
        padding:     6px 10px 0;
        color:       #8cc63f;
        font-weight: 700;
        font-size:   13px;
        text-align:  center;
    }
}
@keyframes bpMarcosLatido {
    0%, 100% { box-shadow: 0 0 0 3px rgba(140,198,63,.25); }
    50%      { box-shadow: 0 0 0 7px rgba(140,198,63,.55); }
}
/* ROTULO CENTRADO desde el principio, aunque el carrusel aun no haya arrancado (28/9). Solo movil. */
@media (max-width: 1023px) {
    #step3 #slider_marcos { position: relative !important; padding-top: 22px !important; }
    #step3 #slider_marcos::before { position: absolute; top: 5px; left: 0; right: 0; padding: 0; }
}
/* AVISO SIN MARCO al pulsar Next (28/9). Lo crea bp_marcos_movil.js, solo en movil. */
#bp_aviso_marco { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
#bp_aviso_marco .bp-am-caja { background: #1f1f20; border: 2px solid #8cc63f; border-radius: 14px; padding: 20px 18px; width: 100%; max-width: 320px; text-align: center; box-sizing: border-box; }
#bp_aviso_marco .bp-am-tit { color: #fff; font-size: 17px; font-weight: 700; margin: 0 0 6px; }
#bp_aviso_marco .bp-am-txt { color: #ccc; font-size: 14px; margin: 0 0 16px; }
#bp_aviso_marco .bp-am-bot { display: flex; flex-direction: column; gap: 10px; }
#bp_aviso_marco .bp-am-bot button { border: 0; border-radius: 10px; padding: 12px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; }
#bp_aviso_marco .bp-am-elegir { background: #8cc63f; color: #0a0d14; }
#bp_aviso_marco .bp-am-seguir { background: transparent; color: #ccc; border: 1px solid #555 !important; }
#step3 #slider_marcos.bp-am-latido { animation: bpMarcosLatido 1.2s ease-in-out 0s 3; }
/* AVISO BOTONES BLINDADOS frente a los estilos generales de button del generador, y aire bajo los marcos (28/9) */
#bp_aviso_marco .bp-am-bot button {
    display: block !important; position: static !important; float: none !important;
    width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important;
    margin: 0 !important; padding: 12px !important; box-sizing: border-box !important;
    font-size: 15px !important; line-height: 1.2 !important; font-weight: 700 !important;
    text-indent: 0 !important; letter-spacing: normal !important; text-transform: none !important;
    visibility: visible !important; opacity: 1 !important; box-shadow: none !important; background-image: none !important;
    border-radius: 10px !important;
}
#bp_aviso_marco .bp-am-bot .bp-am-elegir { background: #8cc63f !important; color: #0a0d14 !important; border: 0 !important; }
#bp_aviso_marco .bp-am-bot .bp-am-seguir { background: transparent !important; color: #ccc !important; border: 1px solid #555 !important; }
@media (max-width: 1023px) {
    #step3 #slider_marcos { padding-bottom: 8px !important; }
}
/* MARCOS REMARCADOS EN PC (28/9): lo mismo que en movil, sin tocar el tamano del video. */
@media (min-width: 1024px) {
    #step3 #slider_marcos {
        position:   relative !important;
        padding-top: 22px !important;
        padding-bottom: 8px !important;
        border:     2px solid #8cc63f !important;
        border-radius: 10px !important;
        box-shadow: 0 0 0 3px rgba(140,198,63,.25);
        animation:  bpMarcosLatido 1.2s ease-in-out .6s 3;
        box-sizing: border-box !important;
    }
    #step3 #slider_marcos::before {
        content: "Elige tu marco"; position: absolute; top: 5px; left: 0; right: 0;
        color: #8cc63f; font-weight: 700; font-size: 13px; text-align: center;
    }
}
/* SIN LATIDO AL ENTRAR (solo al pulsar "Elegir marco" en el aviso) y remarcado solo en el carrusel en marcha:
   en PC hay otro #slider_marcos vacio que salia como un segundo recuadro (28/9). */
#step3 #slider_marcos { animation: none !important; }
#step3 #slider_marcos.bp-am-latido { animation: bpMarcosLatido 1.2s ease-in-out 0s 3 !important; }
#step3 #slider_marcos:not(.slick-initialized) { border: 0 !important; padding: 0 !important; box-shadow: none !important; }
#step3 #slider_marcos:not(.slick-initialized)::before { content: none !important; }

/* IPHONE TARJETAS (3/10/2026): en iPhone el hueco util es menor y la 3a tarjeta de inicio quedaba
   bajo la botonera. Solo Safari de iOS y solo movil: tarjetas al alto disponible, maximo 170px. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 1023px) {
    .bp-card { height: min(170px, calc((100svh - 240px) / 3)) !important; }
  }
}

/* IPHONE STEP2 (3/10/2026): el carrusel de fotogramas se metia bajo la botonera en iPhone.
   Solo Safari de iOS y solo movil: su alto se calcula sobre el alto visible (svh). */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 1023px) {
    #step2.element-visible { height: calc(100svh - 100px) !important; }
  }
}

/* IPHONE CONFIRMACION (3/10/2026): Safari no resolvia los % de la previa horizontal. */
@supports (-webkit-touch-callout: none) { @media (max-width: 1023px) {
body #step3_3 #previaconfirm_frame:has(> #bidipic.hor), body #step3_3 #previaconfirm_frame > #bidipic.hor { height: calc(min(360px, 100vw - 40px) * .75) !important; aspect-ratio: auto !important; }
} }
@supports (-webkit-touch-callout: none) { @media (max-width: 1023px) {
body #step3_3 #previaconfirm_frame > #bidipic.hor > #bidipicimg { height: calc(min(360px, 100vw - 40px) * .585) !important; }
} }
/* IPHONE STEP3_3 (3/10/2026): la confirmacion se metia bajo la botonera. Alto sobre lo visible (svh). */
@supports (-webkit-touch-callout: none) { @media (max-width: 1023px) {
#step3_3.element-visible { height: calc(100svh - 100px) !important; }
} }
/* IPHONE STEP6 (3/10/2026): la pantalla final se metia bajo la botonera. Alto sobre lo visible (svh). */
@supports (-webkit-touch-callout: none) { @media (max-width: 1023px) {
#bp_final { max-height: calc(100svh - 91px) !important; }
#step6.element-visible #bp_final.bp-final-hor { max-height: calc(100svh - 110px) !important; }
} }
/* IPHONE CONFIRMACION CUADRADA (3/10/2026): Safari no resolvia los % de la previa 1:1. */
@supports (-webkit-touch-callout: none) { @media (max-width: 1023px) {
body #step3_3 #previaconfirm_frame:has(> #bidipic.cua), body #step3_3 #previaconfirm_frame > #bidipic.cua { height: min(360px, 100vw - 40px) !important; aspect-ratio: auto !important; }
body #step3_3 #previaconfirm_frame > #bidipic.cua > #bidipicimg { top: calc(min(360px, 100vw - 40px) * .0462) !important; height: calc(min(360px, 100vw - 40px) * .74) !important; }
} }