/*Ajustes bootstrap*/
.bg-dark {
	--bs-dark-rgb: 0,0,0;
	--bs-bg-opacity:1 ;
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6, .bg-dark p:not(.alert), .bg-dark {
	color: #fff;
}
.bg-secondary{
	--bs-secondary-rgb: 69,69,75;
}
.navbar-dark, .navbar[data-bs-theme=dark] {
	--bs-navbar-color: rgba(255, 255, 255, 1);
	--bs-navbar-hover-color: rgba(255, 255, 255, 1);
	--bs-navbar-disabled-color: rgba(255, 255, 255, 0.5);
	--bs-navbar-active-color: #fff;
	--bs-navbar-brand-color: #fff;
	--bs-navbar-brand-hover-color: #fff;
	--bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
	--bs-navbar-toggler-focus-width: 0;
}
.navbar-toggler{
	border:0;
}
.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--main-color);
	--bs-btn-border-color: var(--main-color);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: color-mix(in srgb, var(--main-color) 80%, black);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--main-color) 80%, black);
	--bs-btn-focus-shadow-rgb: 49,132,253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: color-mix(in srgb, var(--main-color) 70%, black);
	--bs-btn-active-border-color: color-mix(in srgb, var(--main-color) 70%, black);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--main-color);
	--bs-btn-disabled-border-color: var(--main-color);
}
.btn-blacky {
	color: #fff;
	background-color: #000;
	border-color: #000;
}
.btn-blacky:hover,.btn-blacky:focus,.btn-blacky:active {
	color: #000;
	background-color: #fff;
}
.btn {
	--bs-btn-padding-x: 1.5rem;
	--bs-btn-padding-y: 0.625rem;
	--bs-btn-font-family: Roboto, sans-serif;
	--bs-btn-font-size: 1.125rem;
	--bs-btn-font-weight: 400;
	--bs-btn-line-height: 1.5;
	border-radius: 0;
}
.btn.is-submitting {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}
.form-select{
	border-radius: 0;
}
.border-primary{
   border-color:#666666!important;
}
.border-primary-subtle{
	--bs-primary-border-subtle:#404040;
}
.nav-link{
	color:#fff;
}
.nav-link:focus, .nav-link:hover {
	color: inherit;
}
.label-proximamente{
	position: absolute;
	top: -2rem;
	left: 50%;
	translate: -50%;
	background: white;
	border-radius: 4px;
	padding: 0.25rem 0.5rem;
	display: none;
}
.btn-videochat .label-proximamente{
	top: -3rem;
	padding: 0 0.5rem;
}
.nav-link:hover .label-proximamente, .btn-videochat:hover .label-proximamente{
	display: block;
	color: black;
}
.input-group-text,
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
	--bs-tertiary-bg:#FFF;
	--bs-border-radius:0;
	--bs-border-width:0;
	color:#000;
	padding: 0.3rem 0.75rem;  
}
.form-control{
	border-radius: 0;
}
.form-control:focus {
	box-shadow: none;
}
::placeholder {
  color:#000;
  font-weight: bold;
}

::-ms-input-placeholder{
	color:#000;
	font-weight: bold;
}
.accordion {
	--bs-body-color:#fff;
	--bs-body-bg:transparent;
	/*--bs-accordion-border-color: var(--bs-border-color);*/
	--bs-border-width:0;
}
.accordion-button:focus{
	box-shadow:none;
}
.modal-content {
	--bs-modal-color:#fff;
	--bs-modal-bg:#262626;;
	--bs-modal-border-color:#525252;
	border-radius: 0;
}
.btn-close{
	opacity:1;
}
.custom-tooltip {
  --bs-tooltip-bg: var(--bg-tooltip);
}
/*utilidades*/
:root{
	--color-sec:#bababa;
	--color-rosa:#eb1c74;
	--color-gris-claro:#cfcfcf;
	--color-estado-neutro:#c9c9c9;
	--color-estado-conectado:#54ff00;
	--color-estado-emitiendo:#ff0000;
	--color-border-b:#555558;
	--bg-gris-alt:#363639;
	--bg-alt:#5c5c64;
	--bg-tooltip:#202023;
	--bs-primary-rgb: 131,131,131;
	--bg-bocadillo:#303034;
	--bg-bocadillo-propio:#971b51;
}
.no-radius,
.no-radius .card-header:first-child{
	border-radius: 0;
}
.rosa{
	color:var(--color-rosa)!important;
}
.color-sec{
	color: var(--color-sec)!important;
}
.color-gris{
	color: var(--color-gris-claro)!important;
}
.card-dark{
	background-color: #262626;
	color:#fff;
	border-color:#525252;
}
/*General*/
body{
	font-family: Roboto, sans-serif;
}
h1,h2,h3{
	font-family: Lora, serif;
}
a{
	color:inherit;
	text-decoration: none;
}
main>div.bg-dark{
	min-height: 100vh;
}

/*contenido*/
.logo{
	max-width:200px;
}
.navbar .btn{
	--bs-btn-padding-y: 0.5rem;
}
.hero{
	/*height:600px;*/
	background-size: 120%;
	background-repeat: no-repeat;
	 background-position: left top -30px;
	display: flex;
	flex-direction: column;
	justify-content: end;
 }
.hero h1{
	/*background: #ffffff56;*/
	filter: drop-shadow(0px 0px 10px #fffcf9);
	text-shadow: 0px 0px 40px rgba(255,255,255,1);
	font-size: 2.4rem;
}
.opt-gen .opt-gen svg{
	border:3px solid grey;
	fill: grey;
}
.opt-gen .radiolabel{
	cursor: pointer;
}
.opt-gen input[type="radio"]
{
	display: none;
}

input[name="genero"] + label > svg
{
	border: solid 2px grey;
	fill: grey;
}

input[name="genero"]:checked + label > svg
{
	fill: var(--main-color);
	border-color: var(--main-color);
}

@keyframes horizontal-shaking-hombre {
	0% { transform: translateX(0); fill: rgb(215, 0, 0); border-color: rgb(215, 0, 0); }
	12.5% { transform: translateX(5px) }
	25% { transform: translateX(-5px) }
	37.5% { transform: translateX(5px) }
	50% { transform: translateX(-5px) }
	62.5%{ transform: translateX(5px) }
	75% { transform: translateX(-5px); fill: rgb(215, 0, 0); border-color: rgb(215, 0, 0); }
	87.5% { transform: translateX(5px) }
	100% { transform: translateX(0); fill:grey; border-color: grey; }
}

@keyframes horizontal-shaking-mujer {
	0% { transform: translateX(0); fill: rgb(215, 0, 0); border-color: rgb(215, 0, 0); }
	12.5% { transform: translateX(-5px) }
	25% { transform: translateX(5px) }
	37.5% { transform: translateX(-5px) }
	50% { transform: translateX(5px) }
	62.5%{ transform: translateX(-5px) }
	75% { transform: translateX(5px); fill: rgb(215, 0, 0); border-color: rgb(215, 0, 0); }
	87.5% { transform: translateX(-5px) }
	100% { transform: translateX(0); fill:grey; border-color: grey; }
}

@keyframes horizontal-shaking-checkbox {
	0% { transform: translateX(0); fill: rgb(215, 0, 0); border-color: rgb(215, 0, 0); }
	25% { transform: translateX(5px) }
	50% { transform: translateX(-5px) }
	75% { transform: translateX(5px); fill: rgb(215, 0, 0); border-color: rgb(215, 0, 0); }
	100% { transform: translateX(0); fill:grey; border-color: grey; }
}

.errorGeneros .svgM{
	animation: horizontal-shaking-mujer;
	animation-duration: 1s;
}

.errorGeneros .svgH{
	animation: horizontal-shaking-hombre;
	animation-duration: 1s;
}

.politica-privacidad-div{
	font-size: 15px;
}

#genpref .form-check .form-check-input{
	margin-left: -1em;
}

.checkerror{
	animation: horizontal-shaking-checkbox;
	animation-duration: 0.5s;
}

.card-genero{
	max-width:350px;
	margin:auto;
}
.card-genero .form-select{
	padding:0.75rem 1.25rem;
}
.feature-img{
	width:116px;
	height: 116px;
	line-height: 116px;
	border:4px solid #000;
	text-align:center;
	position:relative;
}
.feature-img:after{
	content:"1";
	display: block;
	border-radius: 17px;
	width:34px;
	height:34px;
	background:#000;
	color:#fff;
	text-align:center;
	line-height: 34px;
	font-size:26px;
	font-family: Lora, serif;
	position:absolute;
	left:0;
	top:0;
}
.feature-img.first:after{
	content:"1";
}
.feature-img.second:after{
	content:"2";
}
.feature-img.third:after{
	content:"3";
}
.feature-img.fourth:after{
	content:"4";
}
/*acordeon*/
.accordion-faqs .accordion-button{
	font-size: 24px;
	display:inline-block;
}
.accordion-header{
	font-family: Roboto, sans-serif;
}
.accordion-faqs .accordion-button:after{
	display:inline-block;
}
.accordion-button.bg-dark:not(.collapsed),
.accordion-button.bg-dark:focus {
	--bs-accordion-active-color: #fff;
	--bs-accordion-active-bg: #000;
	box-shadow: none;
}
.accordion-button.bg-dark::after{
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e")
}

/*Otros servicios*/
.sombra-logos{
	background: url("../assets/img/sombra.jpg") bottom center no-repeat;
	background-size:contain;
	padding-bottom:100px;
	margin: auto;
}
.sombra-logos a img{
	transition: all .2s ease-in-out;
}
.sombra-logos a:hover img{
	transform: scale(1.1);
}

/*cabecera interior*/
.link-usuario span{
	line-height: 38px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
    max-width: 120px;
}
/*** Ordenación ***/
ul.ordenar li.change-order-btn{
	cursor: pointer;
}
svg.ascendente{
	transform: rotate(180deg);
}
.ordenar .selector{
	line-height: 0;
}
.buscar{
	width:100%;
	max-width:460px;
}
/*** Listado ***/

@media (min-width: 1200px){
	.pagina-listado .container, .pagina-listado .container-lg, .pagina-listado .container-md, .pagina-listado .container-sm, .pagina-listado .container-xl, .pagina-listado .container-xxl {
		max-width: 1180px;
	}
}
.usuarios{
	 gap:.5rem;
}
.usuarios .card-user{
	width: calc(50% - 4px);
	cursor: pointer;
}
.card-user .top-card{
	position:relative;
}
.card-elements{
	position:absolute;
	padding:10px;
	width:100%;
	height: 100%;
	top:0;
}
.whish{
	--heart-fill: transparent;
	transition:all .2s ease-in-out;
}
.favorito .whish,
.whish:hover {
	--heart-fill: var(--color-rosa);
}
.estado{
	width:1rem;
	height:1rem;
	border-radius: 50%;
	border:2px solid #fff;
	background-color: var(--color-estado-neutro);
	display:block;
}
.estado.emit{
	background-color: var(--color-estado-emitiendo);
	animation: fast-pulse 1.5s infinite;
}
@keyframes fast-pulse {
	0% {
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.2);
    transform: scale(1);
  }
  50% {
  	transform: scale(1.10);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    transform: scale(1);
  }
}
.estado.conect{
	background-color: var(--color-estado-conectado);
}
.botonera-inf a{
	width:38px;
	height:38px;
	background:rgba(69,69,76,0.75);
	border-radius: 50%;
	line-height: 38px;
	text-align: center;
	transition:all .2s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
}
.botonera-inf a:hover{
	width:38px;
	height:38px;
	background:rgba(69,69,76,1);
	border-radius: 50%;
	line-height: 38px;
	text-align: center;
}
.botonera-inf a.btn-chat{
	background:#fff;
}
.botonera-inf a.btn-chat:hover{
	background:rgba(256,256,256,.85);
}
.card-user .card-img-top{
	object-fit: cover;
	height:220px;
}
.card-user .card-title{
	font-size:1rem;
}
.card-user .card-text{
	font-size:0.875rem;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.card-user .card-body {
	--bs-card-spacer-y:6px;
	--bs-card-spacer-x:10px;
}
.ubicacion {
	display: flex;
	align-items: center;
	gap: 2px;
}
/*** Filtros ***/
.offcanvas-footer{
	padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
}
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
	--bs-offcanvas-width: 320px;
}
#modal-cambiar-ubicacion .btn-close{
	position: absolute;
	right: 12px;
}


.filtros .offcanvas-body::-webkit-scrollbar {
  width: 8px;
}
.filtros .offcanvas-body::-webkit-scrollbar-track {/* Track */
  background: #000; 
}
 

.filtros .offcanvas-body::-webkit-scrollbar-thumb {/* Handle */
  background: #45454b; 
}

.filtros .offcanvas-body::-webkit-scrollbar-thumb:hover {/* Handle on hover */
  background: #555; 
}


.filtros,
.filtros h4 .titulo-filtro{
	color: var(--color-gris-claro);
}
.filtros h3{
	font-family: Roboto, sans-serif;
	font-size:20px;
}

.filtro{
	padding:20px 0;
}
.filtro .input-group{
	height:40px;
}
.filtro .form-check-input,
.form-check-input:focus{
	border: 1px solid var(--color-rosa);
	border-radius: 0;
}
.form-check-input:focus {
	box-shadow: none;
}
.filtro .form-check-input:checked {
	background-color: var(--color-rosa);
	border-color: var(--color-rosa);
}
.filtros .accordion-button:after{
	position: absolute;
	left:0;
}
.filtros .accordion-button.bg-dark::after {
	background-image: url(../assets/img/right.svg);
	background-size: contain;
	width: 6px;
	height: 10px;
	--bs-accordion-btn-icon-transform: rotate(90deg);
}
.filtro .input-ubicacion:read-only{
	background-color: var(--bs-body-bg);
	cursor: pointer;
	font-weight: 600;
	color: #595c5f !important;
}
#modal-cambiar-ubicacion h3{
	font-family: Roboto, serif;
}
/*input tipo slider*/
.slider-track {
  width: 100%;
  height: 2px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  border-radius: 0px;
}

input[type="range"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #848484;
	height: 2px;
}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: relative;
	top: 0px;
	z-index: 1;
	width: 22px;
	height: 22px;
	cursor: pointer;
	border:2px solid var(--color-rosa);
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	background-color: #fff;
}
input[type="range"]:active::-webkit-slider-thumb {
	background-color: var(--color-rosa);
}
/*************************************/
.doble-slide{
	position:relative;
	height:16px;
	margin-top:6px;
}
.doble-slide .slider-track{
	width: 100%;
	height: 2px;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	border-radius: 0px;
}
.doble-slide input[type="range"] {
	width: 100%;
	outline: none;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	background-color: transparent;
	pointer-events: none;
}
.doble-slide input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	background-color: #fff;
	cursor: pointer;
	margin-top: -11px;
	pointer-events: auto;
	border-radius: 50%;
	position: relative;
	top: 0px;
	z-index: 1; 
}
.doble-slide input[type="range"]::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	height: 2px;
}
.doble-slide input[type="range"]::-moz-range-track {
	-moz-appearance: none;
	height: 2px;
}
.doble-slide input[type="range"]::-ms-track {
	appearance: none;
	height: 2px;
}
/*************************************/
.pulse-highlight {
	object-fit: cover;
	animation: pulse 1.5s infinite;
}
@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.10);
	}
}

/**** Perfil ususario ****/
/* Modal */
#perfil-usuario .modal-dialog{
	margin-bottom:140px;
}
#perfil-usuario{
	--bs-modal-width: 920px;
}
#perfil-usuario h1, #perfil-usuario h2, #perfil-usuario h3{
	font-family: Roboto, serif;
}
#perfil-usuario .modal-header{
	padding:0;
	display: block;
	position:relative;
	border:0;
}
#perfil-usuario .modal-title{
	font-size:30px;
}
#perfil-usuario .info-superior{
	position:absolute;
	background: rgb(0,0,0);
	background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
	width:100%;
	z-index:530;
	top:0;
	min-height: 70px;
}
#perfil-usuario .info-inferior{
	position:absolute;
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
	width:100%; 
	z-index:535;
	bottom:0;
	min-height: 74px;
}
/* Carousel */
.carousel-fotos{
	height:500px;
}
.carousel-fotos .swiper{
	height: 100%;
}
.carousel-fotos .swiper-slide{
	width:auto;
	max-width: 100%;
}
.swiper-button-next, .swiper-button-prev{
	color:#fff;
	--swiper-navigation-color:#fff;
	--swiper-theme-color:#fff;
	text-shadow: 0px 5px 10px rgba(0,0,0,0.35);
}
.diapositiva{
	position: relative;
	height:100%;
}
.diapositiva img{
	height:100%;
	object-fit: cover;
}
.container-alert-img-block{
	position:absolute;
	width:100%;
	top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.alert-img-block{
	width:220px;
	background:rgba(0,0,0,.4);
	padding:10px;
	position:relative;
	z-index: 4;
	text-align: center;
	margin: 0 auto;
	font-size: 20px;
	line-height: 1.25;
}
.bloque-info-usuario{
	background-color: var(--bg-gris-alt);
	border-radius: 4px;
	padding: 20px;
}
.bloque-info-usuario .d-flex{
	gap:1rem;
}
.bloque-info-usuario .badge{
	background-color: var(--bg-alt);
	--bs-badge-padding-x: 1em;
	--bs-badge-padding-y: 0.625em;
	--bs-badge-font-weight: 400;
}
.menu-flotante{
	background: #45454b;
	border-radius: 25px;
	border:1px solid #606069;
	position:fixed;
	left: calc( 50% - 159px );
	bottom:40px;
	z-index: 240;
}
.menu-flotante .nav{
	height:50px;
}

.form-control:focus, .form-select:focus {
	box-shadow: none;
}

.regalo-virtual-modal{
	border: 1px solid #666666;
  padding: 0.5rem;
  cursor: pointer;
}
.regalo-virtual-modal:hover{
	background-color: #3d3d3d;
}
/************ Registro **************/
.autocomplete {
	position: relative;
	display: inline-block;
	width: 100%;
}
.autocomplete-items {
	color:black;
	position: absolute;
	border: 1px solid #d4d4d4;
	border-top: none;
	z-index: 99;
	top: 100%;
	left: 0;
	right: 0;
	overflow-y: scroll;
	max-height: 250px;
}
#editar-usuario .autocomplete-items{
	padding: 0;
}
#listado .autocomplete-items{
	max-height: 50vh;
	position: static;
}
.autocomplete-items::-webkit-scrollbar{
	width: 5px;
	background-color: white;
}

.autocomplete-items::-webkit-scrollbar-thumb{
	background-color: var(--main-color);
	border-radius: 50px;
}

.autocomplete-items div {
	padding: 10px;
	cursor: pointer;
	background-color: #fff;
}
.autocomplete-items div:hover {
	background-color: #e9e9e9;
}
.autocomplete-active {
	background-color: #e9e9e9 !important;
}

#selector-idioma, #selector-idioma > *{
	width: fit-content;
	max-width: fit-content;
}

#selector-idioma .dropdown-menu{
	position: absolute;
}

.zona-subir{
	width:220px;
	height:220px;
	border:1px solid #fff;
	position:relative;
	line-height:220px;
	text-align:center;
	background-color: #5b5b5b;
	cursor: pointer;
}
.ico-plus{
	position:relative;
	z-index:10;
}
.silueta{
	position:absolute;
	bottom: 0;
	fill:#202020;
	width:100%;
	left:0;
	opacity: 0.25;
}
.upload-hidden{
	display: none;
}

#registro{
	height: 100vh;
	background-color: black;
}

form#registro1 input{
	line-height: 2rem;
}

.idiomas-dropdown-item{
	display: flex;
	align-items: center;
}

.plus-check-animation{
	transition: opacity 0.3s ease-in-out;
}

/************ Mi perfil ***********/
#mi-perfil h1{
	font-family: Roboto, sans-serif;
}
#mi-perfil input,
#mi-perfil select,
#gestionar-anuncios input,
#gestionar-anuncios select {
  color-scheme: dark;
}
#mi-perfil .form-select,
#modal-preguntas .form-select,
#configuracion .form-select,
#gestionar-anuncios .form-select,
#modal-reportes .form-select{
	--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
}
.imagen-perfil{
	background-color: #d7d7d7;
}
.imagen-perfil img{
	object-fit:cover;
}
.imagen-generica{
	opacity: .3;
}
.columna-left{
	max-width: 450px;
}
#mi-perfil .form-control,
#mi-perfil .input-group-text,
#configuracion .form-control,
#modal-reportes .form-control{
	background-color: var(--bg-tooltip);
	color: #fff;
	border-width: 1px;
	border-color: var(--color-border-b);
}
#mi-perfil .form-control,
#configuracion .form-control,
#modal-reportes .form-control{
	border-radius: 4px;
}
#mi-perfil .form-control.left-icon{
	border-left:0;
	border-radius: 0 4px 4px 0;
}
#mi-perfil .input-group-text{
	border-right:0;
	border-radius: 4px 0 0 4px;
}
#mi-perfil .form-control::placeholder,
#configuracion .form-control::placeholder,
#gestionar-anuncios .form-control::placeholder,
#modal-reportes .form-control::placeholder {
   color:#fff;
}
.bloque-d,
.card .bloque-d{
	background-color: var(--bg-tooltip);
	border: 1px solid var(--color-border-b);
}
.badges{
	color:#fff;
}
.badge.opcion{
	line-height: 34px;
	height: 34px;
	padding:0 17px;
	border-radius: 17px;
	background-color: var(--bg-alt);
	font-size:1rem;
}
.galeria{
	border: 2px solid transparent;
	border-top-width: 0;
	border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.galeria.dragover{
	border-color: rgb(234, 29, 118);
}
.galeria .overlay-dragover svg{
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.galeria.dragover .overlay-dragover svg{
	display:block;
}
.galeria.dragover .galeria-container{
	opacity: .25;
}
.diapo-galeria{
	width:172px;
	height:172px;
	position:relative;
}
.diapo-galeria img{
	width: 100%;
	height: 100%;
	object-fit:cover;
	position:relative;
}
.diapo-galeria .diapo-opt{
	/*display:block;
	content:"";*/
	position: absolute;
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
	width: 100%;
	z-index: 535;
	bottom: 0;
	min-height: 40px;
}
.diapo-galeria.vacia{
	background-color: var(--bg-tooltip);
	border: 1px solid var(--color-border-b);
}
.diapo-galeria.vacia > a{
	width:100%;
	display:flex;
	height:100%;
	line-height: 100%;
	align-items: center;
	justify-content: center;
}
.diapo-galeria.vacia img, .diapo-galeria.vacia > a > svg{
	width:80%;
	object-fit: fill;
	opacity: .24;
}
.galeria .d-flex{
	gap:28px;
}
#backdrop-modal-usuario{
	top: 0;
	left: 0;
}
#overlay-uploading{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  flex-direction: column;
  gap: 1rem;
  z-index: 1060;
}
body#contenido-personalizado #overlay-uploading{
	left: 0;
	top: 0;
}
#overlay-uploading .overlay-uploading-loader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffff;
  --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}
.diapo-galeria svg.play-overlay{
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.eliminar{
	position:absolute;
	bottom:5px;
	right:5px;
	z-index:76;
}
.badges .accordion-button::after {
	background-image: url(../assets/img/right-b.svg);
	background-size: 7px 12px;
	background-position: center center;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	--bs-accordion-btn-icon-transform: rotate(90deg);
	background-color: #fff;
}

.badges .input-group{
	height:40px;
}
.badges .form-check-input,
.badges .form-check-input:focus{
	border: 1px solid var(--color-rosa);
	border-radius: 0;
	background-color: transparent;
}
.badges .form-check-input:checked {
	background-color: var(--color-rosa);
	border-color: var(--color-rosa);
}
#mi-perfil .form-select,
#modal-preguntas .form-select,
#configuracion .form-select,
#gestionar-anuncios .form-select,
#gestionar-anuncios input,
#modal-reportes .form-select{
	background-color: var(--bg-tooltip);
	border-color:var(--color-border-b);
	color:#fff;
	border-radius: 4px;
}
#mi-perfil .form-select:disabled,
#modal-preguntas .form-select:disabled{
	opacity: 0.65;
}
#mi-perfil .form-control.disabled{
	pointer-events: none;
}
#modal-reportes .form-select::placeholder{
	color: #666666;
	font-weight: normal;
}
.semicolapsed.collapse:not(.show) {
	display: block;
	max-height:360px;
	overflow:hidden;
	position: relative;
}
.semicolapsed.collapse:not(.show):after {
	display: block;
	content:"";
	position:absolute;
	width:100%;
	bottom:0;
	height:50px;
	background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
	z-index:45;
}
.semicolapsed.collapsing {
	height: 360px;
}
.collapse-icon{
	position:relative;
	padding-right:20px;
}
.collapse-icon:after{
	display: block;
	content:"";
	height:14px;
	width:8px;
	background: url(../assets/img/right.svg) center no-repeat;
	background-size:contain;
	position:absolute;
	right:0;
	top: calc(50% - 7px);
	transform: rotate(90deg);
}
.collapse-icon[aria-expanded="false"]:after{
	transform: rotate(0);
}
.pregunta{
	position:relative;
	min-height: 5.9rem;
}
.coqueteo .botones-svg, .pregunta .botones-svg{
	position:absolute;
	right:14px;
	top:14px;
  	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
}
.coqueteo .botones-svg svg, .pregunta .botones-svg svg{
	cursor: pointer;
}
.swal2-popup.swal2-toast .swal2-title{
	font-family: Roboto, sans-serif;
}
.imagen-perfil-svg{
	width: 100%;
	height: 450px;
}
@media (max-width: 991px){
	.imagen-perfil-svg{
		height: 250px;
	}
}

/*********** Chat ************/
.chat-godown{
	background-color: rgba(196, 193, 193, 0.3);
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 50%;
	color: #999999;
	font-size: 28px;
	position: absolute;
	width: 40px;
	height: 40px;
	bottom: 80px;
	right: 30px;
	transition: opacity 0.3s ease;
	opacity: 0;
	pointer-events: none;
	z-index: 9999;
}
.chat-godown.visible {
	opacity: 1;
	pointer-events: auto; /* Reactiva interacciones cuando está visible */
}
.chat-godown .new_message_icon{
	color: #fcdd1d;
	font-size: 32px;
	position: absolute;
	top: 0;
	left: 0;
	margin-top: -10px;
	display: none;
}
.chat{
	background-color: #1a1a1d;
	color:#fff;
	border:1px solid #525252;
	position: relative;
}
.chat-header{
	background-color: #303034;
	border-bottom:1px solid #525252;
	font-size:18px;
	font-weight: bold;
}
.bloque-dialogo .bocadillos{
	max-width:320px;
}
.bocadillo{
	background-color: var(--bg-bocadillo);
	border-radius: 4px;
}
.bocadillo:first-child{
	position:relative;
}
.bocadillo:first-child:before{
	content:"";
	display:block;
	position:absolute;
	width:16px;
	height:14px;
	background-size: 100%; 
}
.bloque-dialogo.propio{
   justify-content: flex-end;
   margin-right:28px;
}
.bloque-dialogo.propio .bocadillo{
	background-color: var(--bg-bocadillo-propio);
}
.bloque-dialogo:not(.propio) .bocadillo:first-child:before{
	background: url(../assets/img/esquina.svg) top left no-repeat;
	top:0;
	left:-8px;
}
.bloque-dialogo.propio .bocadillo:first-child:before{
	background: url(../assets/img/esquina-rosa.svg) top left no-repeat;
	top:0;
	right:-8px;
}
.chat-footer{
	color:#fff;
	background-color:#303034;
	border-top:1px solid #525252;
}
.chat textarea{
	color:#fff;
	background-color:#303034;
	height:60px;
	border:0;
	resize: none;
}
.chat textarea:focus-visible{
	outline:0;
}
.textarea-container {
	position: relative;
	width: 100%;
}

.attachment-button {
	position: absolute;
	right: 15px;
	top: 50%; /* Position at 50% from the top */
	transform: translateY(-50%); /* Center vertically */
	width: 40px;
	height: 40px;
	background-color: #1a1a1d;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	z-index: 2;
	transition: all 0.3s ease;
}

.attachment-button:hover {
	background-color: #525252;
}
.delete-attachment {
	z-index: 3;
}

.attachment-menu {
	position: absolute;
	/*right: 60px;*/
	/*top: 50%;*/ /* Position at 50% from the top */
	transform: translateY(-50%); /* Center vertically */
	display: none;
	background-color: #525252;
	border-radius: 20px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	padding: 5px;
	z-index: 1;
	flex-flow: column;
	top: -100px;
	right: 5px;
}

.attachment-menu.active {
	display: flex;
}

.attachment-option {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 30px;
	margin: 0 5px 12px 5px;
}

.attachment-option:hover {
	background-color: #f0f0f0;
}

.image-option {
	color: #4CAF50;
}

.video-option {
	color: #F44336;
}

.audio-option {
	color: var(--color-rosa);
}

.gift-option {
	color: #FF9800;
}

/* Hide file inputs */
.hidden-file-input {
	display: none;
}

.imagen-modal-chat {
	display: none;
	position: fixed;
	z-index: 1000;
	padding-top: 50px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.9);
	transition: 0.3s;
}

.video-protection-container {
	position: relative;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.protected-video {
	pointer-events: auto;
}

/* Ocultar el botón de descarga en Chrome */
video::-internal-media-controls-download-button {
	display: none;
}

video::-webkit-media-controls-enclosure {
	overflow: hidden;
}

video::-webkit-media-controls-panel {
	width: calc(100% + 30px);
}

/* Estilo para el mensaje de advertencia */
.video-warning-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
	z-index: 10;
	text-align: center;
	padding: 20px;
	font-size: 16px;
	font-weight: bold;
}

.video-protection-container.show-warning .video-warning-overlay {
	opacity: 1;
}


/* Grabadora de audio */
/* Estilos para el grabador de audio */
.audio-recorder-container {
	position: fixed;
	bottom: 50%;
	left: 50%;
	transform: translateX(-50%);
	width: 300px;
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 1000;
	padding: 15px;
	display: none;
	flex-direction: column;
	align-items: center;
}

.audio-recorder-wrapper {
	width: 100%;
}

.audio-recorder-timer {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
	color: var(--color-rosa);
}

.audio-recorder-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.audio-recorder-send,
.audio-recorder-cancel {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
  position: relative;
  z-index: 1001; /* Asegurar que los botones estén por encima de otros elementos */
}

.audio-recorder-send {
	background-color: var(--color-rosa);
	color: white;
}

.audio-recorder-send:hover {
	background-color: var(--bg-bocadillo-propio);
	transform: scale(1.05);
}

.audio-recorder-cancel {
	background-color: #f5f5f5;
	color: #666;
}

.audio-recorder-cancel:hover {
	background-color: #e0e0e0;
  transform: scale(1.05);
}

.audio-recorder-visualizer {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	flex: 1;
	margin: 0 10px;
}

.audio-recorder-bar {
	width: 4px;
	height: 20%;
	background-color: var(--color-rosa);
	margin: 0 3px;
	border-radius: 2px;
}

/* Animación pulsante para indicar grabación */
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(235, 28, 116, 0.4);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(235, 28, 116, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(235, 28, 116, 0);
	}
}

.audio-recorder-send {
	animation: pulse 2s infinite;
}

.contenido-modal-chat {
	margin: auto;
	display: block;
	max-width: 90%;
	max-height: 90%;
	object-fit: contain;
}

.cerrar-modal-chat {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	cursor: pointer;
	z-index: 1001;
}

/* Animación de zoom */
.contenido-modal-chat {
	animation-name: zoom;
	animation-duration: 0.3s;
}

@keyframes zoom {
	from {
		transform: scale(0.1);
	}
	to {
		transform: scale(1);
	}
}

/* Estilos para hacer las imágenes en los bocadillos clickeables */
.bocadillo img {
	cursor: pointer;
	transition: opacity 0.3s;
}

.bocadillo img:hover {
	opacity: 0.8;
}

.chat ::placeholder{
	color: #ccc;
	font-weight: 400;
}
.chat ::-webkit-input-placeholder{
	color: #ccc;
	font-weight: 400;
}
.chat .enviar{
	border:0;
	min-width:60px;
}
.chat-body {
	height: calc( 100vh - 375px);
	overflow:hidden;
	overflow-y: auto;
	max-height: 800px;
}
.listado-chats{
	height: calc( 100vh - 75px);
	overflow:scroll;
	min-width: 300px;
}
.info{
	background-color: #616169;
	max-width:280px;
	border-radius: 4px;
	line-height: 1.1;
}
.btn-more{
	border: 1px solid var(--color-rosa);
	color: var(--color-rosa);
	background-color: var(--bg-bocadillo);
}
.imagen-chats{
	min-width:64px;
}
.imagen-chats .estado{
	position:absolute;
	top:0;
	right:0;
}
.infos-chats .nombre{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width:100%;
	font-weight: bold;
	max-width:calc( 100vw - 140px);
}
.infos-chats .badge{
	line-height: .75;
	background-color:var(--color-rosa);
	--bs-badge-border-radius:8px;
	height:16px;
	line-height: 16px;
	--bs-badge-padding-x: 0.35em;
	--bs-badge-padding-y: 0;
	--bs-badge-font-size: 14px;
}
.chats-mensj{
	color:#999999;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display:block;
	max-width:calc( 100vw - 110px);
}
.usuario-chat{
	border-bottom:1px solid #606061;
}
.usuario-chat:first-child{
	border-top:1px solid #606061;
}
.usuario-chat.seleccionado{
	background-color: #232326;
}
#collapse-chat.collapsing.collapse-horizontal,
.listado-chats.collapsing.collapse-horizontal{
		transition: width .15s linear;
}

/* Desbloqueos, Bloqueos y Preguntas*/
.desbloqueo .card-img-top{
	object-fit: cover;
	height:150px;
	width: 150px;
	border-bottom-left-radius: 6px;
	border-top-right-radius: 0px;
}
.desbloqueo .card-text{
	font-size:18px;
}
.desbloqueo .card-text .badge{
	background-color:var(--color-rosa);
	--bs-badge-border-radius:10px;
	padding: 0px 5px;
	font-size:16px;
	line-height:20px;
	height: 20px;
	min-width:20px;
}
.respuesta-existente span{
	color: var(--color-rosa);
	font-weight: bold;
	font-size: 1.25rem;
}
.custom-tab-btn .nav-link {
    transition: border-color 0.5s ease;
    border: none;
    position: relative;
}
.custom-tab-btn .nav-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: transparent;
    transition: background-color 0.5s ease;
}
.custom-tab-btn .nav-link.active::after {
    background-color: var(--color-rosa);
}
.custom-tab-btn .nav-link.active {
    border-color: var(--color-rosa);
}
.custom-tab-btn .border-transparent {
    border-color: transparent;
}
.custom-tab-btn .nav-link:focus, #bloqueos .nav-link:hover {
    text-decoration: none;
    border: none;
}
@media (max-width: 574px){
	.desbloqueo .card-img-top{
		height: 100%;
		width: 100%;
		border-bottom-left-radius: 0px;
		border-top-right-radius: 6px;
	}
}

/* Menú lateral */
.menu-lateral .offcanvas-header{
  background-color: #262626;
}
.menu-lateral .offcanvas-header img{
	border-radius: 50%;
	object-fit: cover;
}
.menu-lateral h3 {
  font-family: Roboto, sans-serif;
  font-size: 20px;
}
.menu-lateral .offcanvas-body::-webkit-scrollbar {
  width: 8px;
}
.menu-lateral .offcanvas-body::-webkit-scrollbar-track {/* Track */
  background: #000; 
}
.menu-lateral .offcanvas-body::-webkit-scrollbar-thumb {/* Handle */
  background: #45454b; 
}
.menu-lateral .offcanvas-body::-webkit-scrollbar-thumb:hover {/* Handle on hover */
  background: #555; 
}
.menu-lateral .offcanvas-body ul li a.nav-link span, .menu-lateral .offcanvas-footer ul li a.nav-link span{
	font-size: 1.1rem;
}

@media (min-width: 575px){
	.logo{
		max-width:100%;
	}
	.hero{
		height:560px;
		justify-content: space-around;
		padding-bottom:0;
		background-position: left center;
		background-size: cover;
	}
	.card-genero{
		margin: initial;
	}
	.hero h1{
		background: transparent;
		filter: none;
		text-shadow:none;
	}
	.usuarios .card-user{
		width:220px;
	}
	.usuarios{
	 gap:16px;
	}
	.card-user .card-title{
		font-size:1.25rem;
	}
	.icono-suscripcion{
		width: 25px;
		height: 25px;
	}
}
@media (min-width: 768px){
	
	.buscar{
		width:auto;
	}
	.listado-chats {
	height: auto;
	overflow:visible;
	}
}
@media (min-width: 992px){
	.coqueteo{
		max-height: 220px;
		overflow-y: auto;
	}
	.chat .enviar{
		min-width:120px;
	}
	.infos-chats .nombre{
		max-width:149px;
	}
	.chats-mensj{
		max-width:179px;
	}
	/* deshabilitar collapsing en chat */
	#collapse-chat.collapsing.collapse-horizontal{
		position: relative;
		width: 50% !important;
		overflow: hidden;
	}
	.listado-chats.collapsing.collapse-horizontal{
	  position: relative;
	  width: unset !important;
	  overflow: hidden;
	}
	#collapse-chat.collapse.collapse-horizontal{
		display: block;
		width: 50% !important;
		visibility: visible;
	}
	.listado-chats.collapse.collapse-horizontal {
	  display: block;
	  width: auto !important;
	  visibility: visible;
	}
	/*  */
	#collapse-chat.collapse:not(.show),
	.listado-chats.collapse:not(.show) {
		display: block;
	}
	#collapse-chat.collapsing.collapse-horizontal{
		transition: none;
	}
}
@media (min-width: 1360px){
	.hero{
		height:90vh;
	}
}
/*Sugerencias de nombres en registro2*/
.username-suggestions-buttons-container{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.username-suggestions-buttons-container button{
    background-color: #262626;
    color: var(--bs-card-color);
    border: 1px solid var(--color-rosa);
    padding: 14px;
    margin: 4px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.suggestion-btn:hover {
    background-color: var(--color-rosa);
    color: --bs-card-color;
}

/*Gestionar-anuncios*/
#gestionar-anuncios .card{
	background-color: var(--bg-tooltip);
}
#gestionar-anuncios .card label{
	color: #FFF;
}
#gestionar-anuncios input::placeholder{
	font-weight: normal;
}
#gestionar-anuncios .card img{
	position: relative;
	bottom: 80px;
}

#gestionar-anuncios .autocomplete-items{
	position: static ;
	color: white;
	border-color: var(--color-border-b);
	border-radius: 4px;
}
#gestionar-anuncios .autocomplete-items div {
    background-color: var(--bg-tooltip);
    color: #fff;
}
#gestionar-anuncios #swal-delete-anuncio .swal2-title{
	color: #545454;
	font-family: "Roboto", sans-serif;
}
#gestionar-anuncios .swal2-icon.swal2-warning{
	color: #f5b225;
    border-color: #f5b225;
}

#gestionar-anuncios .alert-custom{
	background-color: var(--bg-tooltip);
	border: 1px solid var(--color-border-b);
	border-radius: 4px;
	color: white !important;
	font-weight: normal !important;
}

@media (max-width: 475px) {
    #listado .listado-anuncios{
		width: 100%;
		height: 290px;
		display: block;
    }
    #gestionar-anuncios #saveAnuncio {
        margin-bottom: 1.5rem;
    }
	#gestionar-anuncios .alert {
		font-size: 14px;
	}
}

/* Creditos */
@media (min-width:990px){
	#creditos .col-lg-4{
		width: 25.333333%;
	}
}
#creditos h1{
	color: var(--main-color);
}
#creditos .frase {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    text-align: center;
    font-size: 20px;
}
#creditos .frase.active {
    opacity: 1;
}
#creditos .card {
    background-color: rgba(var(--bs-dark-rgb));
    width: 280px;
    height: 305px;
    margin: auto;
    padding: 1rem;
    position: relative;
    border: 1px solid #45454B;
    transition: all 0.3s ease-in-out;
}
#creditos .card:hover {
    background-color: #0d0d0d ;
    border: 1px solid #666666;
    box-shadow: 0px 4px 15px rgba(255, 255, 255, 0.2);
    transform: scale(1.03);
}
#creditos .card-body{
	padding: 5px;
}
#creditos .card img{
	margin: auto;
	width: 5rem;
}
#creditos .precios{
    font-weight: 700;
    margin-bottom: 0;
    font-size: 38px;
    white-space: nowrap;
}
#creditos .cantidad{
    text-transform: uppercase;
    font-size: 20px;
    white-space: nowrap;
}
#creditos .popular {
    background-color: var(--main-color);
    width: 100%;
    text-align: center;
    display: block;
    margin: 0;
    padding: 5px 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
	font-weight: bold;
}
#creditos .btn{
	margin-bottom: 1rem;
}
#creditos .card.second{
    border: 2px solid var(--main-color);
	height: 338px;
}
#creditos .card.second .cantidad{
	margin-top: 2rem;
}
@media (max-width:1200px){
	#creditos .row{
		gap: 3.5rem ;
	}
}
@media (max-width:767px){
	div.row{
		margin-left: auto;
		margin-right: auto;
	}
}

#ver-directo video::-webkit-media-controls-play-button,
#ver-directo video::-webkit-media-controls-current-time-display{
	display: none !important;
}
#ver-directo video::-moz-media-controls-play-button,
#ver-directo video::-moz-media-controls-current-time-display{
  display: none !important;
}

.stream-container {
  display: flex;
  background: #1a1a1a;
  gap: 1px;
}
.stream-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 103px);
}
.stream-ir-listado svg{
	transform: rotate(180deg);
}
.video-section {
  position: relative;
  flex: 1;
  background: #000;
}
.video-section video {
  width: 100%;
  object-fit: scale-down;
  height: calc(100vh - 167px);
}
#ver-directo .video-section video{
	height: calc(100vh - 270px);
	max-height: none;
}
.video-section #toggleVideo, .video-section #toggleChat{
	position: absolute;
	top: 12px;
	right: 12px;
}
.video-section #toggleChatMobile{
	display: none;
	 z-index: 10;
}
.video-section #toggleChatMobile svg{
	-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
	filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}
.streamer-controls {
  padding: 0.75rem;
  background: #2a2a2a;
  display: flex;
  align-items: center;
  /*justify-content: space-between;*/
  gap: 1rem;
}
.streamer-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.streamer-name {
  color: white;
}
.streamer-name span {
  display: block;
  font-weight: bold;
}
.streamer-name .status {
  color: var(--color-estado-neutro);
}
.streamer-name .status.status-connecting{
	color: #f0d000;
}
.streamer-name .status.status-error{
	color: #ed0000;
}
.streamer-name .status.status-connected{
	color: #5BF904;
}
.streamer-btns .broadcast-btn {
  padding: 0.75rem 2rem;
  background: #ff1493;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}
.streamer-btns .broadcast-btn:hover {
  background: #ff0080;
}

/* Chat stream */
#streamChat {
  width: 400px;
  display: flex;
  flex-direction: column;
  background: #2a2a2a;
  height: calc(100vh - 103px);
}
#streamChat .streamChat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}
#streamChat .streamChat-messages .streamChat-message, .floating-chat .streamChat-messages .streamChat-message {
  margin-bottom: 1rem;
}
#streamChat .streamChat-messages .streamChat-message .username, .floating-chat .streamChat-messages .streamChat-message .username {
  font-weight: bold;
  margin-bottom: 0.25rem;
  display: block;
}
#streamChat .streamChat-messages .streamChat-message p, .floating-chat .streamChat-messages .streamChat-message p {
  color: #e0e0e0;
  margin: 0;
  word-wrap: break-word;
}
#streamChat .streamChat-messages .streamChat-message.streamChat-systemMessage{
	font-style: italic;
	font-size: 1.1rem;
	font-weight: bold;
	border: 1px solid var(--color-rosa);
  border-radius: 6px;
  padding: 0.5rem;
}
#streamChat .streamChat-input {
  background: #333;
}
#streamChat .streamChat-input input{
	flex: 1;
	color: #fff;
  background-color: #303034;
  border: 0;
  border-top: 1px solid rgb(118, 118, 118);
}
#streamChat .streamChat-input input::placeholder{
	color: #ccc;
	font-weight: 400;
}
#streamChat .streamChat-input input::-webkit-input-placeholder{
	color: #ccc;
	font-weight: 400;
}
#streamChat .streamChat-input input:focus-visible{
	outline:0;
}
#streamChat .streamChat-input button{
	flex: 0.15;
}
#streamChat .streamChat-input .send-btn {
  border: none;
  color: #ff1493;
  cursor: pointer;
}
.stream-container.mobile-with-chat video{
	height: 20vh !important;
}
.stream-container.mobile-with-chat #streamChat{
	position: absolute;
	top: 35vh;
    height: 65vh;
}
.floating-chat {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0 20px;
}
.floating-chat::before {
  content: '';
  position: absolute;
  top: -50px; /* How far up the gradient extends */
  left: 0;
  right: 0;
  height: 50px; /* Height of the gradient */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
}
.stream-container.mobile-with-chat .floating-chat{
	display: none;
}
@media (max-width: 768px){
	.stream-container {
    flex-direction: column;
  }
  .stream-column video{
  	height: auto;
  	max-height: 450px;
  }
  .video-section #toggleVideo, .video-section #toggleChat{
  	display: none;
  }
  .video-section #toggleChatMobile{
		position: absolute;
		right: 10px;
		bottom: 45px;
		background: none;
		border: none;
		display: block;
	}
  #streamChat {
    width: 100%;
    height: calc(80vh - 103px);
  }
  #streamChat .streamChat-input {
	  position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
	}
	.floating-chat {
    width: 100%;
    left: 0;
    transform: none;
    box-sizing: border-box;
  }
}

@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .stream-container {
    flex-direction: column;
  }
  .stream-column video{
  	height: auto;
  	max-height: 450px;
  }
  .video-section #toggleVideo, .video-section #toggleChat{
  	display: none;
  }
  .video-section #toggleChatMobile{
  	display: block;
		position: absolute;
		right: 10px;
		bottom: 45px;
		background: none;
		border: none;
	}
  #streamChat {
    width: 100%;
    height: calc(80vh - 103px);
  }
  #streamChat .streamChat-input {
	  position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
	}
}

.streamChat-color-red {
  color: #ff5555;
}
.streamChat-color-orange {
  color: #ffaa55;
}
.streamChat-color-yellow {
  color: #ffff55;
}
.streamChat-color-lime {
  color: #aaff55;
}
.streamChat-color-green {
  color: #55ff55;
}
.streamChat-color-aqua {
  color: #55ffff;
}
.streamChat-color-cyan {
  color: #55aaff;
}
.streamChat-color-blue {
  color: #5555ff;
}
.streamChat-color-purple {
  color: #aa55ff;
}
.streamChat-color-magenta {
  color: #ff55ff;
}
.streamChat-color-pink {
  color: #ff55aa;
}
.streamChat-color-coral {
  color: #ff7f7f;
}
.streamChat-color-gold {
  color: #ffd700;
}
.streamChat-color-turquoise {
  color: #40e0d0;
}
.streamChat-color-lavender {
  color: #e6e6fa;
}
.streamChat-color-mint {
  color: #98fb98;
}
.streamChat-color-salmon {
  color: #fa8072;
}
.streamChat-color-skyblue {
  color: #87ceeb;
}
.streamChat-color-orchid {
  color: #da70d6;
}
.streamChat-color-peach {
  color: #ffdab9;
}

/*Checkout*/
#checkout .list-group-item {
    background-color: #121212;
    border: 1px solid #333;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}
#checkout #cart-items p{
	padding: 3px;
}
@media (max-width:500px){
	#checkout #cart-items p{
		font-size: 15px;
	}
	#checkout .precio{
		margin-top: 5px !important;
	}
	#checkout h1{
		margin-bottom: 25px !important;
	}
	#checkout .list-group-item{
		padding: 10px 5px !important;
	}
}
/*Suscripciones*/
#suscripciones li{
	color: #FFF;
}
#suscripciones .list-group-item {
	background-color: #222;
	color: #fff;
	border: 1px solid #444;
	padding: 10px 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
}
#suscripciones .suscripciones-info {
	display: flex;
	gap: 20px;
}
#suscripciones strong{
	color: var(--color-rosa);
}

@media (max-width: 500px){
	#suscripciones .list-group-item{
		display: block;
	}
	#suscripciones .suscripciones-info {
		flex-direction: column;
		gap: 0;
	}
}

#info-proteccion-datos{
	margin-top: 1rem;
}
#info-proteccion-datos .tit-resumen{
	color: #999;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 15px;
}
#info-proteccion-datos .resumen{
	font-size: .7em;
    color: #999;
    margin: 0;
    padding: 0;
}
#info-proteccion-datos .resumen li{
	list-style: none;
    border-top: 1px solid #dddddd;
    padding: 8px 0;
    margin: 0;
}
#info-proteccion-datos .resumen .apartado{
	font-weight: bold;
    display: table-cell;
    width: 140px;
}
#info-proteccion-datos .resumen .contenido{
	display: table-cell;
	font-weight: normal;
}
#contenido-personalizado a.btn{
	font-size: 0.9rem;
}
#contenido-personalizado a.js-modal-rechazar-peticion-contenido-personalizado svg, #contenido-personalizado a.js-modal-cancelar-peticion-contenido-personalizado svg{
	transform: rotate(45deg);
}