/*!***************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/main.scss ***!
  \***************************************************************************************************************/
@charset "UTF-8";
/*
 * Estilos para los botones custom de la interfaz
 */
#WAC__messages div.WAC__button-holder button.cds--chat-btn--quick-action,
#WAC__messages > div > div.WAC__message--padding > div > div > div > div > div > div > div > button,
#WAC__messages .OptionButton {
  font: SuraSans, sans-serif !important;
  text-align: left !important;
  font-size: var(--font-size) !important;
  display: inline-block !important;
  color: #001A86 !important;
  font-weight: normal !important;
  border-radius: 1000px !important;
  border: 1px solid #001A86 !important;
  padding: 8px 12px !important;
  background-color: white !important;
  cursor: pointer !important;
  transition: background-color 0.3s !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  word-break: break-word !important;
}

#WAC__messages button.OptionButton.OptionButton--video {
  background: var(--globals-yellow-Light, #F2F56E) !important;
  border: 1px solid var(--globals-yellow-Dark, #F2F56E) !important;
}

#WAC__messages button.OptionButton.OptionButton--video::after {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
  transform: translateY(-1px) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg width=%2718%27 height=%2718%27 viewBox=%270 0 18 18%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path d=%27M15.6666 0.666748H8.99996C4.31663 0.666748 0.666626 4.55008 0.666626 9.23341C0.666626 13.5834 4.40829 17.3334 8.76663 17.3334C13.4916 17.3334 17.3333 13.6834 17.3333 9.00008V2.33341C17.3333 1.41675 16.5833 0.666748 15.6666 0.666748ZM13.1666 11.5001L10.6666 9.83341V11.5001H4.83329V6.50008H10.6666V8.16675L13.1666 6.50008V11.5001Z%27 fill=%27%230033A0%27/></svg>") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

#WAC__messages div.WAC__button-holder button.cds--chat-btn--quick-action:hover,
#WAC__messages > div > div.WAC__message--padding > div > div > div > div > div > div > div > button:hover,
#WAC__messages > div > div.WAC__message--padding > div > div > div > div > div > div > div > button:hover {
  background-color: rgba(0, 51, 160, 0.1019607843) !important;
  transition: background-color 0.3s;
}

#WAC__messages > div > div.WAC__message--padding > div > div > div > div > div > div > div > button.CardButton--selected {
  background-color: white;
  cursor: default !important;
}

#WAC__messages > div > div.WAC__message--padding > div > div > div > div > div > div > div > button:disabled {
  background-color: white;
  cursor: not-allowed;
}

#WAC__messages > div > div.WAC__message--padding > div > div > div > div > div > div.Options {
  display: flex;
  flex-direction: column;
  gap: 8px !important;
  align-items: flex-start;
  padding-top: 20px;
}

#WAC__messages > div > div.WAC__message--padding > div > div > div > div > div > div.Options:not(.welcome-mode) {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  padding-top: 20px;
}

#WACWidget > div.WACWidget__animationContainer > div > div.WACBotContainer > div > div.WACPanelContent.WAC__ChatNonHeaderContainer > div.WAC__messagesAndInputContainer.welcome-mode .Options {
  align-items: flex-end !important;
}

/* Estilos para el dropdown de opciones adicionales */
.DropdownContainer {
  position: relative !important;
  display: inline-block !important;
}

.DropdownButton {
  background-color: white !important;
  border: 1px solid #001A86 !important;
  color: #001A86 !important;
  font-weight: normal !important;
  border-radius: 100px !important;
  padding: 8px 10px !important;
  cursor: pointer !important;
  font-size: var(--font-size) !important;
}

.DropdownButton:hover {
  background-color: #E6EBF6 !important;
  transition: background-color 0.3s !important;
}

.DropdownButton.OptionButton--selected {
  background-color: white !important;
  cursor: default !important;
}

.DropdownButton::after {
  content: "" !important;
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  vertical-align: middle !important;
  transform: translateY(-1px) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg width=%2730%27 height=%2716%27 viewBox=%27-4 -4 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path d=%27M8.00492 6.32L13.6731 0.651866C13.8872 0.437775 14.14 0.333203 14.4316 0.338152C14.7231 0.343101 14.9775 0.454184 15.1947 0.6714C15.4087 0.88536 15.5157 1.13813 15.5157 1.4297C15.5157 1.72128 15.4087 1.97411 15.1947 2.1882L9.26779 8.1345C9.08977 8.31252 8.89065 8.44528 8.67044 8.5328C8.4501 8.62031 8.22826 8.66406 8.00492 8.66406C7.78159 8.66406 7.55975 8.62031 7.33941 8.5328C7.11919 8.44528 6.92008 8.31252 6.74206 8.1345L0.800255 2.1882C0.586294 1.97411 0.481007 1.7188 0.484393 1.42228C0.487779 1.12576 0.598015 0.868952 0.815101 0.651866C1.02919 0.437775 1.28281 0.330729 1.57594 0.330729C1.86908 0.330729 2.1227 0.437775 2.33679 0.651866L8.00492 6.32Z%27 fill=%27%23001A86%27/></svg>") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.DropdownButton.DropdownButton--open::after {
  transform: translateY(-1px) scaleY(-1) !important;
}

.DropdownMenu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background-color: white !important;
  border: 1px solid #001A86 !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  z-index: 1000 !important;
  min-width: 200px !important;
  overflow-y: auto !important;
  margin-top: 2px !important;
}

/* Cuando los botones están alineados a la derecha (modo welcome), 
   posicionar el dropdown hacia la izquierda para evitar overflow */
#WACWidget > div.WACWidget__animationContainer > div > div.WACBotContainer > div > div.WACPanelContent.WAC__ChatNonHeaderContainer > div.WAC__messagesAndInputContainer.welcome-mode .DropdownMenu {
  left: auto !important;
  right: 0 !important;
}

.DropdownOption {
  padding: 8px 12px !important;
  cursor: pointer !important;
  color: #001A86 !important;
  font-weight: normal !important;
  font-size: var(--font-size) !important;
  border-bottom: 1px solid #E6EBF6 !important;
}

.DropdownOption:last-child {
  border-bottom: none !important;
}

.DropdownOption:hover {
  background-color: #E6EBF6 !important;
}

.DropdownOption.DropdownOption--selected {
  background-color: #E6EBF6 !important;
  font-weight: 900 !important;
}

/* Estilos para el select nativo en móviles */
.DropdownSelect {
  background-color: white !important;
  border: 1px solid #001A86 !important;
  color: #001A86 !important;
  font-weight: normal !important;
  border-radius: 100px !important;
  padding: 8px 30px 8px 10px !important;
  cursor: pointer !important;
  font-size: var(--font-size) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg width=%2730%27 height=%2716%27 viewBox=%27-4 -4 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path d=%27M8.00492 6.32L13.6731 0.651866C13.8872 0.437775 14.14 0.333203 14.4316 0.338152C14.7231 0.343101 14.9775 0.454184 15.1947 0.6714C15.4087 0.88536 15.5157 1.13813 15.5157 1.4297C15.5157 1.72128 15.4087 1.97411 15.1947 2.1882L9.26779 8.1345C9.08977 8.31252 8.89065 8.44528 8.67044 8.5328C8.4501 8.62031 8.22826 8.66406 8.00492 8.66406C7.78159 8.66406 7.55975 8.62031 7.33941 8.5328C7.11919 8.44528 6.92008 8.31252 6.74206 8.1345L0.800255 2.1882C0.586294 1.97411 0.481007 1.7188 0.484393 1.42228C0.487779 1.12576 0.598015 0.868952 0.815101 0.651866C1.02919 0.437775 1.28281 0.330729 1.57594 0.330729C1.86908 0.330729 2.1227 0.437775 2.33679 0.651866L8.00492 6.32Z%27 fill=%27%23001A86%27/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 16px !important;
  font-family: "Sura Sans", "Roboto", sans-serif !important;
}

.DropdownSelect:focus {
  outline: 2px solid #001A86 !important;
  outline-offset: 2px !important;
}

.DropdownSelect.OptionButton--selected {
  background-color: white !important;
  cursor: default !important;
}

.DropdownSelect:disabled {
  background-color: #f5f5f5 !important;
  color: #666 !important;
  cursor: not-allowed !important;
  border-color: #ccc !important;
}

/* Estilos para las opciones del select en móviles */
.DropdownSelect option {
  color: #001A86 !important;
  background-color: white !important;
  font-size: var(--font-size) !important;
  padding: 8px !important;
}

.DropdownSelect option:disabled {
  color: #999 !important;
}

/**
 * Estilos para la huincha de aviso de fecha de pagos
 */
#WACContainer #avisoHuincha {
  background: white;
  display: flex;
  flex-direction: row;
  gap: 10px;
  position: absolute;
  z-index: 999999;
  color: #001A86;
  text-align: left;
  border-radius: 14px;
  border: 1px solid #001A86;
  padding: 10px;
  font-size: var(--font-size) !important;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.22);
  width: 95%;
}

#WACContainer #avisoHuincha #iconoHuincha svg {
  width: 20px !important;
  height: 20px !important;
}

#WACContainer #avisoHuincha #closeHuincha {
  text-align: end;
  cursor: pointer;
  padding-left: 20px;
  margin-right: 2%;
}

#WACContainer #avisoHuinchaContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 100px; /* Aproximadamente igual al alto del container avisoHuincha */
  margin-top: 8px;
}

#WACContainer #avisoHuincha #huinchaContent a {
  font-weight: 600 !important;
}

/* Desactivar TODAS las animaciones y transiciones del widget */
.WAC__overlay--Custom,
.WAC__overlay--Custom *,
.WAC__overlay--covering,
.WAC__overlay--covering *,
.WACCustomPanel,
.WACCustomPanel * {
  animation: none !important;
  transition: none !important;
  animation-duration: 0s !important;
  transition-duration: 0s !important;
}

#WACWidget > div.WACWidget__animationContainer > div > div.WAC__overlay-panelContainer.WAC__overlay--Custom.WAC__overlay--covering > div {
  background-color: rgba(0, 0, 0, 0.5);
}

#WACWidget > div.WACWidget__animationContainer > div > div.WAC__overlay-panelContainer.WAC__overlay--Custom.WAC__overlay--covering > div > div > div.WACPanelContent,
#WACContainer.WACContainer .WACWidget--rounded .WACWidget__animationContainer .WACCustomPanel .WACHeader ~ .WACPanelContent {
  border-radius: 32px !important;
}

#WACWidget > div.WACWidget__animationContainer > div > div.WAC__overlay-panelContainer.WAC__overlay--Custom.WAC__overlay--covering > div > div {
  position: relative;
  top: 50%;
  left: 50%;
  width: 80%;
  height: auto;
  transform: translate(-50%, -50%);
  animation: none !important;
  transition: none !important;
}

#WACWidget *.WACCustomPanel__HostElement {
  padding: 10px 0px 10px 30px !important;
}

#WACWidget > div.WACWidget__animationContainer > div > div.WAC__overlay-panelContainer.WAC__overlay--Custom.WAC__overlay--covering > div > div > div.WACHeader.WAC--primaryColor {
  display: none;
}

#WACWidget > div.WACWidget__animationContainer > div > div.WACBotContainer.WAC__hidden {
  display: block !important;
}

#WACWidget .WAC__overlay-panelContainer .WACPanelContent b {
  font-weight: bold !important;
}

#WACContainer .infoModal ul.normal {
  list-style: disc !important; /* Elimina los marcadores por defecto */
  padding-left: 20px !important; /* Elimina el padding izquierdo predeterminado */
}

#WACContainer .infoModal ul:not(.normal) {
  list-style: none !important; /* Elimina los marcadores por defecto */
  padding-left: 0; /* Elimina el padding izquierdo predeterminado */
}

#WACContainer .infoModal ul:not(.normal) li {
  padding-left: 35px; /* Espacio para el ícono */
  position: relative;
  margin-bottom: 12px; /* Espaciado entre ítems */
}

#WACContainer .infoModal ul:not(.normal) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%; /* Centrado vertical */
  transform: translateY(-50%); /* Ajuste fino para centrar */
  width: 25px; /* Tamaño del ícono */
  height: 25px; /* Tamaño del ícono */
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 28 29\" fill=\"%23001A86\"><path d=\"M12.0543 16.6827L9.31767 13.946C9.03341 13.6615 8.67495 13.5193 8.24228 13.5193C7.80983 13.5193 7.45137 13.6615 7.16688 13.946C6.88263 14.2303 6.74187 14.5887 6.74462 15.0214C6.74736 15.4538 6.89086 15.8122 7.17512 16.0965L10.9546 19.8759C11.2693 20.1885 11.6364 20.3449 12.0561 20.3449C12.4755 20.3449 12.8416 20.1885 13.1544 19.8759L20.7837 12.2463C21.0682 11.9621 21.2104 11.6051 21.2104 11.1754C21.2104 10.7454 21.0682 10.3884 20.7837 10.1041C20.4995 9.81961 20.141 9.67737 19.7083 9.67737C19.2759 9.67737 18.9175 9.81961 18.6333 10.1041L12.0543 16.6827ZM14 28.5C12.0582 28.5 10.2363 28.1327 8.53419 27.3982C6.83186 26.6637 5.35112 25.6669 4.09198 24.408C2.83307 23.1489 1.83634 21.6681 1.10181 19.9658C0.367268 18.2637 0 16.4418 0 14.5C0 12.5582 0.367268 10.7363 1.10181 9.03419C1.83634 7.33186 2.83307 5.85112 4.09198 4.59198C5.35112 3.33307 6.83186 2.33634 8.53419 1.60181C10.2363 0.867268 12.0582 0.5 14 0.5C15.9418 0.5 17.7637 0.867268 19.4658 1.60181C21.1681 2.33634 22.6489 3.33307 23.908 4.59198C25.1669 5.85112 26.1637 7.33186 26.8982 9.03419C27.6327 10.7363 28 12.5582 28 14.5C28 16.4418 27.6327 18.2637 26.8982 19.9658C26.1637 21.6681 25.1669 23.1489 23.908 24.408C22.6489 25.6669 21.1681 26.6637 19.4658 27.3982C17.7637 28.1327 15.9418 28.5 14 28.5Z\"/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

#WACContainer .infoModal {
  background-color: #e6f0ff;
}

#WACContainer .carousel-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
  margin-bottom: 20px !important;
}

#WACContainer .carousel-container {
  width: 360px !important;
  height: auto !important;
  min-height: 240px !important;
  max-height: 580px !important;
  overflow: hidden !important;
  position: relative !important;
}

#WACContainer .carousel {
  display: flex !important;
  transition: transform 0.5s ease !important;
  gap: 20px !important;
  padding: 0 !important;
  padding-left: 49.5px !important;
  padding-right: 49.5px !important;
  width: 10000px !important;
}

#WACContainer .carousel-item {
  flex: 0 0 261px !important;
  height: auto !important;
  min-height: 200px !important;
  max-height: 580px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  border-radius: 16px !important;
  background: white !important;
  display: flex !important;
  flex-direction: column !important;
  border-width: 0px, 1px, 1px, 1px;
  border-style: solid;
  border-color: var(--Neutrals-Neutral-Bg-3, #EBEFFB);
}

#WACContainer .carousel-title {
  min-height: 60px !important;
  height: auto !important;
  background-color: #EBEFFB !important;
  padding: 16px 20px !important;
  font-size: calc(var(--font-size) * 9 / 8) !important;
  text-align: center !important;
  font-weight: bold !important;
  color: black !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

#WACContainer .carousel-content {
  padding: 15px 20px !important;
  text-align: center !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#WACContainer .carousel-content p {
  margin: 10px 0 15px 0 !important;
  font-size: var(--font-size) !important;
  color: #333 !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  flex-grow: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
}

#WACContainer .carousel-link {
  color: #0066cc !important;
  text-decoration: none !important;
  font-size: calc(var(--font-size) * 7 / 8) !important;
  margin-bottom: 15px !important;
  text-align: center !important;
  font-weight: 600 !important;
  margin-top: auto !important;
  padding: 8px 0 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  flex-shrink: 0 !important;
}

#WACContainer .carousel-content a {
  font-weight: 600 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  flex-shrink: 0 !important;
  padding: 8px 0 !important;
}

#WACContainer .carousel-link:hover {
  text-decoration: underline !important;
}

#WACContainer .carousel-controls {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
}

#WACContainer .carousel-controls.hidden {
  display: none !important;
}

.carousel-indicators {
  display: flex !important;
  gap: 8px !important;
}

.indicator {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background-color: #ccc !important;
  cursor: pointer !important;
}

.indicator.active {
  background-color: #0033A0 !important;
}

.carousel-button {
  background: white !important;
  color: #0033A0 !important;
  border: none !important;
  width: 36px !important; /* Asegura que el ancho y alto sean iguales */
  height: 36px !important; /* Asegura que el ancho y alto sean iguales */
  font-size: calc(var(--font-size) * 21 / 16) !important;
  cursor: pointer !important;
  border-radius: 50% !important; /* Hace que el botón sea completamente redondo */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important; /* Centra el contenido del botón */
}

/* Estilos para iframes de YouTube en el carousel */
#WACContainer .carousel-content iframe {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 150px !important;
  border: none !important;
  border-radius: 8px !important;
  margin: 0 !important;
}

/* Contenido que contiene iframe necesita menos padding para maximizar espacio */
#WACContainer .carousel-content:has(iframe) {
  padding: 8px !important;
}

/* Fallback para navegadores que no soportan :has() */
#WACContainer .carousel-content.iframe-content {
  padding: 8px !important;
}

/* Estilos de reforma cards usando la misma estructura visual que carousel-item */
#WACContainer .reforma-card {
  flex: 0 0 261px !important;
  width: 261px !important;
  height: auto !important;
  min-height: 200px !important;
  max-height: 580px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  border-radius: 16px !important;
  background: white !important;
  display: flex !important;
  flex-direction: column !important;
  border-width: 0px, 1px, 1px, 1px;
  border-style: solid;
  border-color: var(--Neutrals-Neutral-Bg-3, #EBEFFB);
  margin-bottom: 15px !important;
}

#WACContainer .reforma-card .reforma-card-title {
  min-height: 60px !important;
  height: auto !important;
  background-color: #EBEFFB !important;
  padding: 16px 20px !important;
  font-size: calc(var(--font-size) * 9 / 8) !important;
  text-align: center !important;
  font-weight: bold !important;
  color: black !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

#WACContainer .reforma-card .reforma-card-content {
  padding: 15px 20px !important;
  text-align: center !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#WACContainer .reforma-card .reforma-card-content p {
  margin: 10px 0 15px 0 !important;
  font-size: var(--font-size) !important;
  color: #333 !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  flex-grow: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
}

#WACContainer .reforma-card .reforma-card-content a {
  color: #0066cc !important;
  text-decoration: none !important;
  font-size: calc(var(--font-size) * 7 / 8) !important;
  margin-bottom: 15px !important;
  text-align: center !important;
  font-weight: 600 !important;
  margin-top: auto !important;
  padding: 8px 0 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  flex-shrink: 0 !important;
}

#WACContainer .reforma-card .reforma-card-content a:hover {
  text-decoration: underline !important;
}

#WACContainer div.epa-container {
  font-family: Sura Sans !important;
  font-weight: 450 !important;
  font-style: Regular !important;
  font-size: calc(var(--font-size) * 7 / 8) !important;
}

#WACContainer div.epa-step {
  display: none !important;
}

#WACContainer .epa-step.result-step {
  text-align: center !important;
}

#WACContainer div.epa-step.active {
  display: block !important;
}

#WACContainer .epa-step h2 {
  font-size: calc(var(--font-size) * 5 / 4) !important;
  margin-bottom: 15px !important;
}

#WACContainer .epa-step p {
  font-size: calc(var(--font-size) * 9 / 8) !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
}

#WACContainer .rating-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: flex-start;
}

#WACContainer .rating-options label {
  cursor: pointer !important;
  font-family: Sura Sans;
  font-weight: 450;
  font-style: Regular;
  font-size: calc(var(--font-size) * 7 / 8);
  line-height: 18px;
  letter-spacing: 0%;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  transition: background-color 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
}

#WACContainer .rating-options label:hover {
  background-color: rgba(0, 51, 160, 0.1019607843) !important;
}

#WACContainer .difficulty-options {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 16px !important;
}

#WACContainer .difficulty-options label {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 10px !important;
  cursor: pointer !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  transition: background-color 0.2s ease !important;
}

#WACContainer .difficulty-options label:hover {
  background-color: rgba(0, 51, 160, 0.1019607843) !important;
}

#WACContainer .difficulty-text {
  margin-left: 15px !important;
}

#WACContainer div.difficulty-option {
  border-radius: 5px !important;
  width: 32px !important;
  height: 32px !important;
  background-color: #EBEFFB !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: #1C3A87 !important;
  font-weight: bold !important;
}

#WACContainer label.difficulty:hover div.difficulty-option,
#WACContainer label.difficulty.selected div.difficulty-option {
  background-color: #1C3A87 !important;
  color: white !important;
}

#WACContainer textarea.epa-comment {
  width: 100% !important;
  height: 100px !important;
  margin-bottom: 10px !important;
  padding: 10px !important;
  border: 1px solid #3D4A5C !important;
  font-size: var(--font-size) !important;
  font-family: Sura Sans !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  border-radius: 8px !important;
  resize: none !important;
}

#WACContainer div.char-count {
  text-align: right !important;
  font-size: calc(var(--font-size) * 3 / 4) !important;
  color: #666 !important;
}

#WACContainer div.step-indicator {
  margin-top: 20px !important;
  font-size: calc(var(--font-size) * 7 / 8) !important;
  color: #666 !important;
  text-align: center !important;
}

#WACContainer .epa-footer {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  margin-top: 20px !important;
}

#WACContainer .epa-footer .previous {
  cursor: pointer !important;
  font-size: calc(var(--font-size) * 9 / 8) !important;
  color: #1C3A87 !important;
  font-weight: bold !important;
  padding: 5px 10px !important;
  border-radius: 4px !important;
  transition: background-color 0.2s !important;
  position: absolute !important;
  left: calc(50% - 60px) !important;
}

#WACContainer .epa-footer .previous:hover {
  background-color: #f0f0f0 !important;
}

#WACContainer .epa-footer .step-indicator {
  margin: 0 !important;
  font-size: calc(var(--font-size) * 7 / 8) !important;
  color: #666 !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

#WACContainer .checkmark {
  background-image: url("https://afpcapital.cdn.modyo.com/uploads/38e150b3-894e-4273-8baa-cc5770b18d2d/original/Check.svg") !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  margin-right: 10px !important;
  display: inline-block !important;
  width: 76.21px !important;
  height: 76.21px !important;
  vertical-align: middle !important;
}

#WACContainer .navigation-buttons {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 20px !important;
}

.navigation-buttons button {
  padding: 10px 20px !important;
  border: none !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  font-size: var(--font-size) !important;
}

.navigation-buttons button:disabled {
  background-color: #cccccc !important;
  cursor: not-allowed !important;
}

#prevBtn {
  background-color: #f4f4f4 !important;
}

#nextBtn {
  background-color: #007BFF !important;
  color: white !important;
}

#WACContainer div.rating-options div.emoji-rating {
  margin-right: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: calc(var(--font-size) * 2) !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transition: transform 0.2s ease !important;
}

#WACContainer .epa-step .epa-title {
  width: 184px !important;
}

#WACContainer div.send-epa {
  width: 232 !important;
  height: 48 !important;
  opacity: 1 !important;
  border-radius: 16px !important;
  padding: 12px !important;
  gap: 12px !important;
  background-color: #E6EAEF !important;
  color: #B4C0CF !important;
  cursor: not-allowed !important;
  font-family: "Sura Sans" !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
#WACContainer div.send-epa.active {
  background-color: #001A86 !important;
  color: white !important;
  cursor: pointer !important;
}

.custom-header-button button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.custom-header-button button img {
  display: block !important;
  margin: 0 !important;
  position: relative;
  top: 0 !important;
}
.custom-header-button .cds--tooltip-trigger__wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

#WACContainer.WACContainer .WACHeader__CenterContainer::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background-image: url("https://i.ibb.co/pBwSJVzk/Proyecto-nuevo-5.png");
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 5px;
}

/* Estilos más específicos para los SVG paths de los botones del header */
#WACContainer button.cds--btn--icon-only.WACHeader__RestartButton svg path {
  stroke-width: 0.8px !important;
  stroke: currentColor !important;
}

#WACContainer button.cds--btn--icon-only.WACHeader__CloseButton svg path {
  stroke-width: 3px !important; /* Valor más realista */
  stroke: currentColor !important; /* Asegurar que el stroke esté visible */
}

/* Estilos para el contenedor del webchat personalizado */
#botDiv.WebChatContainer {
  position: fixed;
  --webchat-width: min(400px, 90vw);
  --webchat-right: 20px;
  width: var(--webchat-width);
  max-height: min(90vh, 700px);
  height: max(600px, 80vh);
  bottom: 7%;
  z-index: 9998;
  transition: all 100ms ease-in-out;
  right: var(--webchat-right);
}
#botDiv.WebChatContainer.HideWebChat {
  display: none;
}
#botDiv.WebChatContainer.WebChatStyles {
  position: fixed;
  transition: bottom 100ms ease-in-out, opacity 500ms ease-in-out;
}
#botDiv.WebChatContainer.webchat-left {
  left: 20px;
  right: auto;
}
#botDiv.WebChatContainer.webchat-left.StartOpenAnimation, #botDiv.WebChatContainer.webchat-left.CloseAnimation {
  bottom: -620px;
  opacity: 0;
}
#botDiv.WebChatContainer.webchat-left.OpenAnimation {
  bottom: 7%;
  opacity: 1;
}
#botDiv.WebChatContainer.webchat-left.WebChatStyles {
  transition: bottom 100ms ease-in-out, opacity 500ms ease-in-out;
}
#botDiv.WebChatContainer.webchat-right {
  right: var(--webchat-right);
  left: auto;
}
#botDiv.WebChatContainer.webchat-right.StartOpenAnimation, #botDiv.WebChatContainer.webchat-right.CloseAnimation {
  bottom: -620px;
  opacity: 0;
}
#botDiv.WebChatContainer.webchat-right.OpenAnimation {
  bottom: 7%;
  opacity: 1;
}
#botDiv.WebChatContainer.StartOpenAnimation {
  transition: none;
  bottom: -620px;
  opacity: 0;
}
#botDiv.WebChatContainer.OpenAnimation {
  bottom: 7%;
  opacity: 1;
}
#botDiv.WebChatContainer.CloseAnimation {
  bottom: -620px;
  opacity: 0;
}
@media screen and (max-height: 843px) and (min-height: 700px) {
  #botDiv.WebChatContainer {
    bottom: 100px !important;
  }
  #botDiv.WebChatContainer.webchat-left .OpenAnimation, #botDiv.WebChatContainer.webchat-right .OpenAnimation, #botDiv.WebChatContainer.OpenAnimation {
    bottom: 100px !important;
  }
}

/* Estilos para el botón launcher personalizado */
#custom-chat-launcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background-image: url("https://afpcapital.cdn.modyo.com/uploads/aa978c70-192e-4eb2-8931-50b637d71b22/original/logo-asistente-movil_app_1_.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  z-index: 9999;
  outline: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
#custom-chat-launcher.launcher-left {
  left: 20px;
}
#custom-chat-launcher.launcher-right {
  right: 15px;
}
#custom-chat-launcher:hover {
  transform: scale(1.05);
}
#custom-chat-launcher:focus {
  box-shadow: 0 0 0 1px #001A86;
  border-radius: 50%;
}
#custom-chat-launcher:active {
  transform: scale(0.95);
}
#custom-chat-launcher.hiding {
  opacity: 0;
  transform: scale(0.8);
}
#custom-chat-launcher.showing {
  opacity: 1;
  transform: scale(1);
}
@media screen and (max-width: 768px) {
  #custom-chat-launcher {
    width: 80px;
    height: 80px;
    bottom: 15px;
  }
  #custom-chat-launcher.launcher-left {
    left: 15px;
  }
  #custom-chat-launcher.launcher-right {
    right: 15px;
  }
}
@media screen and (max-width: 480px) {
  #custom-chat-launcher {
    width: 70px;
    height: 70px;
    bottom: 10px;
  }
  #custom-chat-launcher.launcher-left {
    left: 10px;
  }
  #custom-chat-launcher.launcher-right {
    right: 15px;
  }
}

.chat-open #custom-chat-launcher {
  display: none !important;
}

.chat-closed #custom-chat-launcher {
  display: block !important;
}

/* Estilos para Watson Chat - basados en el ejemplo oficial */
/* DESHABILITADO: Conflicta con el sistema de posicionamiento personalizado
#WACContainer.WACContainer .WebChatStyles {
  position: relative;
  transition: right 500ms ease-in-out;
}

#WACContainer.WACContainer .HideWebChat {
  display: none;
}

#WACContainer.WACContainer .StartOpenAnimation {
  transition: none;
  right: -500px;
}

#WACContainer.WACContainer .OpenAnimation {
  right: 16px;
}

#WACContainer.WACContainer .CloseAnimation {
  right: -500px;
}
*/
:root {
  --font-size: 16px;
  --spacing-xs: calc(calc(16px) * 0.25);
  --spacing-sm: calc(calc(16px) * 0.5);
  --spacing-md: calc(calc(16px) * 0.75);
  --spacing-lg: calc(16px);
  --spacing-xl: calc(calc(16px) * 1.5);
  --line-height: calc(calc(16px) * 1.4);
  --webchat-width: 410px;
  --cds-chat-BASE-font-family: "Sura Sans", "Roboto", sans-serif !important;
  --cds-code-01-font-family: "Sura Sans", "Roboto", sans-serif !important;
  --cds-code-02-font-family: "Sura Sans", "Roboto", sans-serif !important;
  --cds-focus: #001A86 !important;
}

html.access_zoom-l {
  --font-size: 18.72px !important;
  --spacing-xs: calc(calc(16px) * 0.25);
  --spacing-sm: calc(calc(16px) * 0.5);
  --spacing-md: calc(calc(16px) * 0.75);
  --spacing-lg: calc(calc(16px) * 1);
  --spacing-xl: calc(calc(16px) * 1.5);
  --line-height: calc(calc(16px) * 1.4);
}

html.access_zoom-xl {
  --font-size: 20.8px !important;
  --spacing-xs: calc(calc(16px));
  --spacing-sm: calc(calc(16px)*100);
  --spacing-md: calc(calc(16px)*100);
  --spacing-lg: calc(calc(16px));
  --spacing-xl: calc(calc(16px));
  --line-height: calc(calc(16px)*1.7);
}

#WACContainer .welcome-mode {
  background: linear-gradient(270deg, #F5F7FD 65.05%, #FFFFFF 87.58%, #FCFDFE 92.91%) !important;
}

@media screen and (min-width: 700px) {
  #WACWidget {
    min-height: min(700px, 100vh - 64px) !important;
  }
}
#WACWidget {
  min-width: min(var(--webchat-width), 100vw - 64px) !important;
  font-family: "Sura Sans", "Roboto", sans-serif !important;
}

#WACWidget p {
  font-family: "Sura Sans", "Roboto", sans-serif !important;
}

#WACContainer a {
  font-family: var(--cds-chat-BASE-font-family) !important;
}

/*
//<div id="avisoHuinchaContainer">
//    <div id="avisoHuincha" style="">
//        <div id="closeHuincha" style="">
//        X
//        </div>
//        <div id="huinchaContent">
//            El <b>próximo pago de tu pensión</b> para este mes será el <b>viernes 29 de agosto</b>, y se realizará a través de (indicar via de pago)
//        </div>
//    </div>
//</div>
//*/
/*
  TODO: diseño del input
*/
#WACWidget > div.WACWidget__animationContainer > div > div.WACBotContainer > div > div.WACPanelContent.WAC__ChatNonHeaderContainer > div > div.WACInputAndCompletions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

#WACWidget > div.WACWidget__animationContainer > div > div.WACBotContainer > div > div.WACPanelContent.WAC__ChatNonHeaderContainer > div > div.WACInputAndCompletions > div {
  border-radius: 30px !important;
  width: 90% !important;
  border: 1px solid gray !important;
  margin-bottom: 7px;
}

#WAC__messages > div > div.WAC__message--padding > div > div > div > div.WAC__sent--bubble {
  border-radius: 20px 20px 0px 20px !important;
  background-color: #0033A0;
  border: 0px solid #0033A0 !important;
}

.WACContainer:not(.title),
.WACContainer *:not(.title),
.WAC__ChatContainer:not(.title),
.WAC__ChatContainer *:not(.title),
.WAC__MessageList:not(.title),
.WAC__MessageList *:not(.title),
.WAC__Content:not(.title),
.WAC__Content *:not(.title),
.WAC__Message:not(.title),
.WAC__Message *:not(.title),
.WAC__MessageText:not(.title),
.WAC__MessageText *:not(.title),
.WAC__InputContainer:not(.title),
.WAC__InputContainer *:not(.title),
.WAC__Input:not(.title),
.WAC__Input *:not(.title),
.WAC__Button:not(.title),
.WAC__Button *:not(.title),
#WACContainer:not(.title),
#WACContainer *:not(.title),
#WACWidget:not(.title),
#WACWidget *:not(.title),
.WebChatContainer:not(.title),
.WebChatContainer *:not(.title) {
  font-size: var(--font-size) !important;
  line-height: var(--line-height) !important;
}

#WACContainer div.WACInputContainer.WACInputContainer--hasFocus {
  outline-color: #001A86 !important;
}

#WACContainer .WAC__messagesAndInputContainer:not(.welcome-mode) {
  color: #001A86 !important;
  --cds-text-primary: #001A86 !important;
}

/*
 * REEMPLAZO DE ICONO DE ENVIAR
 */
#WACInputContainer__SendButton {
  position: relative !important;
}
#WACInputContainer__SendButton svg {
  display: none !important;
}
#WACInputContainer__SendButton::after {
  content: "" !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background-color: #001A86 !important;
}
#WACInputContainer__SendButton::after:hover {
  background-color: #147BD1 !important;
}
#WACInputContainer__SendButton::after {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.2501 7.37305L6.08083 12.5423C5.93211 12.691 5.75808 12.7644 5.55873 12.7625C5.35936 12.7606 5.18212 12.682 5.027 12.5269C4.88214 12.3718 4.80714 12.1962 4.802 12C4.79687 11.8039 4.87187 11.6282 5.027 11.4731L11.3674 5.13273C11.461 5.03915 11.5597 4.97312 11.6635 4.93465C11.7674 4.89619 11.8795 4.87695 12.0001 4.87695C12.1206 4.87695 12.2327 4.89619 12.3366 4.93465C12.4404 4.97312 12.5391 5.03915 12.6327 5.13273L18.9731 11.4731C19.1116 11.6116 19.1824 11.783 19.1856 11.9875C19.1888 12.192 19.118 12.3718 18.9731 12.5269C18.818 12.682 18.6398 12.7596 18.4385 12.7596C18.2372 12.7596 18.059 12.682 17.9039 12.5269L12.75 7.37305V18.75C12.75 18.9628 12.6782 19.141 12.5347 19.2846C12.3911 19.4282 12.2129 19.5 12.0001 19.5C11.7872 19.5 11.609 19.4282 11.4655 19.2846C11.3219 19.141 11.2501 18.9628 11.2501 18.75V7.37305Z\" fill=\"white\"/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 24px 24px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
#WACInputContainer__SendButton.cds--btn--disabled::after {
  background-color: #99ADD9 !important;
}
#WACInputContainer__SendButton:hover::after {
  background-color: #147BD1 !important;
}

#WACContainer a {
  color: #001A86 !important;
  font-weight: bold !important;
  text-decoration: underline !important;
}

#WACContainer .mensaje::before {
  content: "" !important;
  padding-right: 8px !important;
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  background-color: transparent !important;
  background-image: url("https://afpcapital.cdn.modyo.com/uploads/220ffa51-70d1-495b-9add-f6096adc5773/original/chat_fill.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  vertical-align: middle !important;
}

#WACContainer .telefono::before {
  content: "" !important;
  padding-right: 8px !important;
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  background-color: transparent !important;
  background-image: url("https://afpcapital.cdn.modyo.com/uploads/43b2757d-bc9c-4d95-b7f2-21a242476452/original/call-fill.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  vertical-align: middle !important;
}

#WACContainer div.WACLauncher__ButtonContainer.WACLauncher__ButtonContainer--round {
  background-color: transparent !important;
  background: none !important;
  border-radius: 0% !important;
  border: none !important;
  box-shadow: none !important;
}

#WACContainer div.WACLauncher__ButtonContainer {
  background-color: transparent !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

#WACContainer #WACLauncher__Button {
  width: 100px !important;
  height: 100px !important;
  border: none !important;
  border-radius: 0% !important;
  background-color: transparent !important;
  background: url("https://afpcapital.cdn.modyo.com/uploads/aa978c70-192e-4eb2-8931-50b637d71b22/original/logo-asistente-movil_app_1_.png") no-repeat center center !important;
  background-size: contain !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
}
#WACContainer #WACLauncher__Button svg {
  display: none !important;
}

#WACContainer.WACContainer button.WACLauncher__Button {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--cds-chat-BASE-border-radius-xsmall);
  height: var(--cds-chat-LAUNCHER-default-size);
  width: var(--cds-chat-LAUNCHER-default-size);
  transition: background 0.25s ease-in-out, transform 0.15s ease;
  background-color: var(--cds-chat-LAUNCHER-color-background);
}

#WACContainer textarea#WACInputContainer-TextArea.password {
  /* Funciona en Chrome, Safari (iOS/Mac), Edge - ~97% de usuarios */
  -webkit-text-security: disc;
  caret-color: black;
}

/* Fallback básico para Firefox y navegadores antiguos */
@supports not (-webkit-text-security: disc) {
  #WACContainer textarea#WACInputContainer-TextArea.password {
    color: transparent;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    caret-color: black;
  }
}
#WACContainer textarea#WACInputContainer-TextArea.password::selection {
  background: rgba(0, 51, 160, 0.3);
}

html[data-bs-theme=contrast] {
  filter: invert(1);
}
html[data-bs-theme=contrast] button#custom-chat-launcher,
html[data-bs-theme=contrast] #WACContainer.WACContainer .WACHeader__CenterContainer::before,
html[data-bs-theme=contrast] #WACContainer img,
html[data-bs-theme=contrast] #WACContainer video,
html[data-bs-theme=contrast] #WACContainer iframe,
html[data-bs-theme=contrast] div.WACBotContainer video {
  filter: invert(1) grayscale(1);
}
html[data-bs-theme=contrast] {
  background-color: var(--color-base-black);
}

/*# sourceMappingURL=demo.css.map*/