.sofia-hidden {
  display: none !important;
}

.sofia-card {
  border: 1px solid rgba(0, 0, 0, 0.125) !important;
  border-radius: .25rem !important;
  width: 150px;
  height: 100px;
  /* Ancho ajustado para 4 tarjetas por fila */
  margin: 1rem !important;
  background-color: white !important;
  background-size: cover !important;
  /* Asegura que la imagen de fondo cubra todo el espacio */
  background-position: center !important;
  position: relative !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  transition: all 0.3s ease !important;
  /* Añadir esto */
}

.sofia-card.show {
  opacity: 1 !important;
}

.sofia-card.hide {
  opacity: 0 !important;
}

.sofia-card-img-top {
  width: 100% !important;
  height: 100px !important;
  /* Altura reducida */
  object-fit: cover !important;
  border-top-left-radius: calc(.25rem - 1px) !important;
  border-top-right-radius: calc(.25rem - 1px) !important;
}

.sofia-card-title {
  font-size: .8rem !important;
  /* Tamaño de fuente reducido */
  margin-bottom: .5rem !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.sofia-card:hover .sofia-card-title {
  opacity: 1 !important;
}


.sofia-card-text {
  font-size: .6rem !important;
  /* Tamaño de fuente reducido */
  margin-bottom: .5rem !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.sofia-card-info-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  position: absolute !important;
  bottom: 1rem !important;
  /* Posicionar desde la parte inferior dentro del padding del padre */
  left: 1rem !important;
  /* Mantener alineación con el margen izquierdo del padre */
  right: 1rem !important;
  max-width: calc(100% - 2rem) !important;
  box-sizing: border-box !important;
}


.sofia-card:hover .sofia-card-info-container {
  opacity: 1 !important;
}

.sofia-card-btn {
  cursor: pointer !important;
  width: 20px !important;
  /* Ancho del ícono */
  height: 20px !important;
  /* Altura del ícono */
}




/* Estilos base para escritorio */
.sofia-drop-zone {
  height: 150px !important;
  border: 2px dashed #ced4da !important;
  border-radius: .25rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  cursor: pointer !important;
}

.sofia-drop-zone:hover {
  background-color: #80bdff3f !important;
}

.sofia-drop-zone-p {
  text-align: center !important;
  display: inline-block !important;
  margin-bottom: 0.5rem !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* Estilos para la galería de imágenes */
.sofia-gallery {
  display: none !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  height: 200px !important;
  padding-inline-start: 0px !important;
  overflow: auto;
}

.sofia-gallery::-webkit-scrollbar {
  width: 7px !important;
  /* Ancho de la barra de desplazamiento */
}

.sofia-gallery::-webkit-scrollbar-track {
  background: transparent !important;
  /* Color de la pista de la barra de desplazamiento */
}

.sofia-gallery::-webkit-scrollbar-thumb {
  background: rgb(2, 50, 108) !important;
  /* Color del pulgar de la barra de desplazamiento */
  border-radius: 5px !important;
  /* Redondeo del pulgar */
}

.sofia-main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sofia-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.sofia-text-small {
  color: #555 !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  display: inline-block !important;
  margin-bottom: 0.5rem !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}








#img-icon {
  width: 50px !important;
  height: 48px !important;
}

@media (max-width: 768px) {
  #chatbotContainer {
    right: 0 !important;
    bottom: 0 !important;
  }

  #chat-icon {
    bottom: 10px !important;
    right: 10px !important;
  }
}

#chat-icon {
  position: fixed !important;
  width: 60px !important;
  height: 58px !important;
  bottom: 50px !important;
  left: 20px !important;
  background-color: rgb(2, 50, 108) !important;
}

#chatbotContainer {
  position: fixed !important;
  bottom: 120px !important;
  left: 20px !important;
  transition: all 0.5s ease !important;
}

dotlottie-player {
  width: 30px !important;
}













.sofia-my-g3 {
  --bs-gutter-y: 1rem !important;
  --bs-gutter-x: 1rem !important;
}


.sofia-form-tickets .sofia-form-input-tickets {
  height: 38px !important;
}


.sofia-chat-message .sofia-message_user {
  background-color: rgb(2, 50, 108) !important;
  white-space: normal !important;
  max-width: 80% !important;
  transition: all 0.5s ease !important;
}

























.sofia-scrollable-div {
  max-width: 100% !important;
  overflow-x: hidden !important;
  white-space: nowrap !important;
  scroll-behavior: smooth !important;
}

.sofia-chat-message-bot .sofia-message_bot {
  background-color: #f5f6f7 !important;
  white-space: normal !important;
  max-width: 80% !important;
  text-decoration-color: black !important;
  transition: all 0.5s ease !important;
}

.sofia-message-writing {
  background-color: rgb(2, 50, 108) !important;
}

.sofia-message-writing-bot {
  background-color: #f5f6f7 !important;
}

.sofia-avatar {
  width: 47px !important;
  height: 45px !important;
}

.sofia-avatarIcon {
  width: 50px !important;
  height: 47px !important;
}

.sofia-send_button {
  background-color: rgb(2, 50, 108) !important;
}





















.sofia-my-d-none {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.sofia-my-h1 {
  margin-top: 0 !important;
  font-size: 2.5rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  display: inline-flex;
}

/* Para h2 */
.sofia-my-h2 {
  margin-top: 0 !important;
  font-size: 2rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  display: inline-flex;
}

/* Para h3 */
.sofia-my-h3 {
  margin-top: 0 !important;
  font-size: 1.75rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  display: inline-flex;
}

/* Para h4 */
.sofia-my-h4 {
  margin-top: 0 !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  display: inline-flex;
}

/* Para h5, ya lo tenías */
.sofia-my-h5 {
  margin-top: 0 !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  display: inline-flex;
}

/* Para h6 */
.sofia-my-h6 {
  margin-top: 0 !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  display: inline-flex;
}

.sofia-my-h7 {
  margin-top: 0 !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  display: inline-flex;
}

/* Para párrafos */
.sofia-my-p {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.sofia-my-input-group {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
}

.sofia-my-input-group-text,
.sofia-my-input-group-span {
  display: flex !important;
  align-items: center !important;
  padding: .375rem .75rem !important;
  margin-bottom: 0 !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #212529 !important;
  text-align: center !important;
  white-space: nowrap !important;
  background-color: #e9ecef !important;
  border: 1px solid #ced4da !important;
  border-radius: .25rem !important;
  margin-left: 0px !important;
}

.sofia-my-input-group-input {
  flex: 1 1 auto !important;
  margin-bottom: 0 !important;
  padding: .375rem .75rem !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #212529 !important;
  background-color: #fff !important;
  border: 1px solid #ced4da !important;
  border-radius: .25rem !important;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
}

.sofia-my-input-group-input:focus {
  border-color: #80bdff !important;
  outline: 0 !important;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25) !important;
}

/* Estilos cuando hay múltiples elementos */
.sofia-my-input-group>*:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 0 !important;
}

.sofia-my-input-group>*:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 0 !important;
}

/* Estilos cuando el grupo tiene foco */
.sofia-my-input-group:focus-within>* {
  border-color: #80bdff !important;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25) !important;
}

/* Agregando bordes laterales para separar múltiples inputs */
.sofia-my-input-group>*:not(:first-child):not(:last-child) {
  border-left: 1px solid #ced4da !important;
  border-right: 1px solid #ced4da !important;
}

.sofia-my-input-group>*:first-child {
  border-right: 1px solid #ced4da !important;
}

.sofia-my-input-group>*:last-child {
  border-left: 1px solid #ced4da !important;
}

/* Emulando .form-control de Bootstrap 5 */
.sofia-my-form-control {
  width: 100% !important;
  padding: .375rem .75rem !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #212529 !important;
  background-color: #fff !important;
  background-clip: padding-box !important;
  border: 1px solid #ced4da !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  border-radius: .25rem !important;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
  margin: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  writing-mode: horizontal-tb !important;
  writing-mode: horizontal-tb !important;
  box-sizing: border-box !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  resize: none !important;
}










.tox-tinymce {
  border: 1px solid #ced4da !important;
  border-radius: .25rem !important;
}










.trumbowyg-box,
.trumbowyg-editor {
  border: 1px solid #ced4da !important;
  border-radius: .25rem !important;
}

.sofia-my-form-control[readonly] {
  background-color: #e9ecef !important;
  opacity: 1 !important;
  border-color: #ced4da !important;
  box-shadow: none !important;
}

.sofia-my-form-control[readonly]:focus {
  border-color: #ced4da !important;
  background-color: #e9ecef !important;
  box-shadow: none !important;
}

.sofia-my-file-input {
  display: flex !important;
  align-items: center !important;
}








.real-file {
  display: none !important;
}







.sofia-my-custom-button {
  color: #fff !important;
  border: none !important;
  border-radius: 0.25rem !important;
  cursor: pointer !important;
  align-items: center !important;
  height: 38px
}

.sofia-my-custom-text {
  margin-left: 10px !important;
  line-height: 1.5 !important;
  color: #212529 !important;
}

.sofia-my-form-control:focus {
  color: #495057 !important;
  background-color: #fff !important;
  border-color: #80bdff !important;
  outline: 0 !important;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25) !important;
}

.sofia-my-form-control-sm {
  height: calc(1.5em + .5rem + 2px) !important;
  padding: .25rem .5rem !important;
  font-size: .875rem !important;
  line-height: 1.5 !important;
  border-radius: .2rem !important;
}

.sofia-my-form-control-lg {
  height: calc(1.5em + 1rem + 2px) !important;
  padding: .5rem 1rem !important;
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
  border-radius: .3rem !important;
}

.sofia-my-form-control.is-valid,
.sofia-my-form-control.is-invalid {
  border-color: #28a745 !important;
  padding-right: calc(1.5em + .75rem) !important;
  background-repeat: no-repeat !important;
  background-position: right calc(.375rem + .1875rem) center !important;
  background-size: calc(.75em + .375rem) calc(.75em + .375rem) !important;
}

.sofia-my-form-control.is-invalid {
  border-color: #dc3545 !important;
}

.sofia-my-needs-validation {
  position: relative !important;
}

.sofia-my-needs-validation .sofia-my-form-control:invalid .sofia-my-form-select:invalid {
  border-color: #dc3545 !important;
  padding-right: calc(1.5em + .75rem) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3ccircle fill='%23dc3545' cx='6' cy='6' r='4.5'/%3e%3cpath fill='%23ffffff' d='M5.112 3.6a.517.517 0 00-.39.133.44.44 0 000 .656L5.893 6l-1.17 1.61a.44.44 0 000 .656.517.517 0 00.39.133.516.516 0 00.39-.133l1.203-1.67 1.203 1.67a.516.516 0 00.39.133.517.517 0 00.39-.133.44.44 0 000-.656L7.108 6l1.17-1.61a.44.44 0 000-.656.517.517 0 00-.39-.133.516.516 0 00-.39.133L6 5.086 4.797 3.6a.516.516 0 00-.39-.133z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right calc(.375em + .1875rem) center !important;
}

.sofia-my-needs-validation .sofia-my-form-control:valid .sofia-my-form-select:valid {
  border-color: #198754 !important;
  padding-right: calc(1.5em + .75rem) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right calc(.375em + .1875rem) center !important;
  background-size: calc(.75em + .375rem) calc(.75em + .375rem) !important;
}

.sofia-my-modal-backdrop {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(3px) !important;
  z-index: 10000 !important;
  backdrop-filter: blur(3px) !important;
  overflow-y: auto !important;
}

/* Estado inicial de la animación de entrada para el fondo */
.sofia-backdrop-enter {
  backdrop-filter: blur(0px) !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

/* Estado final de la animación de entrada para el fondo */
.sofia-backdrop-enter-active {
  backdrop-filter: blur(3px) !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  transition: backdrop-filter 300ms, background-color 300ms !important;
}

/* Estado inicial de la animación de salida para el fondo */
.sofia-backdrop-leave {
  backdrop-filter: blur(3px) !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Estado final de la animación de salida para el fondo */
.sofia-backdrop-leave-active {
  backdrop-filter: blur(0px) !important;
  background-color: rgba(0, 0, 0, 0) !important;
  transition: backdrop-filter 300ms, background-color 300ms !important;
}


/* Estilos del modal */
.sofia-my-modal {
  will-change: backdrop-filter !important;
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: transparent !important;
  z-index: 10001 !important;
  overflow-y: auto !important;
}

/* Estilos para custom scroll Chrome, Safari, etc. */
.sofia-my-modal::-webkit-scrollbar {
  width: 10px !important;
  /* Ancho de la barra de desplazamiento */
}

.sofia-my-modal::-webkit-scrollbar-track {
  background: transparent !important;
  /* Color de la pista de la barra de desplazamiento */
}

.sofia-my-modal::-webkit-scrollbar-thumb {
  background: rgb(2, 50, 108) !important;
  /* Color del pulgar de la barra de desplazamiento */
  border-radius: 5px !important;
  /* Redondeo del pulgar */
}


.sofia-my-modal-content {
  position: relative !important;
  margin: auto !important;
  width: 60% !important;
  background-color: #fff !important;
  border-radius: 5px !important;
  /* No estamos estableciendo un max-height o height aquí para que el tamaño se ajuste al contenido */
}

.sofia-my-modal-header {
  background-color: rgb(2, 50, 108) !important;
  padding: 15px !important;
  color: white !important;
  font-size: 1.5em !important;
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between
}

/* Cuerpo del modal */
.sofia-my-modal-body {
  padding: 20px !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  flex-grow: 1 !important;
}

/* Pie de página del modal */
.sofia-my-modal-footer {
  padding: 10px !important;
  text-align: right !important;
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  background-color: rgba(0, 0, 0, .03) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.125) !important;
  border-width: 1px !important;
  border-top-style: solid !important;
  border-top-color: rgba(0, 0, 0, 0.125) !important;
}

.sofia-my-modal-header,
.sofia-my-modal-footer {
  flex-shrink: 0 !important;
  /* Asegura que estos elementos no se encogen */
}

.sofia-my-btn-close {
  margin: 0 !important;
  cursor: pointer !important;
  font-size: 32px !important;
  line-height: 1 !important;
  width: 1em !important;
  height: 1em !important;
  text-shadow: none !important;
  display: inline-block !important;
  background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB8UlEQVR4nO2avUrDYBSGgw4acBBRnAW9AAXt4KhgBb0J60VYb6Ctg3W07rrooDdgHXQvInZwEgTBoaK4WH8eKWQopW3Ol+8nMfSFjt/75qRP8p2cxPMGGsidgCr99QpkLORmAu9+qqoY1gjXAzBmsIixwDNMNRXTBaApMK0YLORIkPcNLKkaF5Fp00ARWeBXkFWIYj4C3AnMX4BpjSKmgGdBTh0Y1bn4Wn9nmC40CjkT+P8Ay1EzVBHLRfDeFnoXtIpQROwDmFPwnQHerSKlgdgNMCzwGwKunCClgVhe4LXrDCkNxL6AxT4+88CnU6Q0ELsH/B4n4zYWpDoFlJCp3GXtgXBt0bMtBcRaO/V627pV4e5dt4aUBmJPwAQwDjwmAikNxE6Cn0Qlz7UUEJPKHVIaiCUPKQ3E4r1LOUAsPqQMIhY/UoYQix+pTgF7EQpxf7tNPVqYudj9/4pUshAjDRsidloUP8lIHSe2aSQNbTxqD1bZtnUrwYEmAzHkSO13WVtOBGKkYfiAHKmmwXGQH2dTuCPwysfSVCJH6jqxI1PUhtizikPsN2eIIUdqK4J3zgliyJE618g4tYoY7l69TSq8evNtIrURtYi2rDXhOLVoC6lD3SLaMivGEUvTBwPVELOGxU84GiHZl6ZzBxrI660/wbBB07+Kr4gAAAAASUVORK5CYII=') center / 16px auto no-repeat !important;
  box-sizing: content-box !important;
  height: 1em !important;
  height: 1em !important;
  padding: .25em .25em !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: .25rem !important;
  vertical-align: middle !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  overflow: hidden !important;
}


.sofia-my-btn-close:hover,
.sofia-my-btn-close:focus {
  opacity: 0.75 !important;
  text-decoration: none !important;
  outline: 0 !important;
  background-color: rgba(255, 255, 255, 0.387) !important;
}

/* Estado inicial de la animación de entrada */
.sofia-modal-enter {
  opacity: 0 !important;
  transform: scale(0.9) !important;
}

/* Estado final de la animación de entrada */
.sofia-modal-enter-active {
  opacity: 1 !important;
  transform: scale(1) !important;
  transition: opacity 300ms, transform 300ms !important;
}

/* Estado inicial de la animación de salida */
.sofia-modal-leave {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Estado final de la animación de salida */
.sofia-modal-leave-active {
  opacity: 0 !important;
  transform: scale(0.9) !important;
  transition: opacity 300ms, transform 300ms !important;
}


.sofia-my-form-label {
  display: inline-block !important;
  margin-bottom: 0.5rem !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.sofia-my-form-select {
  word-wrap: normal !important;
  display: block !important;
  width: 100% !important;
  padding: .375rem 2.25rem .375rem .75rem !important;
  -moz-padding-start: calc(0.75rem - 3px) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #212529 !important;
  background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABHElEQVR4nO3SMSiFYRSA4QcRiZSUUpSyKIvBYDKYLBYWk81iNNnvZLTYTBYWi8lgMhgsyqIUpZSUSES4Ur+SIpf/3vvdnKfOeOq8fR8hhBBCCCGEEHJXQDHxKfw0ZimBY4tfzHIpr1KHlQSOLn6aVdSX+sXeFtYSOL6YzQYa/NLb4noCEZto9EdN2KpixDaa5aQFO1WI2EWrnLVjr4IRe2hTJh3Yr0DEATqVWRcOyxhxhG4V0oPjMkScok+F9eIkx4gz9KuSAZznEHGBQVU2hMs/RFxhWCJGcPOLiOtsNymjuC0h4g5jEjWO+x9EPGBC4ibx+E3EE6bViKns4M8Rz5hRY2azw98jXjCnRs1/CFlQ4xazCSGEEEL4b14BnfLMQvEtlakAAAAASUVORK5CYII=') right .75rem center / 16px auto no-repeat !important;
  border: 1px solid #ced4da !important;
  border-radius: .25rem !important;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  text-transform: none !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.sofia-my-form-select:focus {
  color: #495057 !important;
  background-color: #fff !important;
  border-color: #80bdff !important;
  outline: 0 !important;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25) !important;
}

.sofia-my-invalid-feedback {
  width: 100% !important;
  margin-top: 0.25rem !important;
  font-size: 80% !important;
  color: #dc3545 !important;
}

.sofia-my-justify-content-between {
  justify-content: space-between !important;
}

.sofia-my-justify-content-start {
  justify-content: flex-start !important;
}

.sofia-my-justify-content-end {
  justify-content: flex-end !important;
}

.sofia-my-z-index {
  z-index: 10000 !important;
}

.sofia-my-visibility {
  visibility: hidden !important;
}

.sofia-my-opacity {
  opacity: 0 !important;
}

.sofia-my-flex-row {
  flex-direction: row !important;
}

.sofia-my-height {
  height: 0 !important;
}

.sofia-my-width {
  width: 0 !important;
}

.sofia-my-bottom {
  bottom: 80px !important;
}

.sofia-my-right {
  right: 20px !important;
}

.sofia-my-container {
  margin-right: auto !important;
  margin-left: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  z-index: 2 !important;
  /* incrementar el z-index */
  position: relative !important;
  /* añadir position */
  overflow: auto !important;
  /* manejar el desbordamiento */
  /* ...otros estilos... */
}

.sofia-my-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin: 0 !important;
}

.sofia-my-messages {
  display: flex !important;
  flex-direction: column !important;
  /* Alinear los mensajes verticalmente */
  justify-content: center !important;
  /* Centrar los mensajes */
}

/* Si tienes columnas dentro de la fila */
.sofia-my-col {
  position: relative !important;
  width: 100% !important;
  min-height: 1px !important;
  /* Para asegurarse de que la columna tenga un mínimo de altura */
  padding-right: 15px !important;
  padding-left: 15px !important;
  flex-basis: 0 !important;
  flex-grow: 1 !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  /* Alinear los mensajes verticalmente */
  justify-content: center !important;
}

.sofia-my-align-items-center {
  align-items: center !important;
}

.sofia-my-align-items-start {
  align-items: start !important;
}

.sofia-my-justify-content-between {
  justify-content: space-between !important;
}

.sofia-my-text-muted {
  color: #6c757d !important;
}

.sofia-my-text-danger {
  color: #dc3545 !important;
}

.sofia-my-text-white {
  color: #ffffff !important;
}

.sofia-my-text-black {
  color: #333333 !important;
}

/* p-2: Aplica padding de 0.5rem en todos los lados */
.sofia-my-p-2 {
  padding: 0.5rem !important;
}

/* me-3: Aplica un margin-right de 1rem (en sistemas LTR) */
.sofia-my-me-3 {
  margin-right: 1rem !important;
}

/* pt-1: Aplica un padding-top de 0.25rem */
.sofia-my-pt-1 {
  padding-top: 0.25rem !important;
}

/* small: Reduce el tamaño de fuente a 0.875em */
.sofia-my-small {
  font-size: 0.9em !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}



.sofia-my-text-light {
  color: #f8f9fa !important;
}

.sofia-my-ms-3 {
  margin-left: 1rem !important;
}

.sofia-my-mb-0 {
  margin-bottom: 0 !important;
}

.sofia-my-mb-0_5 {
  margin-bottom: 0.125rem !important;
}

.sofia-my-mb-1 {
  margin-bottom: 0.25rem !important;
}

.sofia-my-mb-2 {
  margin-bottom: 0.5rem !important;
}

.sofia-my-mb-3 {
  margin-bottom: 1rem !important;
}

.sofia-my-mt-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.sofia-my-mt-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.sofia-my-mt-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.sofia-my-mt-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.sofia-my-mt-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.sofia-my-mt-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}


.sofia-my-lh-1 {
  line-height: 1 !important;
}

.sofia-my-fw-bold {
  font-weight: bold !important;
}

.sofia-my-rounded-2 {
  border-radius: 0.25rem !important;
}

.sofia-my-rounded-3 {
  border-radius: 0.3rem !important;
}

.sofia-my-p-3 {
  padding: 1rem !important;
}

.sofia-my-overflow-auto {
  overflow: auto !important;
}

.sofia-my-overflow-hidden {
  overflow: hidden !important;
}

.sofia-my-position-fixed {
  position: fixed !important;
}

.sofia-my-position-absolute {
  position: absolute !important;
}

.sofia-my-top-50 {
  top: 50% !important;
}

.sofia-my-start-50 {
  left: 50% !important;
}

.sofia-my-translate-middle {
  transform: translate(-50%, -50%) !important;
}

.sofia-my-rounded {
  border-radius: 0.25rem !important;
}

.sofia-my-shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.sofia-animated-intro-leftToRight {
  opacity: 0 !important;
  transform: translateX(-20px) !important;
  /* Empieza 20px a la izquierda de su posición final */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out !important;
}

.sofia-animated-intro-rightToLeft {
  opacity: 0 !important;
  transform: translateX(40px) !important;
  /* Empieza 20px a la izquierda de su posición final */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out !important;
}

/* Cuando se añade la clase 'in', se inicia la transición */
.sofia-animated-intro-rightToLeft.sofia-in {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Cuando se añade la clase 'in', se inicia la transición */
.sofia-animated-intro-leftToRight.sofia-in {
  opacity: 1 !important;
  transform: translateX(0) !important;
}


.sofia-my-btn {
  background-color: rgb(2, 50, 108) !important;
  color: #ffffff !important;
  margin-bottom: 0 !important;
  font-weight: normal !important;
  text-align: center !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border-radius: 4px !important;
  user-select: none !important;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

.sofia-my-btnScroll {
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s !important;
}


/* Para estados hover y active */
.sofia-my-btn:hover,
.sofia-my-btn:active {
  background-color: rgb(2, 50, 108) !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) !important;
}

/* Deshabilitado */
.sofia-my-btn:disabled {
  background-color: rgba(0, 69, 153, 0.477) !important;
  border-color: #ddd !important;
  cursor: not-allowed !important;
}

.sofia-my-btn-outline-primary {
  color: rgb(2, 50, 108) !important;
  border: 1px solid rgb(2, 50, 108) !important;
  background-color: transparent !important;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

.sofia-my-btn-outline-primary:hover,
.sofia-my-btn-outline-primary:active {
  color: #fff !important;
  border-color: rgb(2, 50, 108) !important;
}

.sofia-my-btn-outline-primary:disabled {
  color: #ccc !important;
  border-color: #ccc !important;
  cursor: not-allowed !important;
  background-color: transparent !important;
}

.sofia-my-btn-primary {
  background-color: rgb(2, 50, 108) !important;
  border-color: rgb(2, 50, 108) !important;
  color: #fff;
}

.sofia-my-btn-sm {
  padding: .25rem .5rem !important;
  font-size: 0.9em !important;
  line-height: 1.5 !important;
  border-radius: .2rem !important;
}



.sofia-my-card {
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  position: absolute !important;
  /* cambiar a position absolute */
  border: 0px !important;
  flex-direction: column !important;
  min-width: 0 !important;
  word-wrap: break-word !important;
  background-color: white !important;
  background-clip: border-box !important;
  border-radius: .25rem !important;
  vertical-align: middle !important;
  z-index: 1 !important;
  /* posiblemente incrementar si es necesario */
}

.sofia-my-card-body {
  flex: auto !important;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  flex-basis: auto !important;
  padding: 1rem !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Estilos para custom scroll Chrome, Safari, etc. */
.sofia-my-card-body::-webkit-scrollbar {
  width: 8px !important;
  /* Ancho de la barra de desplazamiento */
}

.sofia-my-card-body::-webkit-scrollbar-track {
  background: transparent !important;
  /* Color de la pista de la barra de desplazamiento */
}

.sofia-my-card-body::-webkit-scrollbar-thumb {
  background: rgb(2, 50, 108) !important;
  /* Color del pulgar de la barra de desplazamiento */
  border-radius: 5px !important;
  /* Redondeo del pulgar */
}










/* Del input text para quitar las advertencias y eso */
.tox-notification--warning {
  display: none !important;
}

.sofia-my-card-header:first-child {
  border-radius: calc(.25rem - 1px) calc(.25 -1px) 0 0 !important;
  border-top-left-radius: calc(.25rem - 1px) !important;
  border-top-right-radius: calc(.25rem - 1px) !important;
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

.sofia-my-card-header {
  background-color: rgb(2, 50, 108) !important;
}


.sofia-my-card-footer {
  margin-top: auto !important;
  padding: .5rem 1rem !important;
  padding-top: 0.5 !important;
  padding-bottom: 0.5 !important;
  padding-right: 1 !important;
  padding-left: 1 !important;
  background-color: rgba(0, 0, 0, .03) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.125) !important;
  border-width: 1px !important;
  border-top-style: solid !important;
  border-top-color: rgba(0, 0, 0, 0.125) !important;
}

.sofia-my-card-footer:first-child {
  border-radius: 0 0 calc(.25rem - 1px) calc(.25 -1px) !important;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: calc(.25rem - 1px) !important;
  border-bottom-left-radius: calc(.25rem - 1px) !important;
}

/* Simulación de 'position-fixed' */
.sofia-my-position-fixed {
  position: fixed !important;
}

.sofia-my-btn-toolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

.sofia-my-btn-toolbar .sofia-my-btn-group {
  margin-right: 0.5rem !important;
}

.sofia-my-btn-toolbar .sofia-my-btn-group:last-child {
  margin-right: 0 !important;
}


.sofia-my-btn-group {
  position: relative !important;
  display: inline-flex !important;
  vertical-align: middle !important;
}

.sofia-my-btn-group>.sofia-my-btn {
  position: relative !important;
  flex: 1 !important;
  border-radius: 0 !important;
}

.sofia-my-btn-group>.sofia-my-btn:first-child {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.sofia-my-btn-group>.sofia-my-btn:last-child {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.sofia-my-btn-group>.sofia-my-btn:not(:first-child) {
  border-left: 0 !important;
}

.sofia-my-btn-group>.sofia-my-btn:not(:last-child) {
  border-right: 0 !important;
}

.sofia-my-btn-group>.sofia-my-btn:focus,
.sofia-my-btn-group>.sofia-my-btn:active,
.sofia-my-btn-group>.sofia-my-btn:hover {
  z-index: 1 !important;
}

/* Simulación de 'position-absolute' */
.sofia-my-position-absolute {
  position: absolute !important;
}

/* Simulación de 'top-50', 'start-50' */
.sofia-my-top-50 {
  top: 50% !important;
}

.sofia-my-start-50 {
  left: 50% !important;
}

/* Simulación de 'translate-middle' */
.sofia-my-translate-middle {
  transform: translate(-50%, -50%) !important;
}

/* Simulación de 'rounded' */
.sofia-my-rounded {
  border-radius: 0.25rem !important;
}

/* Simulación de 'shadow' */
.sofia-my-shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.sofia-my-d-flex {
  display: flex !important;
}

/* Del input text para quitar las advertencias y eso */
.tox-statusbar__branding {
  display: none !important;
}

.sofia-question-container {
  /* otras propiedades de estilo */
  opacity: 0;
  transition: opacity 0.5s ease;
}

.sofia-visible {
  opacity: 1;
}

.sofia-button-display {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

@keyframes fadeOutAnimation {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}

.sofia-fade-out {
  animation: fadeOutAnimation 0.5s !important;
  animation-fill-mode: forwards !important;
  /* Hace que el elemento se quede en el estado final de la animación */
}



.sofia-popover-active .sofia-popover-content::after {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  margin-left: -5px !important;
  border-width: 5px !important;
  border-style: solid !important;
  border-color: #555 transparent transparent transparent !important;
}

.sofia-popover-active:hover .sofia-popover-content {
  visibility: visible !important;
  opacity: 1 !important;
}

.sofia-popover {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
}

.sofia-popover .sofia-popover-content {
  visibility: hidden !important;
  width: 200px !important;
  background-color: #555 !important;
  color: white !important;
  text-align: center !important;
  border-radius: 6px !important;
  padding: 8px 0 !important;
  position: absolute !important;
  z-index: 1 !important;
  bottom: 125% !important;
  left: 50% !important;
  margin-left: -100px !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
}