/* Estilo personalizado para las pestañas */
.nav-tabs {
  border-bottom: 2px solid #dee2e6;
  /* Línea gris a lo largo del ancho */
}
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: grey;
  padding: 10px 15px;
  font-size: 16px;
}
.nav-tabs .nav-link.active {
  border-color: #006648;
  /* Línea azul en la pestaña activa */
  color: #000;
  /* Texto azul en la pestaña activa */
  background-color: transparent;
}
.nav-tabs .nav-link:hover {
  border-color: #006648;
  /* Línea azul en hover */
  color: #006648;
  /* Texto azul en hover */
}
.insp {
  background-color: #a6bfbd;
  color: white;
  width: 36px;
  height: 36px;
  font-size: 0.6rem;
}
.cert {
  background-color: #98aec7;
  color: white;
  width: 36px;
  height: 36px;
  font-size: 0.6rem;
}
.adua {
  background-color: #cb9edb;
  color: white;
  width: 36px;
  height: 36px;
  font-size: 0.6rem;
}
.dict {
  background-color: #c6c798;
  color: white;
  width: 36px;
  height: 36px;
  font-size: 0.6rem;
}
.filter-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.filter-icon {
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.filter-box {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  /* Evita que el contenido se desborde */
}
.filter-wrapper:hover .filter-box,
.filter-box:hover {
  display: block;
}
th span {
  font-weight: 100;
}
.custom-tooltip {
  --bs-tooltip-bg: rgba(65, 105, 225, 0.95);
  --bs-tooltip-color: white;
}
.custom-tooltip-green {
  
  --bs-tooltip-bg: rgba(47, 145, 145, 0.95);
  --bs-tooltip-color: white;
}
/* Cambiar el color de fondo y borde del checkbox */
input[type="checkbox"] {
  cursor: pointer;
  outline: none;
  /* Elimina el outline por defecto */
  box-shadow: none;
  /* Elimina el focus ring azul */
}
/* Cambiar el color del checkbox cuando está seleccionado */
input[type="checkbox"]:checked {
  background-color: #2f847c;
  /* Color de fondo cuando está seleccionado */
  border-color: #2f847c;
  /* Color del borde cuando está seleccionado */
}
/* Cambiar el color del checkbox cuando no está seleccionado */
input[type="checkbox"]:not(:checked) {
  background-color: #ffffff;
  /* Color de fondo cuando no está seleccionado */
  border-color: grey;
  /* Color del borde cuando no está seleccionado */
}
/* Mantener la alineación del label */
label {
  display: inline-flex;
  align-items: center;
  margin-left: 1rem;
}
/* Eliminar el focus ring azul al hacer clic */
input[type="checkbox"]:focus {
  outline: none;
  box-shadow: none;
  /* Elimina cualquier sombra que pueda causar el borde azul */
}
/* Quitar el borde azul del input al estar en focus */
/* Quitar el borde azul y la sombra del input al estar en focus */
input[type="text"]:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  /* Por si hay algún borde residual */
}
input[type="radio"] {
  border-color: black;
}
/* Cambiar el color del radio button cuando está seleccionado */
input[type="radio"]:checked {
  background-color: #2f847c;
  /* Fondo negro cuando está seleccionado */
  border-color: #2f847c;
  /* Borde negro cuando está seleccionado */
}
input[type="radio"]:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  /* Por si hay algún borde residual */
}
.accordion {
  border-radius: 102px;
  /* Ajusta también los bordes del botón */
}
.filterTriangle {
  width: 14px;
}
/* Mostrar el ícono por defecto (filter_on) */
.filterIconOn {
  width: 14px;
  display: none;
}
/* Ocultar el ícono filter_off inicialmente */
.filterIconOff {
  width: 14px;
  display: none;
}
/* Cuando se hace hover sobre el contenedor, mostrar filter_off */
.filter-wrapper:hover .filterIconOn {
  display: inline;
}
.filter-wrapper:hover .filterIconOff {
  display: none;
}
.filter-wrapper:hover .filterTriangle {
  display: none;
}
th span.title {
  color: #000;
  /* El color que desees */
  font-weight: bold;
}
/* Cambiar el color del texto al hacer hover sobre el tr completo */
th:hover span.title {
  color: #2f847c;
  /* El color que desees */
}
/* Ocultar el ícono de filtro off inicialmente */
.filterIconOff {
  display: none;
}
/* Mostrar el ícono de filtro off cuando se haga clic en un filtro */
.filter-active .filterIconOn {
  display: none;
}
.filter-active .filterIconOff {
  display: inline;
}
/* Deshabilitar el hover cuando el filtro está activo */
.filter-disabled-hover:hover .filterIconOn {
  display: none;
}
.filter-disabled-hover:hover .filterTriangle {
  display: none;
}
.hover-disabled .filter-box {
  display: none;
}
.hover-disabled:hover .filter-box {
  display: none;
  /* Bloquea el hover */
}
.user-name {
  font-size: 1.9375rem;
  font-weight: 400;
}
.kpi-card {
  min-height: 100px;
  /* Ajusta el valor según el tamaño de tus cajas */
  display: flex;
  justify-content: center;
}
.text-bg-success {
  background-color: #00a876 !important;
  color: white !important;
}
.text-bg-warning {
  background-color: #f58f00 !important;
  color: white !important;
}
/* Cuando no hay resultados, la tabla no reserva espacio extra */
.no-results {
  min-height: 0 !important;
}
.bk-login {
  background-image: url("img/bk_login.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Stepeer */
:root {
  --circle-size: clamp(1.5rem, 2.7vw, 3rem);
  --spacing: clamp(0.25rem, 2vw, 0.5rem);
  --inactive-bg: #fff;
  --inactive-border: grey;
  --inactive-text: grey;
  --active-bg: #299191;
  --active-text: white;
  --check-bg: #299191;
  --check-text: white;
  --line-inactive: grey;
  --line-active: #299191; /* Para usar en estados activos si lo requieres */
  /* Grosor de la línea horizontal responsivo */
  --line-thickness: clamp(2px, 1vw, 4px);
  /* Tamaño de fuente para el número dentro del círculo responsivo */
  --step-number-font-size: clamp(1rem, 1.35vw, 2rem);
  /* Grosor del borde del círculo (inactivo) responsivo */
  --inactive-border-thickness: clamp(2px, 1vw, 4px);
}
.c-stepper {
  display: flex;
  counter-reset: step-counter; /* Reinicia el contador para la numeración */
  padding: 0;
  margin: 0;
}
.c-stepper__item {
  display: flex;
  flex-direction: column;
  flex: 1; /* Asegura que cada item crezca equitativamente en pantallas grandes */
  text-align: center;
  position: relative;
}
/* Estado inactivo (por defecto): se muestra el número automático */
.c-stepper__item:before {
  counter-increment: step-counter;
  content: counter(step-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  background-color: var(--inactive-bg);
  border: var(--inactive-border-thickness) solid var(--inactive-border);
  color: var(--inactive-text);
  font-weight: bold;
  font-size: var(--step-number-font-size);
  margin: 0 auto var(--spacing);
  line-height: 1;
  transform: translateY(0);
}
/* Estado activo */
.c-stepper__item.active:before {
  background-color: var(--active-bg);
  border: none;
  color: var(--active-text);
}
/* Estado check (completado): muestra el símbolo de check */
.c-stepper__item.check:before {
  content: "\2713"; /* Símbolo check (✓) */
  background-color: var(--inactive-bg);
  border: var(--active-bg) solid var(--inactive-border-thickness);
  color: var(--check-bg);
}
/* Línea horizontal entre pasos (por defecto gris) */
.c-stepper__item:not(:last-child):after {
  content: "";
  position: relative;
  top: calc(var(--circle-size) / 2);
  width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
  left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
  height: var(--line-thickness);
  background-color: var(--line-inactive);
  order: -1;
}
/* Ilumina la línea para pasos activos (si lo deseas) */
.c-stepper__item.active:not(:last-child):after {
}
/* Ilumina la línea para pasos check */
.c-stepper__item.check:not(:last-child):after {
  background-color: var(--check-bg);
}
.c-stepper__title {
  font-weight: bold;
  font-size: clamp(1rem, 4vw, 1.25rem);
  margin-bottom: 0.5rem;
}
.c-stepper__desc {
  color: grey;
  font-size: clamp(0.85rem, 2vw, 1rem);
  padding-left: var(--spacing);
  padding-right: var(--spacing);
}
/* Cambia el color de la descripción cuando el paso está activo */
.c-stepper__item.active  .c-stepper__desc {
  color: var(--active-bg);
}
.c-stepper__item.check  .c-stepper__desc {
  color: var(--active-bg);
}
/*** Ajustes en móvil (pantallas <= 576px) ***/
@media (max-width: 576px) {
  /* Ajustar la wrapper si tiene padding/margen extra */
  .wrapper {
    margin: 0 auto; /* Ajusta si aún ves espacio sobrante */
    padding: 0 0.5rem; /* reduce padding lateral */
  }
  /* Bajar aún más los valores mínimos de grosor y círculo en móvil */
  :root {
    --line-thickness: clamp(1px, 1vw, 3px);
    --inactive-border-thickness: clamp(1px, 0.5vw, 3px);
    --circle-size: clamp(1.5rem, 2vw, 2.5rem); /* reduce el círculo en móviles */
  }
  /* 
    Fuerza a que cada item no se ensanche por su contenido 
    y use el mismo ancho que los demás. 
  */
  .c-stepper__item {
    flex: 1 1 0;   /* Crece y encoge por igual, ancho base 0 */
    min-width: 0;  /* Impide que el contenido fuerce el ancho mínimo */
  }
  /* Permitir que el título y la descripción se partan en varias líneas si son largos */
  .c-stepper__title,
  .c-stepper__desc {
    white-space: normal;       /* Para que el texto no se alargue horizontalmente */
    overflow-wrap: break-word; /* Rompe palabras largas si exceden el ancho */
  }
  /* Ajusta aún más el tamaño de la fuente si el texto es muy largo */
  .c-stepper__title {
    max-width: 5rem; /* Ajusta según tus necesidades */
    margin: 0 auto 0.5rem;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
  }
  .c-stepper__desc {
    font-size: clamp(0.75rem, 2vw, 0.9rem);
  }
}
/* Asignar un ancho fijo y permitir que el texto se ajuste */
.col-alcance {
  width: 900px;        /* Ajusta a la anchura deseada */
  word-wrap: break-word;
  white-space: normal; /* Para forzar que el texto baje de línea en lugar de expandir la celda */
}

.dropdown-item:active,
.dropdown-item.active {
  background-color: #00A876 !important; /* Azul Bootstrap */
  color: white !important;
}