.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #cef;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #cef transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Asegura que esté por encima de todo */
}

/* MENSAJE AL CARGAR INDEX PUBLICO */

.modal {
  /*display: none;*/
  position: fixed;
  z-index: 4;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: opacity 0.3s ease;
  overflow-y: auto;
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 43%;
  max-width: 665px;
}

.modal-footer {
  text-align: -webkit-center;
  user-select: none;
}

.modal .close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.modal-cerrar {
  margin-top: 20px;
  display: block;
}

.modal .close:hover,
.modal .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.small-text {
  font-size: 11px;
  color: dimgrey;
  margin-bottom: 30px;
}

@media (200px <= width <= 500px) {
  .modal-content {
    width: 100%;
  }
}

@media (500px <= width <= 800px) {
  .modal-content {
    width: 60%;
  }
}

@media (800px <= width <= 1080px) {
  .modal-content {
    width: 81%;
    max-width: 750px;
  }
}

@media (1080px <= width <= 1500px) {
  .modal-content {
    width: 58%;
    max-width: 750px;
  }
}

/* FIN MENSAJE */

.alerta-cierre {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #f38d86;
  color: white;
  padding: 30px;
  border-radius: 5px;
  display: block;
  z-index: 9999;
  font-size: 15px;
  cursor: default;
}

/* Definir la animación de desvanecimiento */
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    display: none;
  }
}

.alerta-cierre.ocultar {
  animation: fadeOut 0.5s ease-in-out forwards;
  /* Aplicar la animación fadeOut */
}

.alerta-cierre .cerrar {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.div-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-evenly;
}

.div-flex-convo {
  height: 220px;
  text-align: center;
  width: 440px;
  background: #ddd;
  border-radius: 6px;
  display: grid;
  place-items: center;
  padding: 10px;
}

.div-flex-convo > h2 {
  margin: 0 10px;
  text-transform: uppercase;
}

.convo-btn-section {
  display: inline-flex;
  width: 100%;
  justify-content: space-around;
}

button.btn-primario {
  font-family: var(--fontPrimario);
  display: inline-flex;
  justify-content: space-around;
  padding: 8px 5px;
  background: var(--bgPrimario);
  color: white;
  width: 115px;
  border: none;
  border-radius: 6px;
  transition: 0.2s;
  text-align-last: right;
  cursor: pointer;
}

.btn-primario > svg {
  margin-top: 2px;
}

button.btn-primario:hover {
  background: var(--bgPrimarioHover);
}

.tag {
  border-radius: 40px;
  padding: 4px 8px;
}

/* SOBRESECRIBIR VALORES DE SWEETALERT2 */

.swal2-confirm {
  text-transform: uppercase !important;
  border: 2px solid var(--bgPrimario) !important;
  background-color: var(--bgPrimario) !important;
  &:focus {
    box-shadow: 0 0 0 3px var(--bgPrimario-50) !important;
  }
}

.swal2-danger {
  background-color: #d1242f !important;
  border: 2px solid #d1242f !important;
  text-transform: uppercase !important;
  &:focus {
    box-shadow: 0 0 0 3px rgba(209, 36, 47, 0.5) !important;
  }
}
.swal2-cancel {
  background-color: white !important;
  text-transform: uppercase !important;
  border: 2px solid var(--bgPrimario) !important;
  color: var(--bgPrimario) !important;
  &:focus {
    box-shadow: 0 0 0 3px var(--bgPrimario-50) !important;
  }
}

.swal2-actions {
  direction: rtl !important;
}

.swal2-modal {
  z-index: 99993 !important;
}

.swal2-center-text {
  width: 70% !important;
  margin: 5px auto 5px auto !important;
}

.swal2-input:focus {
  border: 1px solid var(--bgPrimarioLight);
  outline: none;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px var(--bgPrimario-50);
}

.swal2-select-height {
  height: min-content;
}

.swal2-html-container {
  font-family: var(--fontPrimario);
}

/*.swal2-modal * {*/
/*    direction: ltr !important;*/
/*}*/

.tagEstado-container {
  position: absolute;
  top: 25px;
  z-index: 3;
  left: -12px;
}

.tagEstado {
  font-size: 13px;
  font-weight: bold;
  padding: 0px 15px;
  border-radius: 15px;
  color: black;
}

.tagEstado.activo {
  background-color: #70d76b;
}

.tagEstado.baja {
  background-color: #d7d46b;
}

a:has(> .iconoBaja),
a:has(> .iconoBajaMini) {
  display: flex;
  gap: 5px;
  align-items: center;
}

.iconoBaja,
.iconoBajaMini {
  width: 20px;
  background: #bfbfbf;
  padding: 5px;
  border-radius: 20px;
  position: relative;
}

.iconoBaja {
  width: 20px;
  padding: 5px;
}

.iconoBajaMini {
  width: 13px;
  padding: 5px;
}

.iconoBaja .tooltipBaja-text {
  bottom: 130%;
  right: -95px;
}

.iconoBajaMini .tooltipBaja-text {
  bottom: 30px;
  left: -95px;
}

.tooltipBaja-text {
  visibility: hidden;
  background: #333;
  color: #fff;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  position: absolute;
  z-index: 10;
  width: max-content;
}

.iconoBaja:hover .tooltipBaja-text,
.iconoBajaMini:hover .tooltipBaja-text {
  visibility: visible;
  opacity: 1;
}