/* estilos personalizados de nuevo design */
body {
    background-color: #e3e7f7 !important;
}

.chat-card-AI {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
  position: relative;
  z-index: 0;
  background-color: transparent;
  overflow-x: hidden;
}

#background-decor {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, 430px);
  aspect-ratio: 430 / 932;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
  display: block;
}
#background-decor svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Estilos para cards de Deals */
.deal-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0px 1.25px 0px #ffffff0a, 0px 6px 7px -4px #0b0c1e33, 0px 0px 0px 1px #0b0c1e1a;
  min-height: 252px;
  max-width: 390px;
}
.deal-wrapper {
  width: 100%;
  max-width: 430px;
  position: relative; 
  z-index: 1; 
  padding: .3rem; 
  background-color: transparent;
  padding-bottom: 3rem;
}
.deal-card-header {
  display: flex;
  height: 161px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #ffffff;
  border-radius: 10px;
}
.deal-card-header .image {
  position: relative;
  width: 151px;
  height: auto;
  object-fit: cover;
}
.deal-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px;
  position: absolute;
  top: 14px;
  left: 269px;
  background-color: #1ce3e6;
  border-radius: 8px;
}
.deal-pill-text {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Inter", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
}
.deal-card-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}
.deal-frame-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}
.deal-frame-price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}
.deal-frame-text .title {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Inter", Helvetica;
  font-weight: 500;
  color: #1c1f26;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}
.deal-frame-price .price{
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Inter", Helvetica;
  font-weight: 600;
  color: #1c1f26;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.deal-frame-price .oldprice {
  position: relative;
  width: fit-content;
  font-family: "Inter", Helvetica;
  font-weight: 500;
  color: #6b768c;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  text-decoration: line-through;
  white-space: nowrap;
}
.deal-empresa {
  display: inline-flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}
.deal-empresa .name {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  display: inline-flex;
  position: relative;
  flex: 0 0 auto;
}
.deal-empresa .name .name-w-avatar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}
.ranking {
  align-items: center;
  gap: 7px;
  display: inline-flex;
  position: relative;
  flex: 0 0 auto;
}
.name-w-avatar .avatar {
  position: relative;
  width: 16px;
  height: 16px;
}
.name-w-avatar .name-text {
  position: relative;
  width: fit-content;
  margin-top: -0.5px;
  font-family: "Inter", Helvetica;
  font-weight: 500;
  color: #495264;
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
}
.ranking .star {
  position: relative;
  width: 12.29px;
  height: 11.74px;
}
.ranking .details {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Inter", Helvetica;
  font-weight: 500;
  color: transparent;
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
}
.ranking .text-star {
  color: #3af1f4;
}
.ranking .text-count {
  color: #495264;
}

/* Texto de busqueda y chat */
.ai-chat-input {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  height: 90px;
  max-width: 392px;
  display: flex;
  align-items: flex-end;
  gap: 10px/* 8px */;
  padding: 16px 8px 8px 20px/* 12px 16px */;
  border-radius: 18px/* 16px */;
  /* background: linear-gradient(228deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); */
  border: 1px solid #ffffff80;
  /* backdrop-filter: blur(22.5px) brightness(100%);
  -webkit-backdrop-filter: blur(22.5px) brightness(100%);
  box-shadow: inset 0 1.25px 0 #ffffff0a, 0 23px 32px -19px #67a1ef33, 0 2px 1px #1051a708; */
  box-shadow: inset 0px 1.25px 0px #ffffff0a, 0px 23px 32px -19px #09132033, 0px 0px 0px 1px #0913210f;
	backdrop-filter: blur(22.5px) brightness(100%);
	-webkit-backdrop-filter: blur(22.5px) brightness(100%);
	background: linear-gradient(228deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
  transition: bottom 0.45s ease;
  z-index: 10;
}

.ai-chat-textarea {
  flex: 1;
  resize: none;
  background: transparent;
  box-shadow: none !important;
  border: none;
  color: #1c1f26;
  align-self: stretch;
  font-family: var(--inter-medium-sm-font-family);
  font-weight: var(--inter-medium-sm-font-weight);
  font-size: var(--inter-medium-sm-font-size);
  letter-spacing: var(--inter-medium-sm-letter-spacing);
  line-height: var(--inter-medium-sm-line-height);
  font-style: var(--inter-medium-sm-font-style);
  outline: none;
  height: 70px;
  overflow-y: hidden;
}

.ai-chat-actions {
  display: flex;
  gap: 8px;
}

.ai-chat-button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, #5273e7 0%, #1738a9 100%);
  box-shadow: 0 0 0 1px #132d86;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ai-chat-button.mic {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: none;
}

/* Componentes del chat */
/* .chat-my-text {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 392px;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 20px;
  border-radius: 16px;
  overflow: hidden;
  border: none;
  box-shadow: inset 0px 1.25px 0px #ffffff0a;
  backdrop-filter: blur(22.5px) brightness(100%);
  -webkit-backdrop-filter: blur(22.5px) brightness(100%);
  background: linear-gradient(186deg, rgba(145, 161, 255, 0.07) 0%, rgba(198, 208, 235, 0) 100%);
}

.chat-my-text::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 16px;
  background: linear-gradient(171deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
}

.chat-my-text .p {
  position: relative;
  align-self: stretch;
  font-family: var(--inter-medium-xs-font-family);
  font-weight: var(--inter-medium-xs-font-weight);
  color: #ffffff;
  font-size: var(--inter-medium-xs-font-size);
  letter-spacing: var(--inter-medium-xs-letter-spacing);
  line-height: var(--inter-medium-xs-line-height);
  font-style: var(--inter-medium-xs-font-style);
}

.chat-response-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pantera-icon-sm {
  width: 14.2px;
  height: 14px;
  background-size: 100% 100%;
}

.p-response {
  width: 400px;
  max-width: calc(100vw - 100px);
  margin-top: -1px;
  font-family: var(--inter-medium-xs-font-family);
  font-weight: var(--inter-medium-xs-font-weight);
  color: #ffffff;
  font-size: var(--inter-medium-xs-font-size);
  letter-spacing: var(--inter-medium-xs-letter-spacing);
  line-height: var(--inter-medium-xs-line-height);
  font-style: var(--inter-medium-xs-font-style);
} */

/* ==== ESTILOS MEJORADOS PARA BURBUJAS DE CHAT ==== */

/* Mensaje del usuario - Fondo blanco sólido, texto negro */
.chat-my-text {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 392px;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 20px;
  border-radius: 16px;
  overflow: hidden;
  border: none;
  /* Fondo blanco sólido para máximo contraste */
  background: #ffffff;
  /* Sombra sutil para dar profundidad */
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 
              0px 1px 3px rgba(0, 0, 0, 0.08);
  position: relative;
}

/* Eliminamos el pseudo-elemento before que creaba el borde gradiente */
.chat-my-text::before {
  display: none;
}

/* Texto del mensaje del usuario - Negro para contraste con fondo blanco */
.chat-my-text .p {
  position: relative;
  align-self: stretch;
  font-family: var(--inter-medium-xs-font-family);
  font-weight: var(--inter-medium-xs-font-weight);
  color: #1c1f26; /* Texto negro/gris oscuro */
  font-size: var(--inter-medium-xs-font-size);
  letter-spacing: var(--inter-medium-xs-letter-spacing);
  line-height: var(--inter-medium-xs-line-height);
  font-style: var(--inter-medium-xs-font-style);
}

/* Mensaje de la IA - Fondo azul oscuro, texto blanco */
.chat-response-text {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 20px;
  border-radius: 16px;
  /* Fondo azul oscuro sólido que combina con el diseño */
  background: linear-gradient(135deg, #1738a9 0%, #2d4bc7 100%);
  /* Sombra para dar profundidad */
  box-shadow: 0px 4px 12px rgba(23, 56, 169, 0.25), 
              0px 1px 3px rgba(23, 56, 169, 0.15);
  max-width: 360px;
  width: fit-content;
}

/* Icono de Pantera - Asegurar que sea visible */
.pantera-icon-sm {
  width: 14.2px;
  height: 14px;
  background-size: 100% 100%;
  flex-shrink: 0; /* Evitar que se reduzca */
  margin-top: 2px; /* Pequeño ajuste de alineación */
}

/* Texto de respuesta de la IA - Blanco para contraste con fondo azul */
.p-response {
  width: auto;
  max-width: calc(100vw - 120px);
  margin-top: 0;
  font-family: var(--inter-medium-xs-font-family);
  font-weight: var(--inter-medium-xs-font-weight);
  color: #ffffff; /* Texto blanco */
  font-size: var(--inter-medium-xs-font-size);
  letter-spacing: var(--inter-medium-xs-letter-spacing);
  line-height: var(--inter-medium-xs-line-height);
  font-style: var(--inter-medium-xs-font-style);
}

/* Mensaje de "pensando" - Estilo especial */
.thinking-message {
  background: linear-gradient(135deg, #495264 0%, #68778f 100%);
  color: #ffffff;
  font-style: italic;
  opacity: 0.9;
}

/* Chat bubble genérica - Aplicar el mismo estilo para consistencia */
.chat-bubble {
  max-width: 255px;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 20px; /* Aumentado para consistencia */
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff; /* Fondo blanco sólido */
  border-radius: 16px;
  overflow: hidden;
  /* Sombra mejorada */
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 
              0px 1px 3px rgba(0, 0, 0, 0.08);
}

.bubble-text {
  position: relative;
  align-self: stretch;
  font-family: var(--inter-medium-xs-font-family);
  font-weight: 400;
  color: #1c1f26; /* Texto oscuro */
  font-size: var(--inter-medium-xs-font-size);
  letter-spacing: var(--inter-medium-xs-letter-spacing);
  line-height: var(--inter-medium-xs-line-height);
  font-style: var(--inter-medium-xs-font-style);
}

/* ==== MEJORAS RESPONSIVAS ==== */

/* En pantallas pequeñas, ajustar el ancho máximo */
@media (max-width: 430px) {
  .chat-my-text {
    max-width: calc(100vw - 60px);
  }
  
  .chat-response-text {
    max-width: calc(100vw - 60px);
  }
  
  .p-response {
    max-width: calc(100vw - 100px);
  }
}

/* ==== ANIMACIONES SUAVES ==== */

/* Animación de aparición para mensajes nuevos */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-my-text,
.chat-response-text {
  animation: fadeInUp 0.3s ease-out;
}

/* ==== ESTADOS ESPECIALES ==== */

/* Mensaje de error */
.chat-response-text.error {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  box-shadow: 0px 4px 12px rgba(220, 53, 69, 0.25), 
              0px 1px 3px rgba(220, 53, 69, 0.15);
}

/* Mensaje de éxito */
.chat-response-text.success {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  box-shadow: 0px 4px 12px rgba(40, 167, 69, 0.25), 
              0px 1px 3px rgba(40, 167, 69, 0.15);
}

/* ==== ACCESIBILIDAD ==== */

/* Asegurar contraste adecuado en modo de alto contraste */
@media (prefers-contrast: high) {
  .chat-my-text {
    background: #ffffff;
    border: 2px solid #000000;
  }
  
  .chat-my-text .p {
    color: #000000;
  }
  
  .chat-response-text {
    background: #000080;
    border: 2px solid #ffffff;
  }
  
  .p-response {
    color: #ffffff;
  }
}

/* Card de feed en chat */
.chat-feed-card {
  display: flex;
  flex-direction: column;
  width: 253px;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  background-color: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0px 1.25px 0px #ffffff0a, 0px 6px 7px -4px #0b0c1e33, 0px 0px 0px 1px #0b0c1e1a;
}

.product-top {
  display: flex;
  height: 161px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #ffffff;
  border-radius: 10px;
}

.product-image {
  position: relative;
  width: 151px;
  height: auto;
  object-fit: cover;
}

.discount-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px;
  position: absolute;
  top: 9px;
  left: 156px;
  background-color: #1ce3e6;
  border-radius: 8px;
}

.product-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 0px 0px 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.product-title {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--inter-medium-sm-font-family);
  font-weight: var(--inter-medium-sm-font-weight);
  color: #1c1f26;
  font-size: var(--inter-medium-sm-font-size);
  letter-spacing: var(--inter-medium-sm-letter-spacing);
  line-height: var(--inter-medium-sm-line-height);
  font-style: var(--inter-medium-sm-font-style);
}

.text-frame {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.product-price {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--inter-semi-bold-xl-font-family);
  font-weight: var(--inter-semi-bold-xl-font-weight);
  color: #1c1f26;
  font-size: var(--inter-semi-bold-xl-font-size);
  letter-spacing: var(--inter-semi-bold-xl-letter-spacing);
  line-height: var(--inter-semi-bold-xl-line-height);
  white-space: nowrap;
  font-style: var(--inter-semi-bold-xl-font-style);
}

.product-oldprice {
  position: relative;
  width: fit-content;
  font-family: var(--inter-medium-base-font-family);
  font-weight: var(--inter-medium-base-font-weight);
  color: #6b768c;
  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);
}

.product-vendor {
  display: inline-flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.product-vendor-details {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  display: inline-flex;
  position: relative;
  flex: 0 0 auto;
}

.avatar-sm {
  position: relative;
  width: 16px;
  height: 16px;
}

.vendor-name {
  position: relative;
  width: fit-content;
  margin-top: -0.5px;
  font-family: "Inter", Helvetica;
  font-weight: 500;
  color: #6b768c;
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.img-action {
  position: relative;
  width: 18px;
  height: 18px;
}
.icon-ellipsis {
  position: absolute;
  width: 12px;
  height: 3px;
  top: 7px;
  left: 3px;
}

/* Estilos de tarjeta bancaria digital */
.bank-card {
  display: flex;
  flex-direction: column;
  width: 382px;
  height: 214px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  position: relative;
  margin-bottom: -1px;
  margin-left: -1px;
  border-radius: 21px;
  overflow: hidden;
  border: none;
  box-shadow: inset 0px 1.25px 0px #ffffff0a, 0px 24px 32px -19px #133e7957;
  backdrop-filter: blur(22.5px) brightness(100%);
  -webkit-backdrop-filter: blur(22.5px) brightness(100%);
  background: linear-gradient(248deg, rgba(188, 238, 255, 0.16) 0%, rgba(198, 208, 235, 0) 100%);
}

.bank-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 21px;
  background: linear-gradient(312deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
}

.bank-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.bank-card-title {
  display: flex;
  width: 156px;
  align-items: center;
  gap: 8px;
}

.logo-md {
  width: 21.83px;
  height: 21.53px;
}

.bank-card-name {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "SF Pro-Medium", Helvetica;
  font-weight: 500;
  color: #e1e5ec;
  font-size: 24px;
  letter-spacing: -0.24px;
  line-height: 24px;
  white-space: nowrap;
}

.header-chip {
  position: relative;
  width: 41px;
  height: 40px;
}

.chip-wrapper {
  position: relative;
  width: 43px;
  height: 42px;
  top: -1px;
  left: -1px;
  border-radius: 5px;
  border: none;
  background: #e1e5ec;
}

.chip-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 5px;
  background: linear-gradient(354deg, rgba(52, 52, 52, 0.5) 0%, rgba(55, 55, 55, 0) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
}

.img-chip {
  position: absolute;
  width: 41px;
  height: 39px;
  top: 0;
  left: 0;
  padding-left: 2px;
}

.card-balance {
  position: relative;
  width: 340px;
  font-family: var(--inter-medium-3xl-font-family);
  font-weight: var(--inter-medium-3xl-font-weight);
  color: #ffffff;
  font-size: var(--inter-medium-3xl-font-size);
  letter-spacing: var(--inter-medium-3xl-letter-spacing);
  line-height: var(--inter-medium-3xl-line-height);
  font-style: var(--inter-medium-3xl-font-style);
}

.bank-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.bank-card-details {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.bank-card-text {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--inter-regular-2xs-font-family);
  font-weight: var(--inter-regular-2xs-font-weight);
  color: #ffffff62;
  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);
}

.bank-card-saved {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 11px;
  position: relative;
  flex: 0 0 auto;
}

.element-saved {
  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: transparent;
  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);
}

.saved-amount {
  color: #1de3e7;
  font-family: var(--inter-medium-sm-font-family);
  font-style: var(--inter-medium-sm-font-style);
  font-weight: var(--inter-medium-sm-font-weight);
  letter-spacing: var(--inter-medium-sm-letter-spacing);
  line-height: var(--inter-medium-sm-line-height);
  font-size: var(--inter-medium-sm-font-size);
}

.saved-text {
  color: #ffffff4c;
  font-family: var(--inter-medium-sm-font-family);
  font-style: var(--inter-medium-sm-font-style);
  font-weight: var(--inter-medium-sm-font-weight);
  letter-spacing: var(--inter-medium-sm-letter-spacing);
  line-height: var(--inter-medium-sm-line-height);
  font-size: var(--inter-medium-sm-font-size);
}

.saved-bar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  position: relative;
  flex: 0 0 auto;
}

.bank-card-logo {
  position: absolute;
  width: 170px;
  height: 169px;
  top: -160px;
  left: 190px;
}

.chat-bubble {
  max-width: 255px;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0px 1.25px 0px #ffffff0a, 0px 6px 7px -4px #0b0c1e33, 0px 0px 0px 1px #0b0c1e1a;
}

.bubble-text {
  position: relative;
  align-self: stretch;
  font-family: var(--inter-medium-xs-font-family);
  font-weight: 400/* var(--inter-medium-xs-font-weight) */;
  color: #1c1f26;
  font-size: var(--inter-medium-xs-font-size);
  letter-spacing: var(--inter-medium-xs-letter-spacing);
  line-height: var(--inter-medium-xs-line-height);
  font-style: var(--inter-medium-xs-font-style);
}

/* Header */
.header-wrapper {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, 430px);
  z-index: 50;

  padding-top: 2.5rem;
  padding-right: 1rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;

  display: flex;
  align-items: center/* flex-start */;
  justify-content: space-between;

  backdrop-filter: blur(6px);
  background-color: rgba(0, 0, 0, 0.2);
}

.header-avatar {
  position: relative;
  width: 32px;
  height: 32px;
  object-fit: cover;
  font-size: 32px;
  color: #fff;
}

.header-actions {
  display: flex;
  /* width: 210px; */
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  position: relative;
}

/* .img-action {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  gap: 15px;
  position: relative;
  background-color: #494e8c0a;
  border-radius: 50px;
  overflow: hidden;
}

.icon-action {
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-left: -4px;
  margin-right: -4px;
  color: #fff;
  font-size: 18px;
} */
.swipe-wrapper {
  gap: 10px;
  z-index: 51;
}

.swipe-tab {
  position: relative;
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 4px;
}

.swipe-tab-disabled {
  opacity: 0.2;
}

/* Nuevo estilos de categorias */
.option-selected-wrapper {
    display: inline-flex;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 8px 18px;
    position: relative;
    flex: 0 0 auto;
    background-color: #68778f33;
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid;
}

.option-selected-text {
    position: relative;
    width: fit-content;
    font-family: var(--inter-medium-base-font-family);
    font-weight: var(--inter-medium-base-font-weight);
    color: #ffffff;
    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);
}

.option-wrapper {
    display: inline-flex;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 8px 18px;
    position: relative;
    flex: 0 0 auto;
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid;
    border-color: #68778f33;
}

.option-text {
    position: relative;
    width: fit-content;
    font-family: var(--inter-regular-base-font-family);
    font-weight: var(--inter-regular-base-font-weight);
    color: #68778f;
    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);
}
.me-9px {
    margin-right: 9px !important;
    margin-inline-end: 9px !important;
}
.mt-6 {
    margin-top: 4.5rem !important;
}
.opacity-20 {
    opacity: 0.2 !important;
}

/* ===== SWITCH TOGGLE CHAT/FEED ===== */
/* Switch Container */
.tab-switch-container {
    position: relative;
    width: 120px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 4px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Slider Background */
.tab-switch-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 52px;
    height: 40px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 20px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
                0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Slider en posición feed */
.tab-switch-container.feed .tab-switch-slider {
    transform: translateX(60px);
    background: linear-gradient(135deg, #1738a9 0%, #2d4bc7 100%);
}

/* Icons Container */
.tab-switch-icons {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 2;
}

/* Individual Icons */
.tab-switch-icon {
/*     width: 20px;
    height: 20px; */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
}

/* Chat Icon Styles */
.tab-switch-icon.chat i {
    font-size: 16px;
    color: #1738a9;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-switch-container.chat .tab-switch-icon.chat i {
    color: #1738a9;
    transform: scale(1.1);
}

.tab-switch-container.feed .tab-switch-icon.chat i {
    color: rgba(255, 255, 255, 0.6);
    transform: scale(0.9);
}

/* Feed Icon Styles */
.tab-switch-icon.feed i {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-switch-container.feed .tab-switch-icon.feed i {
    color: #ffffff;
    transform: scale(1.1);
}

.tab-switch-container.chat .tab-switch-icon.feed i {
    color: rgba(255, 255, 255, 0.6);
    transform: scale(0.9);
}

/* Active State Glow */
.tab-switch-container.chat {
    box-shadow: 0 8px 32px rgba(23, 56, 169, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.tab-switch-container.feed {
    box-shadow: 0 8px 32px rgba(45, 75, 199, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Responsive Design */
@media (max-width: 480px) {
    .tab-switch-container {
        width: 100px;
        height: 40px;
    }
    
    .tab-switch-slider {
        width: 44px;
        height: 32px;
    }
    
    .tab-switch-container.feed .tab-switch-slider {
        transform: translateX(48px);
    }
    
    .tab-switch-icons {
        padding: 0 12px;
    }
    
    .tab-switch-icon.chat i,
    .tab-switch-icon.feed i {
        font-size: 14px;
    }
}