:root {
  --white-color: #fff;
  /* --top-bar: #ecf2f5; */
  --input-color: #6d92b4;
  --input-color-text: #11518d;
  --color-importante: #db801e;
  --rojo: #f30909;
}
/* ******************************************************************************************************************* */
/* Aplica la animación al ícono cuando se hace hover en enlaces y botones, incluyendo los de las tablas */
.nav-link:hover .flip-on-hover,
.dropdown-item:hover .flip-on-hover {
  animation: infinite-rotate 0.5s linear infinite !important;
}

/* Keyframes para la rotación infinita */
@keyframes infinite-rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}


.parpadea {
  animation-name: parpadeo;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name: parpadeo;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes parpadeo {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes parpadeo {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Asegura que el ícono sea compatible con la animación */
.flip-on-hover {
  display: inline-block !important;
  transform-origin: center;
}

#modalButtonsContainer .d-flex {
  margin-bottom: 2px; /* Añadir margen de 2px para separar los renglones */
}
.rojo {
  color: var(--rojo);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #f8f8f8;
  opacity: 1;
}

.table-hover tr:hover {
  cursor: pointer;
}

.table-bordered thead th {
  text-align: left;
  border: 1px solid #dee2e6;
  padding: 6px;
}
.table-bordered tbody td {
  padding: 6px;
  border: 1px solid #dee2e6;
}
/* ------------------------------------------------------------------ */
.body1 {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.table-hover tbody tr:hover {
  background-color: #def6f9;
}
.button-container {
  white-space: nowrap;
  display: flex;
  justify-content: flex-end;
}

.button-container button {
  display: inline-block;
  margin-right: 2px;
}

.button-container a {
  display: inline-block;
  margin-right: 2px;
}

h1,
h2,
h3,
h4,
h5,
h5 {
  color: var(--input-color-text);
}

.texto-azul {
  /* font-size: 12px; */
  color: var(--input-color-text);
}

.borde-azul {
  color: var(--input-color);
  font-size: 12px;
  border-color: var(--input-color-text);
  border-style: solid;
}

.landing__input {
  height: auto;
  margin-bottom: 15px;
  position: relative;
  width: 100%;
}

.landing__input input,
.landing__input select {
  background: #fff;
  border: 1px solid var(--input-color);
  border-radius: 4px;
  /* Asegura que el border-radius se aplique */
  font-size: 16px;
  height: 0px;
  padding: 0 10px;
  position: relative;
  width: 100%;
  /* Ajuste para ocupar el 100% del ancho del contenedor */
}

.landing__input textarea {
  background: #fff;
  border: 1px solid var(--input-color);
  border-radius: 4px;
  /* Asegura que el border-radius se aplique */
  font-size: 16px;
  /* height: 60px;  */
  /* padding: 0 10px; */
  position: relative;
  width: 100%;
  /* Ajuste para ocupar el 100% del ancho del contenedor */
}

.landing__input input:focus-visible,
.landing__input select:focus-visible {
  outline: none;
}

.landing__label__input {
  margin: auto;
  width: 100%;
}

.landing__input__label {
  background: var(--white-color);
  color: var(--input-color-text);
  font-size: 12px;
  font-weight: 400;
  left: 5px;
  line-height: 11px;
  margin: 0;
  padding: 0 7px;
  position: absolute;
  top: -5px;
  z-index: 4;
}
.input-group input.form-control,
.input-group select.form-control {
  /* Mantener el border-radius en los inputs y selects dentro de .input-group */
  border-radius: 4px;
}

.landing__input input,
.landing__input select {
  /* Cambiar el border-radius para los inputs y selects fuera de .input-group */
  border-radius: 4px;
  border-top-right-radius: 4px;
  /* Añadir border-radius solo en la esquina superior derecha */
  border-bottom-right-radius: 4px;
  /* Añadir border-radius solo en la esquina inferior derecha */
}

/* Estilo para los input deshabilitados y readonly dentro de .landing__input */
.landing__input input:disabled,
.landing__input input:read-only,
.landing__input select:disabled,
.landing__input select:read-only,
.landing__input textarea:disabled,
.landing__input textarea:read-only,
input:disabled,
input:read-only {
  background-color: transparent;
  opacity: 1;
  color: inherit;
}

th,
.sinsalto {
  white-space: nowrap;
  /* los encabezados de tabla se muestre en una sola línea y no se rompa automáticamente. */
}

.suggestions {
  border: 1px solid var(--white-color);
  max-height: 150px;
  overflow-y: auto;
  position: absolute;
  background: rgb(255, 255, 255);
  width: 100%;
  z-index: 1000;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.suggestions div {
  padding: 8px;
  cursor: pointer;
  font-size: 10px;
}
.suggestions div:hover {
  background: #028bfd;
}

.loader-page {
  position: fixed;
  z-index: 25000;
  background: rgba(255, 255, 255, 0.9); /* Fondo semitransparente */
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all 0.3s ease;
}

.loader-text {
  font-size: 20px;
  font-weight: bold;
  color: var(--input-color); /* Mismo color que las bolitas */
  margin-bottom: 50px;
}

.loader-spinner {
  position: relative;
  width: 50px;
  height: 50px;
}

/* Estilos de las bolitas */
.loader-spinner div {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: var(--input-color);
  border-radius: 100%;
  animation: orbit 1.5s linear infinite;
  transform-origin: 30px 30px; /* Centro del círculo */
}

/* Distribuir las 8 bolitas en círculo */
.loader-spinner div:nth-child(1) {
  transform: rotate(0deg) translateY(-40px);
  animation-delay: 0s;
}
.loader-spinner div:nth-child(2) {
  transform: rotate(45deg) translateY(-40px);
  animation-delay: 0.125s;
}
.loader-spinner div:nth-child(3) {
  transform: rotate(90deg) translateY(-40px);
  animation-delay: 0.25s;
}
.loader-spinner div:nth-child(4) {
  transform: rotate(135deg) translateY(-40px);
  animation-delay: 0.375s;
}
.loader-spinner div:nth-child(5) {
  transform: rotate(180deg) translateY(-40px);
  animation-delay: 0.5s;
}
.loader-spinner div:nth-child(6) {
  transform: rotate(225deg) translateY(-40px);
  animation-delay: 0.625s;
}
.loader-spinner div:nth-child(7) {
  transform: rotate(270deg) translateY(-40px);
  animation-delay: 0.75s;
}
.loader-spinner div:nth-child(8) {
  transform: rotate(315deg) translateY(-40px);
  animation-delay: 0.875s;
}

/* Animación de las bolitas */
@keyframes orbit {
  0% {
    transform: rotate(0deg) translateY(-40px) scale(1);
    opacity: 1;
  }
  50% {
    transform: rotate(180deg) translateY(-40px) scale(0.5);
    opacity: 0.3;
  }
  100% {
    transform: rotate(360deg) translateY(-40px) scale(1);
    opacity: 1;
  }
}