body {
	background-color: #050505;
    color: var(--bleached-silk600);
}
.img-logo {
    width: 86px;
    height: 86px;
}
.app-container {
    max-width: 430px; 
    /* max-height: 100vh; */ /* 932px; */
    /* min-height: 560px; */
   /*  min-height: 100vh; */
    width: 100%; 
    overflow-y: hidden;
    overflow-x: hidden;
}
.img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.titulo-medium-xl {
	font-family: var(--inter-medium-xl-font-family);
	font-weight: var(--inter-medium-xl-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-medium-xl-font-size);
	letter-spacing: var(--inter-medium-xl-letter-spacing);
	line-height: var(--inter-medium-xl-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-medium-xl-font-style);
  }
.titulo-medium-lg {
	font-family: var(--inter-medium-lg-font-family);
	font-weight: var(--inter-medium-lg-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-medium-lg-font-size);
	letter-spacing: var(--inter-medium-lg-letter-spacing);
	line-height: var(--inter-medium-lg-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-medium-lg-font-style);
}
.titulo-medium-lg-2 {
	font-family: var(--inter-medium-lg-font-family);
	font-weight: var(--inter-medium-lg-font-weight);
	color: var(--bleached-silk1200);
	font-size: var(--inter-medium-lg-font-size);
	letter-spacing: var(--inter-medium-lg-letter-spacing);
	line-height: var(--inter-medium-lg-line-height);
	font-style: var(--inter-medium-lg-font-style);
}
.titulo-2xl {
	font-family: var(--inter-medium-2xl-font-family);
	font-weight: var(--inter-medium-2xl-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-medium-2xl-font-size);
	letter-spacing: var(--inter-medium-2xl-letter-spacing);
	line-height: var(--inter-medium-2xl-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-medium-2xl-font-style);
}
.subtitulo-lg {
	font-family: var(--inter-regular-lg-font-family);
	font-weight: var(--inter-regular-lg-font-weight);
	color: var(--bleached-silk600);
	font-size: var(--inter-regular-lg-font-size);
	letter-spacing: var(--inter-regular-lg-letter-spacing);
	line-height: var(--inter-regular-lg-line-height);
	font-style: var(--inter-regular-lg-font-style);
}
.subtitulo-md {
	opacity: 0.5;
	font-family: var(--inter-medium-base-font-family);
	font-weight: var(--inter-medium-base-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-medium-base-font-size);
	letter-spacing: var(--inter-medium-base-letter-spacing);
	line-height: var(--inter-medium-base-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-medium-base-font-style);
}
.p-regular {
	align-self: stretch;
	font-family: var(--inter-regular-base-font-family);
	font-weight: var(--inter-regular-base-font-weight);
	color: var(--bleached-silk900);
	font-size: var(--inter-regular-base-font-size);
	letter-spacing: var(--inter-regular-base-letter-spacing);
	line-height: var(--inter-regular-base-line-height);
	font-style: var(--inter-regular-base-font-style);
}
.p-regular-titulo {
	font-family: var(--inter-regular-base-font-family);
	font-weight: var(--inter-regular-base-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-regular-base-font-size);
	letter-spacing: var(--inter-regular-base-letter-spacing);
	line-height: var(--inter-regular-base-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-regular-base-font-style);
}
.subtitulo-md-2 {
	align-self: stretch;
	font-family: var(--inter-medium-base-font-family);
	font-weight: var(--inter-medium-base-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-medium-base-font-size);
	letter-spacing: var(--inter-medium-base-letter-spacing);
	line-height: var(--inter-medium-base-line-height);
	font-style: var(--inter-medium-base-font-style);
}
.btn-primary {
	height: 48px !important;
	padding: 4px 12px !important;
	position: relative;
	background-color: var(--bleached-silk1400) !important;
	--bs-btn-border-color: #fff !important;
	border-radius: 10px !important;
	box-shadow: 0px 0px 0px 4px #ffffff1a, 0px 0px 0px 3px #000000 !important;
    --bs-btn-color: var(--sky-of-magritte1400) !important;
}
.btn-dark {
	height: 48px;
	padding: 4px 12px;
	position: relative;
	background-color: var(--bleached-silk300);
	border-radius: 10px;
	border-color: var(--bleached-silk300);
	--bs-btn-color: #f6f6f6;
	backdrop-filter: blur(9px) brightness(100%);
	-webkit-backdrop-filter: blur(9px) brightness(100%);
}
.btn {
    font-size: unset;
}
.btn-label {
	font-family: var(--inter-semi-bold-base-font-family);
	font-weight: var(--inter-semi-bold-base-font-weight);
	color: var(--sky-of-magritte1400);
	font-size: var(--inter-semi-bold-base-font-size);
	letter-spacing: var(--inter-semi-bold-base-letter-spacing);
	line-height: var(--inter-semi-bold-base-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-semi-bold-base-font-style);
}
.btn-primary:hover {
    background-color: var(--bleached-silk1200) !important;
    border-color: var(--bleached-silk1400) !important;
    color: var(--sky-of-magritte1400) !important;
}

.input-pantera {
	background-color: var(--bleached-silk200) !important;
	border-color: var(--bleached-silk400) !important;
    border-radius: 10px !important;
    color: #fff !important;
}
.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select {
	height: 50px !important;
	min-height: 50px !important;
}
.form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after {
	background-color: transparent; /*** rgb(10, 10, 10); ***/ 
}
.form-floating > label {
	padding: 0.7rem .75rem;
}
.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
	color: var(--bs-body-color-rgb);
}
.form-control:focus {
    border-color: #d3d3d3 !important; 
    box-shadow: 0 0 0 0.25rem rgba(211, 211, 211, 0.25) !important; 
}
.btn-primary:not(:disabled):not(.disabled):active, 
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:focus {
    background-color: var(--bleached-silk1400) !important;
    border-color: var(--bleached-silk1400) !important;
    box-shadow: none;
}
.link-secondary {
	color: #a4a4a4 !important;
}
.btn-link {
	--bs-btn-color: var(--bleached-silk1400);
}
.fa-arrow-left {
	font-size: 18px;
}
.fa-ellipsis-h {
	font-size: 26px;
}
.header-container {
	padding-left: .77rem !important;
	padding-right: 0.6rem !important;
}
.btn-link:hover {
    color: white; 
    text-decoration: none; 
}

.btn-link:hover i {
    color: white;
}
.tab-content {
	min-height: calc(100vh - 140px);
}
.tab-send {
	min-height: calc(100vh - 90px);
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}
.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
	border-color: var(--bs-form-invalid-border-color) !important;
	box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb),.25) !important;
}
select {
	padding-top: 1.35rem !important;
}
.input-pantera option {
    background-color: #1b1b1b; 
    color: white;
}
.form-floating > .form-select:not(:placeholder-shown) {
	padding-bottom: .35rem !important;
}

/** Imagen de confirmación de correo */
.overlap-group {
	position: relative;
	width: 301px;
	height: 220px;
	left: 44px;
	background-image: var(--url-fondo);
	background-size: 100% 100%;
}
.overlap {
	position: absolute;
	width: 102px;
	height: 106px;
	top: 36px;
	left: 106px;
}

.rectangle {
	width: 96px;
	height: 96px;
	top: 10px;
	left: 0;
	border-radius: 21px;
	box-shadow: 0px 3px 6px #00000040;
	border-image: linear-gradient(to bottom, rgb(82.47, 82.47, 82.47), rgb(35.06, 35.06, 35.06)) 1;
	background: linear-gradient(180deg, rgb(25.42, 25.42, 25.42) 0%, rgb(16, 16, 16) 100%);
	position: absolute;
	border: 1px solid;
	border-color: transparent;
}

.group {
	position: absolute;
	width: 76px;
	height: 76px;
	top: 20px;
	left: 10px;
}

.vector {
	position: absolute;
	width: 31px;
	height: 1px;
	top: 0;
	left: 51px;
}

.rectangle-2 {
	width: 42px;
	height: 42px;
	top: 38px;
	left: 26px;
	border-radius: 44px;
	box-shadow: 0px 3px 6px #00000040, inset 0px 0px 6px 4px #00000061;
	border-image: linear-gradient(to bottom, rgb(173.47, 173.47, 173.47), rgb(49.41, 49.41, 49.41) 93.75%) 1;
	background: linear-gradient(180deg, rgb(21.37, 21.37, 21.37) 0%, rgb(54.43, 54.43, 54.43) 100%);
	position: absolute;
	border: 1px solid;
	border-color: transparent;
}

.img {
	position: absolute;
	width: 19px;
	height: 32px;
	top: 43px;
	left: 38px;
}

.ellipse {
	top: 24px;
	left: 38px;
	position: absolute;
	width: 30px;
	height: 30px;
	background-color: #ffffff29;
	border-radius: 15px;
	filter: blur(19px);
}

.ellipse-2 {
	top: 0;
	left: 67px;
	position: absolute;
	width: 30px;
	height: 30px;
	background-color: #ffffff29;
	border-radius: 15px;
	filter: blur(19px);
}

.lock-filled {
	position: absolute;
	width: 28px;
	height: 30px;
	top: 1px;
	left: 74px;
}

.vector-2 {
	position: absolute;
	width: 31px;
	height: 1px;
	top: 186px;
	left: 186px;
}
/** fin imagen de confirmación de correo */

.home-avatar {
	width: 32px;
	height: 32px;
	object-fit: cover;
}
.fa-ellipsis-v {
	font-size: 20px;
}
.texto-2xs {
	opacity: 0.5;
	font-family: var(--inter-medium-2xs-font-family);
	font-weight: var(--inter-medium-2xs-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-medium-2xs-font-size);
	letter-spacing: var(--inter-medium-2xs-letter-spacing);
	line-height: var(--inter-medium-2xs-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-medium-2xs-font-style);
}
.mt-25r {
	margin-top: 2.5rem !important;
}
.mt-2r {
	margin-top: 2rem !important;
}
.titulo-5xl {
	font-family: var(--inter-medium-5xl-font-family);
	font-weight: var(--inter-medium-5xl-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-medium-5xl-font-size);
	letter-spacing: var(--inter-medium-5xl-letter-spacing);
	line-height: var(--inter-medium-5xl-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-medium-5xl-font-style);
}
.currency-badge /* .element-home .frame-11 */ {
	display: inline-flex;
	height: 24px;
	align-items: flex-end;
	gap: 7px;
	padding: 4px 6px;
	position: relative;
	background-color: var(--brilliant-azure1200);
	border-radius: 50px;
}
.currency-badge-flag /* .element-home .misc-icons-flag */ {
	position: relative;
	width: 16px;
	height: 16px;
}
.currency-div /* .element-home .frame-12 */ {
	display: inline-flex;
	align-items: flex-end;
	position: relative;
	flex: 0 0 auto;
	margin-top: -1px;
}
.currency-text /* .element-home .text-wrapper-10 */ {
	position: relative;
	width: fit-content;
	margin-top: -1px;
	font-family: var(--inter-medium-sm-font-family);
	font-weight: var(--inter-medium-sm-font-weight);
	color: var(--brilliant-azure600);
	font-size: var(--inter-medium-sm-font-size);
	letter-spacing: var(--inter-medium-sm-letter-spacing);
	line-height: var(--inter-medium-sm-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-medium-sm-font-style);
}
.btn-circle {
    border-radius: 50%; 
	padding-left: 0.55rem;
  	padding-top: 0.55rem;
    padding-right: 0.5rem;
	padding-bottom: 0.5rem;
	height: 44px;
	width: 44px;
}
.texto-xs {
	font-family: var(--inter-regular-xs-font-family);
	font-weight: var(--inter-regular-xs-font-weight);
	color: var(--bleached-silk600);
	font-size: var(--inter-regular-xs-font-size);
	letter-spacing: var(--inter-regular-xs-letter-spacing);
	line-height: var(--inter-regular-xs-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-regular-xs-font-style);
}

/*** Estilos para el navbar ***/
.bg-custom {
	background-color: var(--sky-of-magritte1400); 
	border-top: 1px solid var(--sky-of-magritte1300); 
}
.navbar .nav-item .nav-link {
	text-align: center;
}
.text-xs {
	font-size: 0.75rem; 
}
.navbar .nav-item .nav-link i {
	display: block;
	font-size: 16px;
}
.active-page {
	color: var(--bleached-silk1400);
	fill: var(--bleached-silk1400) !important;
}
.navbar .nav-item .nav-link,
.navbar .nav-item .nav-link .custom-icon {
	transition: color 200ms, fill 200ms; 
}
.navbar .nav-item .nav-link:hover,
.navbar .nav-item .nav-link:active,
.navbar .nav-item .nav-link:focus {
	color: var(--bleached-silk1000) !important;
	outline: none;
}
.navbar .nav-link:hover .custom-icon,
.navbar .nav-link:active .custom-icon,
.navbar .nav-link:focus .custom-icon {
	fill: var(--bleached-silk1000) !important;
}
.custom-icon {
	height: 16px; 
	width: auto; 
	fill: var(--bleached-silk600);
}
.nav-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/*** Estilos para lista de transacciones ***/
.transacciones-list {
    background-color: transparent;
}
.vista-home {
	height: 30vh; 
	overflow-y: auto;
}
.vista-transacciones {
	height: 70vh; 
	overflow-y: auto;
}
.vista-productos {
	height: 75vh; 
	overflow-y: auto;
}
.vista-destinatarios {
	height: 63vh; 
	overflow-y: auto;
}
.transaccion-item {
    background-color: transparent;
    color: #FFF; /* Ajusta el color según tu tema oscuro */
}
.transaccion-wallet {
	border: 1px solid; 
	background-color: unset !important;
}

.transaccion-item:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Cambia para el efecto hover */
}
.avatar-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--bleached-silk300);
    border-color: var(--bleached-silk400) !important;
}
.avatar-wrapper i {
    font-size: 20px;
    font-weight: 400 !important; 
    color: var(--bleached-silk600);
}
.currency-text {
	font-family: var(--inter-semi-bold-base-font-family);
	font-weight: var(--inter-semi-bold-base-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-semi-bold-base-font-size);
	letter-spacing: var(--inter-semi-bold-base-letter-spacing);
	line-height: var(--inter-semi-bold-base-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-semi-bold-base-font-style);
}
/** Estilos para el input de búsqueda */
.input-icon-wrapper {
	position: relative;
}

.icono-busqueda {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--bleached-silk600); 
	font-size: 1.2rem; 
}

.input-icon-wrapper .input-con-icono {
	padding-left: 40px; 
}

.form-control::placeholder {
	color: var(--bleached-silk600);
	opacity: 1;
}
.text-search {
	font-family: var(--inter-regular-base-font-family);
	font-weight: var(--inter-regular-base-font-weight);
	font-size: var(--inter-regular-base-font-size);
	letter-spacing: var(--inter-regular-base-letter-spacing);
	line-height: var(--inter-regular-base-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-regular-base-font-style);
	padding-top: 9px !important;
  	padding-bottom: 9px !important;
}
/** Estilos para filtros de transacciones */
.filter-selected {
	height: 36px;
	justify-content: center;
	gap: 15px;
	padding: 8px 12px;
	flex: 1;
	flex-grow: 1;
	background-color: var(--bleached-silk400);
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid;
	display: flex;
	align-items: center;
	position: relative;
	border-color: var(--bleached-silk400);
}
.filter-normal {
	display: flex;
	height: 36px;
	align-items: center;
	justify-content: center;
	gap: 15px;
	padding: 8px 12px;
	position: relative;
	flex: 1;
	flex-grow: 1;
	border-radius: 6px;
}
.filter-selected .texto-filter {
	font-family: var(--inter-medium-base-font-family);
	font-weight: var(--inter-medium-base-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-medium-base-font-size);
	letter-spacing: var(--inter-medium-base-letter-spacing);
	line-height: var(--inter-medium-base-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-medium-base-font-style);
}
.filter-normal .texto-filter, 
.subtitulo-transferencia {
	opacity: 0.5;
	font-family: var(--inter-regular-base-font-family);
	font-weight: var(--inter-regular-base-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-regular-base-font-size);
	letter-spacing: var(--inter-regular-base-letter-spacing);
	line-height: var(--inter-regular-base-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-regular-base-font-style);
}
.producto-descripcion {
	opacity: 0.4;
	font-family: var(--inter-regular-base-font-family);
	font-weight: var(--inter-regular-base-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-regular-base-font-size);
	letter-spacing: var(--inter-regular-base-letter-spacing);
	line-height: var(--inter-regular-base-line-height);
	font-style: var(--inter-regular-base-font-style);
}
.transaction-month {
	font-family: var(--inter-medium-base-font-family);
	font-weight: var(--inter-medium-base-font-weight);
	color: #f3f3f3;
	font-size: var(--inter-medium-base-font-size);
	letter-spacing: var(--inter-medium-base-letter-spacing);
	line-height: var(--inter-medium-base-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-medium-base-font-style);
}
.transaction-sum {
	font-family: var(--inter-regular-2xs-font-family);
	font-weight: var(--inter-regular-2xs-font-weight);
	color: #ffffff80;
	font-size: var(--inter-regular-2xs-font-size);
	letter-spacing: var(--inter-regular-2xs-letter-spacing);
	line-height: var(--inter-regular-2xs-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-regular-2xs-font-style);
}
.pago-recibido {
	color: var(--ragweed-800) !important;
}
.label-general {
	color: rgba(255, 255, 255, 0.5);
	/* opacity: 0.5; */
	font-family: var(--inter-regular-sm-font-family);
	font-weight: var(--inter-regular-sm-font-weight);
	/* color: var(--bleached-silk1400); */
	font-size: var(--inter-regular-sm-font-size);
	letter-spacing: var(--inter-regular-sm-letter-spacing);
	line-height: var(--inter-regular-sm-line-height);
	font-style: var(--inter-regular-sm-font-style);
}
.label-general strong {
	color: #ddd;
	opacity: 1; /* Asegúrate de que la opacidad de los textos en <strong> sea 1 */
}
.label-general-2 {
	font-family: var(--inter-regular-sm-font-family);
	font-weight: var(--inter-regular-sm-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-regular-sm-font-size);
	letter-spacing: var(--inter-regular-sm-letter-spacing);
	line-height: var(--inter-regular-sm-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-regular-sm-font-style);
}
.p-subtitulo  {
	font-family: var(--inter-regular-2xs-font-family);
	font-weight: var(--inter-regular-2xs-font-weight);
	color: var(--bleached-silk600);
	font-size: var(--inter-regular-2xs-font-size);
	letter-spacing: var(--inter-regular-2xs-letter-spacing);
	line-height: var(--inter-regular-2xs-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-regular-2xs-font-style);
  }

  .boton-retiro {
	gap: 12px;
	display: flex;
	/* width: 392px; */
	height: 50px;
	align-items: center;
	padding: 4px 12px;
	position: relative;
	margin-bottom: -1px;
	margin-left: -1px;
	margin-right: -1px;
	background-color: var(--bleached-silk200);
	border-radius: 10px;
	border: 1px solid;
	border-color: var(--bleached-silk400);
	backdrop-filter: blur(9px) brightness(100%);
	-webkit-backdrop-filter: blur(9px) brightness(100%);
	cursor: pointer;
  }
  
  .boton-retiro:hover {
	background-color: var(--bleached-silk300);
  }
  
  .boton-retiro-active, .boton-retiro-active:hover {
	background-color: var(--bleached-silk500);
  }
  
  .icono-retiro {
	position: relative;
	width: 18px;
	height: 18px;
  }
  
  .retiro-detalles {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	position: relative;
	flex: 1;
	flex-grow: 1;
}
.currency-primary {
	position: relative;
	width: fit-content;
	margin-top: -1px;
	font-family: "Inter", Helvetica;
	font-weight: 400;
	color: var(--brilliant-azure600);
	font-size: 14px;
	letter-spacing: 0;
	line-height: normal;
  }
  
  .currency-space {
	  font-family: "Inter", Helvetica;
	  font-weight: 400;
	  color: #66b5ff;
	  font-size: 14px;
	  letter-spacing: 0;
  }
  .span-currency {
	font-weight: 500;
  }
  .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.dolar-prefix {
    position: absolute;
    left: calc(50% - 13px); /* Comenzar cerca del centro */
    transform: translateX(-50%); /* Centrar el símbolo respecto a su posición */
    top: 37px;
    transform: translateY(-50%);
    font-family: var(--inter-medium-2xl-font-family);
	font-weight: var(--inter-medium-2xl-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-medium-2xl-font-size);
	letter-spacing: var(--inter-medium-2xl-letter-spacing);
	line-height: var(--inter-medium-2xl-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-medium-2xl-font-style);
    pointer-events: none; /* Asegura que el prefijo no interfiera con el input */
}

.input-retiro {
    font-family: var(--inter-medium-6xl-font-family) !important;
    font-weight: var(--inter-medium-6xl-font-weight) !important;
    color: var(--bleached-silk1400) !important;
    font-size: var(--inter-medium-6xl-font-size) !important;
    letter-spacing: var(--inter-medium-6xl-letter-spacing) !important;
    line-height: var(--inter-medium-6xl-line-height) !important;
    white-space: nowrap !important;
    font-style: var(--inter-medium-6xl-font-style) !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    border: none !important;
    padding-left: 22px !important;
}
.input-retiro:focus {
    box-shadow: none !important;
}

/** Estilos de Offcanvas */
.pantera-bg-dark {
	color: #fff !important;
	background-color: var(--sky-of-magritte1300);
	border-radius: 16px 16px 10px 0px;
}
.offcanvas-backdrop {
	background-color: #0000004c !important;
	backdrop-filter: blur(7px) brightness(100%) !important;
	-webkit-backdrop-filter: blur(7px) brightness(100%) !important;
}
.offcanvas-backdrop.show {
	opacity: 1;
}
.offcanvas.offcanvas-bottom {
	right: unset !important;
	left: unset !important;
	height: 44vh !important;
	max-height: 100% !important;
	border-top: var(--bs-offcanvas-border-width) solid var(--sky-of-magritte1300) !important;
	transform: translateY(100%);
	max-width: 430px !important;
	width: 100%;
}
.offcanvas-header {
	padding-bottom: 0 !important;
}
.notify-success {
	font-family: "Inter", Helvetica;
	font-weight: 400;
	color: #ffffff;
	font-size: 20px;
	letter-spacing: 0;
}
.check-container {
	position: relative;
	height: 48px;
	border-radius: 24px;
}
.check-contained {
	position: absolute;
	width: 28px;
	height: 28px;
	top: 10px;
	left: 10px;
}
.circulo-check {
	position: absolute;
	width: 48px;
	height: 48px;
	top: 0;
	left: 0;
	border-radius: 24px;
	box-shadow: inset 0px 2px 4px #ffffff;
	background: linear-gradient(180deg, rgb(109, 246, 147) 0%, rgba(109, 246, 147, 0) 100%);
}
.user-avatar {
	position: relative;
	width: 38px;
	height: 38px;
	object-fit: cover;
	border-radius: 50%;
}
.avatar-usuario {
	position: relative;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 50%;
}
.usuario-con-avatar {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	position: relative;
	flex: 0 0 auto;
}
.mt-18 {
	margin-top: 1.8rem !important;
}
.logo-opcion {
	position: relative;
	width: 64.25px;
	height: 66.5px;
	margin-top: -22.25px;
	margin-bottom: -22.25px;
	margin-left: -20px;
}
.avatar-personal {
    position: relative;
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
}
.badge-user-status {
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 2px;
  padding: 0px 9px 0px 6px;
  position: relative;
  background-color: #53eaff26;
  border-radius: 50px;
  border: 1px solid;
  border-color: #53eaff66;
}
.lightning-fileld {
  position: relative;
  width: 18px;
  height: 18px;
}
.text-user-status {
  position: relative;
  width: fit-content;
  background: linear-gradient(180deg, rgb(83, 234, 255) 0%, rgb(83, 234, 255) 52.08%, rgb(83, 234, 255) 66.67%);
  -webkit-background-clip: text !important;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  font-family: var(--inter-medium-2xs-font-family);
  font-weight: var(--inter-medium-2xs-font-weight);
  color: transparent;
  font-size: var(--inter-medium-2xs-font-size);
  letter-spacing: var(--inter-medium-2xs-letter-spacing);
  line-height: var(--inter-medium-2xs-line-height);
  /* white-space: nowrap; */
  font-style: var(--inter-medium-2xs-font-style);
}
/** Estilo para cards de ofertas */
.div-wrapper {
	display: inline-flex;
	height: 26px;
	align-items: center;
	gap: 10px;
	padding: 2px 7px;
	position: relative;
	flex: 0 0 auto;
	margin-top: -1px;
	margin-bottom: -1px;
	margin-right: -1px;
	background-color: var(--brilliant-azure1200);
	border-radius: 4px;
	border: 1px dashed;
	border-color: var(--brilliant-azure1100);
}
.text-offer {
	color: var(--brilliant-azure700);
	font-size: var(--inter-regular-sm-font-size);
	line-height: var(--inter-regular-sm-line-height);
	position: relative;
	width: fit-content;
	font-family: var(--inter-regular-sm-font-family);
	font-weight: var(--inter-regular-sm-font-weight);
	letter-spacing: var(--inter-regular-sm-letter-spacing);
	/* white-space: nowrap; */
	font-style: var(--inter-regular-sm-font-style);
}
.texto-xs-700 {
	position: relative;
	align-self: stretch;
	font-family: var(--inter-regular-xs-font-family);
	font-weight: var(--inter-regular-xs-font-weight);
	color: var(--bleached-silk700);
	font-size: var(--inter-regular-xs-font-size);
	letter-spacing: var(--inter-regular-xs-letter-spacing);
	line-height: var(--inter-regular-xs-line-height);
	font-style: var(--inter-regular-xs-font-style);
}
.texto-xs-link {
	position: relative;
	width: fit-content;
	font-family: var(--inter-regular-xs-font-family);
	font-weight: var(--inter-regular-xs-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-regular-xs-font-size);
	letter-spacing: var(--inter-regular-xs-letter-spacing);
	line-height: var(--inter-regular-xs-line-height);
	/* white-space: nowrap; */
	font-style: var(--inter-regular-xs-font-style);
}
.card-oferta {
	width: 280px; 
	height: 150px; 
	background-color: #ffffff08; 
	border-radius: 10px; 
	overflow: hidden;
}
.swiper-offers {
	width: 100%;
	height: 160px;
}
.swiper-utilities {
	width: 100%;
	height: 120px;
}
.swiper-enterteinment {
	width: 100%;
	height: 280px;
}
.texto-xs-card {
	position: relative;
	align-self: stretch;
	font-family: var(--inter-regular-xs-font-family);
	font-weight: var(--inter-regular-xs-font-weight);
	color: var(--bleached-silk800);
	font-size: var(--inter-regular-xs-font-size);
	letter-spacing: var(--inter-regular-xs-letter-spacing);
	line-height: var(--inter-regular-xs-line-height);
	font-style: var(--inter-regular-xs-font-style);
}

/** css para cards */
.credit-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	padding: 1px;
	background: linear-gradient(to right, #aa9668, #89a869, #ae3838);
	z-index: 0;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
.credit-card {
	width: 290px;
	height: 182px;
	border-radius: 12px;
	background: linear-gradient(180deg, rgb(41, 41, 41) 0%, rgb(41, 41, 41) 100%);
	color: #fff; /* Color del texto */
	font-size: 18px; /* Tamaño del texto */
	position: relative;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para dar efecto elevado */
	overflow: hidden; /* Asegura que el background no exceda los bordes redondeados */
}

.pantera-logo {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 22px !important; /* Ajusta según el tamaño deseado */
	height: auto !important;
}

.card-franchise-logo {
	position: absolute;
	top: 10px;
	right: 10px; /* Alineado a la derecha */
	width: 50px !important; 
	height: auto !important;
	z-index: 2; /* Asegura que el logo esté sobre la imagen de fondo */
}

.card-background {
	position: absolute;
	top: 0;
	right: 0;
	width: 55.5% !important; /* Mantenemos el ancho que proporcionaste */
	height: auto !important; /* Mantenemos el height auto como en tu actualización */
	object-fit: cover; 
	z-index: 1; /* Asegura que la imagen de fondo esté detrás del contenido */
}

.card-info {
	margin-top: 60px; /* Ajusta según necesidades */
}

.card-number {
	font-size: 1.2rem; /* Tamaño del número de la tarjeta */
	letter-spacing: 2px; /* Espaciado de los caracteres */
	margin-bottom: 30px; /* Espacio entre el número y el footer */
}

.credit-card .card-footer {
	font-size: 1rem; /* Tamaño del texto en el footer */
	background-color: #313131; /* Color de fondo para el footer */
	width: 100%; /* Asegura que el footer se extienda a lo ancho de toda la tarjeta */
	padding: 10px 12px 14px 12px;
	position: absolute; /* Posiciona el footer en la parte inferior de la tarjeta */
	bottom: 0; /* Alinea el footer al fondo de la tarjeta */
}

.img-product {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 130px;
    object-fit: cover;
}
.titulo-regular-lg {
    font-family: var(--inter-regular-lg-font-family);
    font-weight: var(--inter-regular-lg-font-weight);
    color: var(--bleached-silk1400);
    font-size: var(--inter-regular-lg-font-size);
    letter-spacing: var(--inter-regular-lg-letter-spacing);
    line-height: var(--inter-regular-lg-line-height);
    white-space: nowrap;
    font-style: var(--inter-regular-lg-font-style);
}
.texto-xs-product {
    opacity: 0.5;
    font-family: var(--inter-regular-xs-font-family);
    font-weight: var(--inter-regular-xs-font-weight);
    color: var(--bleached-silk1400);
    font-size: var(--inter-regular-xs-font-size);
    letter-spacing: var(--inter-regular-xs-letter-spacing);
    line-height: var(--inter-regular-xs-line-height);
    white-space: nowrap;
    font-style: var(--inter-regular-xs-font-style);
}
.titulo-regular-xl {
	font-family: var(--inter-regular-xl-font-family);
	font-weight: var(--inter-regular-xl-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-regular-xl-font-size);
	letter-spacing: var(--inter-regular-xl-letter-spacing);
	line-height: var(--inter-regular-xl-line-height);
	white-space: nowrap;
	font-style: var(--inter-regular-xl-font-style);
}
.titulo-incluye {
	opacity: 0.4;
	font-family: var(--inter-medium-base-font-family);
	font-weight: var(--inter-medium-base-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-medium-base-font-size);
	letter-spacing: var(--inter-medium-base-letter-spacing);
	line-height: var(--inter-medium-base-line-height);
	font-style: var(--inter-medium-base-font-style);
}

/* Estilos para el input Checkbox tipo switch */
.form-check {
	position: relative;
	display: block;
	/* margin-bottom: 0.75rem; */
  }
  
  .form-check-toggle {
	position: relative;
	padding-left: 0;
	line-height: 30px;
  }
  .form-check-toggle input {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 0%;
	margin: 0;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
  }
  .form-check-toggle input + span {
	cursor: pointer;
	user-select: none;
	height: 30px;
	margin-left: 55px;
	display: block;
  }
  .form-check-toggle input + span:before {
	content: "";
	position: absolute;
	left: 0;
	display: inline-block;
	height: 30px;
	width: 54px;
	background: var(--sky-of-magritte1100);
	transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out;
	border-radius: 15px;
  }
.form-check-toggle input + span:after {
	width: 24px;
	height: 24px;
	margin-top: 3px;
	margin-left: 3px;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	background: var(--sky-of-magritte900);
	transition: margin-left 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	text-align: center;
	font-weight: bold;
	content: "";
	box-shadow: 0px 4px 4px -1px #0000002e;
}
.form-check-toggle input:checked + span:after {
	content: "";
	margin-left: 28px;
	box-shadow: none;
	background: var(--bleached-silk1400);
}
.form-check-toggle input:checked + span:before {
	background: linear-gradient(180deg, rgb(83, 234, 255) 0%, rgb(65.73, 199.08, 217.62) 100%);
	border-color: transparent;
	transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.community-title {
	font-family: "Inter", Helvetica;
	font-weight: 500;
	color: #ffffff;
	font-size: 17px;
	letter-spacing: 0;
	line-height: normal;
	/* white-space: nowrap; */
}
.community-subtitle {
	font-family: "Inter", Helvetica;
	font-weight: 500;
	color: var(--sky-of-magritte800);
	font-size: 17px;
	letter-spacing: 0;
	line-height: normal;
}
.badge-tipo-comunidad {
	height: 24px;
	align-items: center;
	gap: 2px;
	padding: 0px 9px 0px 6px;
	background-color: #ffffff1a;
	border-radius: 50px;
}
.text-tipo-comunidad {
	position: relative;
	width: fit-content;
	font-family: "Inter", Helvetica;
	font-weight: 500;
	color: #85878c;
	font-size: 12px;
	letter-spacing: 0;
	line-height: normal;
}
.miembros-comunidad {
	font-family: "Inter", Helvetica;
	font-weight: 400;
	color: var(--sky-of-magritte800);
	font-size: 14px;
	letter-spacing: 0;
	line-height: normal;
	white-space: nowrap;
}
.community-description {
	align-self: stretch;
	opacity: 0.4;
	font-family: "Inter", Helvetica;
	font-weight: 400;
	color: var(--sky-of-magritte100);
	font-size: 14px;
	letter-spacing: 0;
	line-height: normal;
}
.community-card {
	width: 375px;
	background-color: #ffffff08;
	border-radius: 10px;
	overflow: hidden; 
}

.community-card-img {
	width: 340px;
	height: 132px;
	display: block;
	margin: 0 auto;
	border-radius: 10px;
}

.community-card-body {
	padding: 15px; 
}

.community-card-title {
	color: #ffffff;
	font-size: 17px;
	margin-bottom: 0; 
}
/* Card de subir foto de comunidad */
.descripcion-card-subir {
    font-family: "SF Pro-Regular", Helvetica;
    font-weight: 400;
    color: #717171;
    font-size: 12px;
    letter-spacing: 0.12px;
    line-height: 13.8px;
}
.titulo-card-subir {
    font-family: "Inter", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 15px;
    letter-spacing: 0;
    line-height: normal;
}
.upload-card {
    background-color: #ffffff05;
    border-radius: 10px;
    width: 100%;
}
.upload-card .upload-btn {
    border: 1px solid #ffffff1a;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
}
.upload-card .left-content {
    display: flex;
    align-items: center;
}
.upload-card .contenedor-camara {
    flex-shrink: 0; /* Evita que el contenedor de la cámara cambie de tamaño */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 44px;
    height: 44px;
    background-color: #53eaff1a;
    border-radius: 50%;
    overflow: hidden;
}
.upload-card .avatar {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 12px;
    left: 12px;
}
.upload-card .text-content {
    flex-grow: 1;
    min-width: 0; /* Evita que el texto expanda el contenedor más allá de los límites de la tarjeta */
    margin-right: 2em; /* Añade un margen entre el texto y el botón, ajusta según sea necesario */
}


.contenedor-opciones .tipo-comunidad-selected,
.contenedor-opciones .tipo-comunidad {
	cursor: pointer;
}
.tipo-comunidad-selected {
	display: flex;
	height: 36px;
	align-items: center;
	justify-content: center;
	gap: 15px;
	padding: 8px 12px;
	position: relative;
	flex: 1;
	flex-grow: 1;
	background-color: #ffffff1a;
	border-radius: 8px;
	overflow: hidden;
}
.texto-comunidad {
	position: relative;
	width: fit-content;
	opacity: 0.5;
	font-family: "Inter", Helvetica;
	font-weight: 400;
	color: #ffffff;
	font-size: 15px;
	letter-spacing: 0;
	line-height: normal;
	white-space: nowrap;
}
.tipo-comunidad {
	display: flex;
	height: 36px;
	align-items: center;
	justify-content: center;
	gap: 15px;
	padding: 8px 12px;
	position: relative;
	flex: 1;
	flex-grow: 1;
	border-radius: 6px;
}
.contenedor-opciones {
	align-items: center;
	gap: 8px;
	flex: 1;
	flex-grow: 1;
	border-radius: 10px;
	display: flex;
	position: relative;
}
.texto-comunidad-selected {
	position: relative;
	width: fit-content;
	font-family: "Inter", Helvetica;
	font-weight: 500;
	color: #ffffff;
	font-size: 15px;
	letter-spacing: 0;
	line-height: normal;
	white-space: nowrap;
}

.titulo-crear {
	font-weight: 500;
	color: #ffffff;
	font-size: 28px;
	font-family: "Inter", Helvetica;
	letter-spacing: 0;
	line-height: normal;
}
.texto-descriptivo {
	align-self: stretch;
	opacity: 0.3;
	font-family: "Inter", Helvetica;
	font-weight: 400;
	color: #ffffff;
	font-size: 17px;
	letter-spacing: 0;
	line-height: normal;
}
.flex-opciones {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px;
	position: relative;
	align-self: stretch;
	width: 100%;
	flex: 0 0 auto;
	background-color: #ffffff0d;
	border-radius: 8px;
}
.timeline {
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0;
  }
  
  .timeline:before {
	content: '';
	position: absolute;
	top: 30px; /* Inicio después del primer icono */
	bottom: 30px; /* Final antes del último icono */
	left: 10px; /* Centrado con respecto a los iconos */
	width: 2px;
	background: #161616;
  }
  
  .timeline-item {
	position: relative;
	padding: 6px 0;
  }
  
  .timeline-icon {
	position: absolute;
	left: 10px; /* Alineación exacta con la línea central */
	transform: translateX(-50%);
	background: #050505;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	/* padding: 9px; */
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #161616;
	top: 11px; /* Ajuste para alinear con el inicio de la línea */
  }
  
  .timeline-content {
	padding-left: 30px; /* Asegura suficiente espacio para el texto */
	padding-top: 6px;
  }
  .timeline-text {
	  font-family: "Inter", Helvetica;
	  font-weight: 400;
	  color: #ffffff;
	  font-size: 15px;
	  letter-spacing: 0;
	  line-height: normal;
  }
  .timeline-date {
	  font-family: "Inter", Helvetica;
	  font-weight: 400;
	  color: #6c6c6c;
	  font-size: 13px;
	  letter-spacing: 0;
	  line-height: normal;
  }
  .list-unstyled .avatar {
	width: 32px;
	height: 32px;
	background-color: transparent; /* Avatar transparente */
	border-radius: 50%; /* Hace el avatar circular */
	border: 1px solid var(--bleached-silk300); /* Borde blanco para el avatar */
	color: #fff; /* Color de texto para las iniciales */
	font-size: 13px; /* Ajusta el tamaño de las iniciales dentro del avatar */
	background-color: var(--bleached-silk300);
  }
  .list-unstyled .texto-monto {
	  font-family: "Inter", Helvetica;
	  font-weight: 500;
	  color: #6df693;
	  font-size: 15px;
	  letter-spacing: 0;
	  line-height: normal;
	  white-space: nowrap;
  }

.header-wrapper {
	position: relative; /* Este contenedor será la referencia para posicionar el avatar */
	margin-bottom: 50px; /* Espacio para el avatar que sobresaldrá */
}
.avatar-community-icon {
	position: absolute;
	width: 100px; /* Tamaño del avatar */
	height: 100px;
	bottom: 0; /* Alinea el borde inferior del avatar con el borde inferior del header */
	left: 20px; /* Ajusta esta posición como necesites */
	background-color: #1e1e1e; /* #ffffff; */ /* O cualquier color de fondo que desees */
	border: 4px solid black; /* Borde del avatar */
	border-radius: 50%; /* Hace que el avatar sea un círculo */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2; /* Asegúrate que el z-index sea suficiente para que se muestre encima del fondo */
	transform: translateY(50%); /* Desplaza hacia abajo la mitad del avatar para que sobresalga */
	font-size: 2rem; /* Tamaño del icono de la cámara */
	color: rgb(100, 98, 98); /* Color del icono */
}

.card-text-left {
	font-family: "Inter", Helvetica;
	font-weight: 500;
	color: #ffffff;
	font-size: 16px;
	letter-spacing: 0;
	line-height: normal;
}
.card-text-right {
	font-family: "Inter", Helvetica;
	font-weight: 500;
	color: #404040;
	font-size: 13px;
	letter-spacing: 0;
	line-height: normal;
}
.boton-baja {
	height: 36px;
	position: relative;
	border-radius: 8px;
	border: 1px solid;
	border-color: #ffffff1a;
	padding-bottom: 8px;
}
.boton-baja span {
	font-family: "Inter", Helvetica;
	font-weight: 500;
	color: #ffffff;
	font-size: 13px;
	letter-spacing: 0;
	line-height: normal;
}
.texto-resumen {
	font-family: "Inter", Helvetica;
	font-weight: 400;
	color: #ffffff;
	font-size: 14px;
	letter-spacing: 0;
	line-height: normal;
	white-space: nowrap;
}
.texto-resalte {
	font-family: "Inter", Helvetica;
	font-weight: 400;
	color: #dd804c;
	font-size: 14px;
	letter-spacing: 0;
	line-height: normal;
	white-space: nowrap;
}
.descripcion-card {
	font-family: "Inter", Helvetica;
	font-weight: 400;
	color: #ffffff;
	font-size: 17px;
	letter-spacing: 0;
	line-height: 17px;
	text-align: left !important;
	height: 34px;
	overflow: hidden;
}
.icono-comunidad {
	width: 24px;
	height: 24px;
}
/* Eliminamos backdrop de Swal2 */
div:where(.swal2-container).swal2-backdrop-show, div:where(.swal2-container).swal2-noanimation {
	background: unset !important;
}
.croppie-card {
	cursor: pointer;
	width: 390px;
	height: 240px;
	background-color: var(--bleached-silk200);
	border-radius: 10px;
	border: 1px solid var(--bleached-silk400);
}
.cr-slider::-moz-range-track {
	background: rgb(62, 62, 62);
}
.input-icons {
	position: absolute;
	top: 50%;
	right: 10px; /* Ajusta según necesites */
	transform: translateY(-50%);
	display: flex;
	gap: 10px; /* Espacio entre iconos */
}
.input-icons i {
	cursor: pointer;
	color: var(--bleached-silk400); /* Ajusta el color según tu paleta */
	font-size: 20px;
}
#offer-discount {
	padding-right: 90px;
	padding-bottom: 20px;
}
.resalta-icono {
	color: #FDFDFD !important;
}
#preview-croppie {
	width: 390px;
	height: 240px;
	display: block;
	border-radius: 10px;
	border: 1px solid var(--bleached-silk400);
}
.croppie-container .cr-viewport, .croppie-container .cr-resizer {
	border: 1px solid var(--bleached-silk400);
}
.offer-card {
	/* width: 390px; */
	/* height: 510px; */
	max-width: 390px;
	background-color: #121212;
	border-radius: 12px;
	border: 1px solid;
	border-color: var(--sky-of-magritte1200); 
}

.offer-card .card-img-top {
	width: 100%;
	height: 240px; 
	object-fit: cover; 
	border-radius: 12px;
}

.offer-card .card-footer {
	background: inherit; 
}
.pub-title {
	align-self: stretch;
	font-family: "Inter", Helvetica;
	font-weight: 600;
	color: var(--sky-of-magritte100);
	font-size: 16px;
	letter-spacing: 0;
	line-height: normal;
}
.pub-owner {
	align-self: stretch;
	font-family: "Inter", Helvetica;
	color: var(--sky-of-magritte800);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0;
	line-height: normal;
}
.badge-descuento {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px 8px 3px 4px;
	position: relative;
	flex: 0 0 auto;
	background-color: #6df6931a;
	border-radius: 36px;
}
.text-descuento {
	position: relative;
	width: fit-content;
	margin-top: -1px;
	font-family: "Inter", Helvetica;
	font-weight: 500;
	color: #6df693;
	font-size: 16px; /* 12px; */
	letter-spacing: 0;
	line-height: normal;
}
.frame-monto {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	padding: 2px 0px 0px;
	position: relative;
	flex: 0 0 auto;
}
.text-pvp {
	margin-top: -1px;
	font-family: "Inter", Helvetica;
	font-weight: 500;
	color: var(--sky-of-magritte100);
	font-size: 16px;
	letter-spacing: 0;
	line-height: normal;
	white-space: nowrap;
}
.text-pvp-viejo {
   font-family: "Inter", Helvetica;
	font-weight: 500;
	color: var(--sky-of-magritte1000);
	font-size: 16px;
	letter-spacing: 0;
	line-height: normal;
	text-decoration: line-through;
	white-space: nowrap;
}
.propietario {
  font-family: "Inter", Helvetica;
	font-weight: 400;
	color: var(--sky-of-magritte800);
	font-size: 14px;
	letter-spacing: 0;
	line-height: normal;
}
.logo-propietario {
	width: 24px; /* 16px; */
	height: 24px; /* 16px; */
	border-radius: 50%;
}
.mt-075 {
	margin-top: 0.75rem !important;
}
.text-info {
	color: #53eaff;
}
.text-secondary {
	color: var(--sky-of-magritte800);
}
.pub-stars {
	display: flex !important;
	gap: 3px;
}
.pub-stars .fas {
	font-size: 12px;
}
.element {
	font-family: "Inter", Helvetica;
	font-weight: 400;
	color: transparent;
	font-size: 14px;
	letter-spacing: 0;
	line-height: normal;
}
.progress {
	background-color: #1b2a1f;
}
.progress-bar {
	background-color: #6df693;
}
.resumen-publicacion {
	font-family: "Inter", Helvetica;
	font-weight: 500;
	color: #fdfdfd;
	font-size: 14px;
	letter-spacing: 0;
	line-height: normal;
}
.wrapper-tiempo {
	border-top-width: 1px;
	border-top-style: solid;
	border-color: var(--sky-of-magritte1200);
	/* width: 390px; */
	width: calc(100% + 2rem) !important; /* le sumamos los 2 rem de padding */
	left: -17px;
	position: relative;
}
.offer-card .card-footer {
	border-top: 1px solid var(--sky-of-magritte1200) !important;
}

.texto-tiempo {
	font-family: var(--inter-medium-base-font-family);
	font-weight: var(--inter-medium-base-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-medium-base-font-size);
	letter-spacing: var(--inter-medium-base-letter-spacing);
	line-height: var(--inter-medium-base-line-height);
	white-space: nowrap;
	font-style: var(--inter-medium-base-font-style);
}
.tiempo-title {
	opacity: 0.5;
	font-family: var(--inter-regular-xs-font-family);
	font-weight: var(--inter-regular-xs-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-regular-xs-font-size);
	text-align: center;
	letter-spacing: var(--inter-regular-xs-letter-spacing);
	line-height: var(--inter-regular-xs-line-height);
	white-space: nowrap;
	font-style: var(--inter-regular-xs-font-style);
}
.tiempo-puntos {
	font-family: var(--inter-medium-lg-font-family);
	font-weight: var(--inter-medium-lg-font-weight);
	color: var(--bleached-silk1400);
	font-size: var(--inter-medium-lg-font-size);
	letter-spacing: var(--inter-medium-lg-letter-spacing);
	line-height: var(--inter-medium-lg-line-height);
	white-space: nowrap;
	font-style: var(--inter-medium-lg-font-style);
}
.contenedor-widgets {
	font-family: "Inter", Helvetica;
	align-items: center;
	border-radius: 10px;
	display: flex;
	height: 64px; 
	border-radius: 12px;
	width: 100%;
}
.contenedor-widgets .col:not(:first-child)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 40px;
	width: 1px;
	background-color: #2b2a2a;
}
.category-card {
	/* width: 189px; */
	height: 120px;
	background-color: #1D1D1D;
	border-radius: 15px;
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
	padding: 10px; /* Ajusta el padding interno según necesites */
	color: #FFF; /* Color general del texto */
	font-family: Inter, Helvetica; /* Asegúrate de tener la fuente 'Inter' cargada en tu proyecto */
}

.category-card .card-header, 
.category-card .card-footer {
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
}
.category-card .card-footer {
	opacity: 0.5; /* Opacidad del texto del pie */
}

.gradient-border-button {
	position: relative;
	display: inline-block; /* Necesario para dimensionamiento y alineación */
	padding: 10px 20px; /* Espacio interno alrededor del texto */
	color: white; /* Color del texto */
	text-decoration: none; /* Elimina el subrayado del enlace */
	background: transparent; /* Fondo transparente */
	border: none; /* No border visible directamente en el enlace */
	cursor: pointer;
	font-size: 13px;
	font-family: var(--inter-regular-sm-font-family);
}

.gradient-border-button::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1; /* Sitúa el gradiente detrás del contenido del enlace */
	border-radius: 8px; /* Borde redondeado */
	padding: 1px; /* Espacio para el borde */
	background: linear-gradient(to bottom, rgb(222, 86, 101), rgb(220, 100, 178) 42.66%, rgb(161, 89, 195) 77.87%, rgb(83, 103, 208) 100%);
	-webkit-mask: 
		linear-gradient(#fff 0 0) content-box, 
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
}

.gradient-border-button:hover::before {
	opacity: 0.8; /* Cambia la opacidad al pasar el ratón por encima para un efecto interactivo */
}

/* Estilos para chat */
.chat-container {
	max-height: calc(60vh + 4px) /* 150px */;
	height: calc(60vh + 4px);
	overflow-y: auto;
	padding: 5px;
}

.chat-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.chat-message {
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
	padding: 5px;
	max-width: 70%; /* Ajusta el máximo ancho de cada mensaje */
}

.my-message {
	align-items: flex-end; /* Alinea los mensajes propios a la derecha */
	margin-left: 30%; /* Empuja los mensajes propios hacia la derecha */
	background-color: #53EAFF; /* #DCF8C6; */
	border-radius: 15px 15px 0 15px; /* Bordes redondeados excepto en la esquina inferior derecha */
	padding: 10px;
	color: #000; /* Color de texto */
}

.other-message {
	align-items: flex-start; /* Alinea los mensajes de otros a la izquierda */
	background-color: #ffffff1a; /* #FFFFFF; */
	color: #fff;
	border-radius: 15px 15px 15px 0; /* Bordes redondeados excepto en la esquina inferior izquierda */
	padding: 10px;
	color: #000; /* Color de texto */
}

.other-message .chat-message-date {
	font-size: 0.75em;
	color: #999;
	margin-bottom: 5px; /* Espacio entre la fecha y el texto del mensaje */
}

.my-message .chat-message-date {
	font-size: 0.75em;
	color:  #625d5d;
	margin-bottom: 5px; /* Espacio entre la fecha y el texto del mensaje */
}



.other-message .chat-message-text {
	word-wrap: break-word; /* Asegura que los mensajes largos no desborden el contenedor */
	color: #fff;
}

.my-message .chat-message-text {
	word-wrap: break-word;
	color: #000;
}

.chat-form {
	display: flex;
	padding: 10px;
	background-color: #121212; /* Fondo oscuro para el formulario */
}

.chat-input {
	flex-grow: 1;
	background-color: #000 !important;
	color: #fff !important;
	border: 1px solid #fff !important; 
	border-radius: 15px !important;
	margin-right: 10px;
	padding: 8px 12px !important; 
}

.chat-button {
	background-color: transparent; /* #ffffff1a */
	/* border: 1px solid #fff; */
	color: #fff; 
	/* border-radius: 15px;  */
	border-radius: 50%;
	/* padding: 8px 16px;  */
	cursor: pointer; 
}

.chat-button:hover {
	background-color: #ffffff1a; 
}
.chat-input:focus {
	background-color: #000; 
	color: #fff; 
	border: 1px solid #fff;
	outline: none; 
}
.chat-conversations {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	/* padding: 0 10px; */
}
.chat-conversations-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.chat-conversation {
	padding: 10px;
	/* border-bottom: 1px solid #837f7f; */
	cursor: pointer;
}
.chat-conversation:hover {
	background-color: #ffffff1a;
	border-radius: 10px;
}
.chat-conversation-title {
	color: #FDFDFD; 
	font-size: 14px;
}
.back-button {
	background: none; 
	border: none; 
	color: #fff; 
	padding: 0 12px; 
	cursor: pointer;
}
.back-button:hover {
   color: #e0e0e0; 
}

.add-item-button {
	height: 50px;
	border-radius: 50%;
	width: 50px;
}
.order-table {
	max-height: 30vh;
	overflow-y: auto;
}
.order-row {
	display: flex;
	justify-content: space-between;
	padding: 10px;
	border-bottom: 1px solid #2a2a2a;
}
.order-item {
	display: flex;
	align-items: start;
	justify-content: space-between;
	width: 100%;
}
.total-amount {
	display: flex;
	justify-content: space-between;
	padding: 10px;
	font-weight: bold;
	/* border-top: 2px solid #ddd; */
	margin-top: 10px;
}
.remove-item-button {
	margin-left: 10px;
	color: #53EAFF /* #954141 */;
	cursor: pointer;
}
.header-filter {
		max-width: 200px;
		max-height: 38px;
}

.talla-selected {
	background-color: #ddd;
	border-color: #53eaff;
}

/* Widgets para estadisticas */
.stats-card {
	text-align: center;
	padding: 20px;
	margin: 0; /* Eliminar margen entre columnas */
	box-sizing: border-box; /* Asegurar que el padding no afecte al tamaño total */
}
.stats-card i {
	font-size: 2rem;
	margin-bottom: 10px;
}
.stats-card h5 {
	color: #ddd;
}
.stats-card p {
	margin: 0;
	color: #555;
}
.fs--1 {
	font-size: .78rem !important;
}
.pantera-border {
	border-color: #1D1D1D !important;
}
.coupon-img {
	width: 48px !important;
	height: auto !important;
	border-radius: 8px;
}
.coupon {
	background-color: #1a1a1a; /* Fondo negro */
	color: white;
	border-radius: 15px;
	padding: 20px;
	text-align: center;
	max-width: 390px;
	margin: 20px auto;
	position: relative;
}
.coupon::before, .coupon::after {
	content: '';
	position: absolute;
	width: 34px; /* Tamaño más grande */
	height: 34px; /* Tamaño más grande */
	background-color: #000; /* Color #000 */
	border-radius: 50%;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}
.coupon::before {
	left: -15px; /* Ajuste para que sea hacia adentro */
}
.coupon::after {
	right: -15px; /* Ajuste para que sea hacia adentro */
}
.coupon-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.coupon-body {
	margin-top: 10px;
	margin-bottom: 20px;
}
.coupon-footer {
	padding-top: 20px;
	position: relative;
	z-index: 2;
}
.coupon .badge {
	font-size: 14px;
	background-color: #28a745;
	color: white;
}
.coupon .divider {
	position: absolute;
	top: calc(50% + 17px);
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translateY(-50%);
	z-index: 1;
}
.coupon .divider svg {
	width: 100%; /* Ajustar para que ocupe todo el ancho */
	height: auto;
}

.ticket-body {
	position: relative;
	padding-bottom: 0.5rem; /* Adjusted to give some space for the SVG line */
}

.ticket-body::after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzUwIiBoZWlnaHQ9IjEiIHZpZXdCb3g9IjAgMCAzNTAgMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGxpbmUgeDE9IjM0OS41IiB5MT0iMC41IiB4Mj0iMC41IiB5Mj0iMC40OTk5NjkiIHN0cm9rZT0iIzJFMkUyRSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSI1IDUiLz4KPC9zdmc+');
	background-repeat: repeat-x;
	background-position: center;
	margin-top: 0.5rem;
	position: absolute;
	bottom: -30px;
	left: 0;
}

.ticket-footer {
	position: relative;
	padding-top: 1.5rem;
	padding-bottom: .75rem; /* Add padding to accommodate the tabs */
}

.offer-card .ticket-footer {
	border-top: 0 !important; /* Remove the border */
}

.ticket-footer::before, .ticket-footer::after {
	content: '';
	position: absolute;
	top: 0; /* Position at the top of the footer */
	width: 34px; /* Make the tabs larger */
	height: 34px; /* Make the tabs larger */
	background-color: #000;
	border-radius: 50%;
	transform: translateY(75%); /* Move half of the height down to create the tab effect */
}

.ticket-footer::before {
	left: -15px; /* Adjust to position the left tab correctly */
}

.ticket-footer::after {
	right: -15px; /* Adjust to position the right tab correctly */
}

.serviceline {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.serviceline-line {
    flex-grow: 1;
    height: 1px;
    background-color: #6c757d !important; /* Color de la línea no procesada */
    position: relative;
    top: -8px; /* Centrar la línea con respecto a los círculos */
    margin-left: -18px; /* Ajustar para que la línea comience desde el borde del círculo anterior */
    margin-right: -18px; /* Ajustar para que la línea llegue al borde del siguiente círculo */
}

.serviceline-step {
    text-align: center;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.circle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #6c757d; /* Color de los iconos no procesados */
    font-size: 1.2rem;
    background-color: #343a40; /* Fondo oscuro */
    border: 2px solid #6c757d;
}

.serviceline-step.completed .circle {
    background-color: #28a745 !important; /* Fondo verde para estados completados */
    border-color: #28a745 !important;
    color: #fff !important; /* Color de los iconos procesados */
}

.serviceline-step.completed + .serviceline-line {
    background-color: #28a745 !important; /* Línea verde entre estados completados */
}

.serviceline-step:last-child {
    margin-right: -18px; /* Ajustar para que el último círculo quede alineado */
}

/* ocultar navbar cuando se abre el teclado */
@media (max-height: 640px) {
	.main-navbar {
		display: none !important;
	}
	.app-container {
		height: 100vh !important;
	}
}

.qr-me {
	margin-right: 1.8rem !important;
}
.fix-hour {
	width: 82px !important;
}
.wrapper-reserva {
	border-top-width: 1px;
	border-top-style: solid;
	border-color: var(--sky-of-magritte1200);
	width: calc(100% + 2rem) !important;
	left: -17px;
	position: relative;
}
.booking {
	background-color: #53EAFF;
	color: #000;
	font-size: 11px;
	border-radius: 10px;
	padding: 3px 8px;
	font-weight: lighter;
}
.card-booking {
	background-color: #ffffff0d;
}
.texto-booking {
	font-size: 12px;
	color: #777;
}
.body-booking {
	padding: 2px 6px 2px 2px;
	width: 104px;
}
.booking-selected::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1; /* Sitúa el gradiente detrás del contenido del enlace */
	border-radius: 8px; /* Borde redondeado */
	padding: 1px; /* Espacio para el borde */
	background: linear-gradient(to bottom, rgb(222, 86, 101), rgb(220, 100, 178) 42.66%, rgb(161, 89, 195) 77.87%, rgb(83, 103, 208) 100%);
	/* background: linear-gradient(to bottom right, #53EAFF, rgb(41, 100, 138) 42.66%, rgb(107, 133, 218) 77.87%, rgb(207, 209, 221) 100%); */
	-webkit-mask: 
		linear-gradient(#fff 0 0) content-box, 
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
}
[pantera-cloak] {
	display: none;
}

.coupon-badge {
	background-color: #53EAFF; /* #B91C1C; */
	color:#000 ; /* #fff; */
	font-size: 12px;
	border-radius: 10px;
	padding: 3px 8px 5px;
	font-weight: bold;
}
.coupon-valid {
	font-family: "Inter", Helvetica;
	font-weight: 200;
	color: #716c6c;
	font-size: 12px;
	letter-spacing: 0;
	line-height: normal;
	white-space: nowrap;
}
.buy-button {
	text-decoration: none; 
	max-width: 100% !important; 
	height: 40px !important; 
	color: #fff; 
	font-weight: 550;
	padding-bottom: 10px !important;
}
.label-general-danger {
	color: rgb(198, 45, 45) !important;
}
.not-selected-like {
	color: #434343;
}
.selected-like {
	color: #fff;
}
.count-likes {
	color: var(--sky-of-magritte1000);
}

.input-chat:focus {
	border-color: #eceaea !important; /* o el color de borde deseado */
	box-shadow: none !important;   /* elimina el glow */
	outline: none !important;
}
.input-chat {
	--bs-bg-opacity: .5 !important;
}
.btn-chat {
	background-color: #fff !important;
	color: #000 !important;
	right: 10px; 
	width: 42px; 
	height: 42px; 
	padding: 0;
}
.btn-chat:hover {
	background-color: #bcbcc0 !important;
	color: #000 !important;
}
#community-tags::placeholder {
	color: #494949;     
	opacity: 1;         /* mantiene el color en Firefox */
}

#community-tags,
#community-tags:focus,
.form-control.input-pantera:focus-within {  
	box-shadow: none !important; 
	outline: none !important;
}

#community-tags {
	flex: 1 1 0;     /* grow=1  shrink=1  basis=0  → se ajusta al hueco */
	min-width: 6rem; /* 96 px, suficiente para 10-12 caracteres       */
}

/* Estilos para el selector de región */
.city-selector-card {
	background-color: #2c2c2c; /* Fondo oscuro */
	border-radius: 12px;
	padding: 12px;
	width: 200px;
	max-height: 400px;
	overflow-y: auto;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	position: absolute;
	top: 40px;
	right: 0;
	z-index: 1000;
}

.city-selector-header {
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
	/*  margin-bottom: 8px; */
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 10px;
}

.city-selector-body {
	padding-top: 8px;
	padding-bottom: 6px;
}

.city-item {
	padding: 10px;
	/* border-bottom: 1px solid #444444; */
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
}

.city-item:last-child {
	border-bottom: none;
}

.city-item:hover {
	background-color: #383838;
}

.city-item-selected {
	color: #53EAFF; /* Color del icono de selección */
}

.selected-city-label {
	font-size: 10px;
	color: #444141;
	position: absolute;
	bottom: 4px;
	right: 16px;
	white-space: nowrap;
	max-width: 100px; 
	overflow: hidden;
	text-overflow: ellipsis; 
	text-align: right; 
}