/* Clases de colores para aplicar según necesidad */
.color-white {
  color: var(--color-white) !important;
}

.color-black {
  color: var(--color-black) !important;
}

.color-1 {
  color: var(--color-1) !important;
}

.color-2 {
  color: var(--color-2) !important;
}

.color-3 {
  color: var(--color-3) !important;
}

.color-4 {
  color: var(--color-4) !important;
}

.color-5 {
  color: var(--color-5) !important;
}

.color-6 {
  color: var(--color-6) !important;
}

.color-7 {
  color: var(--color-7) !important;
}

.color-8 {
  color: var(--color-8) !important;
}

.color-9 {
  color: var(--color-9) !important;
}

.color-10 {
  color: var(--color-10) !important;
}

.color-11 {
  color: var(--color-11) !important;
}

.color-12 {
  color: var(--color-12) !important;
}

/* Clases de fondo */

.bg-color-white {
  background-color: var(--color-white) !important;
  color: var(--color-black) !important;
}

.bg-color-black {
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
}

.bg-color-1 {
  background-color: var(--color-1) !important;
  color: white !important;
}

.bg-color-2 {
  background-color: var(--color-2) !important;
  color: white !important;
}

.bg-color-3 {
  background-color: var(--color-3) !important;
  color: white !important;
}

.bg-color-4 {
  background-color: var(--color-4) !important;
  color: white !important;
}

.bg-color-5 {
  background-color: var(--color-5) !important;
  color: white !important;
}

.bg-color-6 {
  background-color: var(--color-6) !important;
  color: white !important;
}

.bg-color-7 {
  background-color: var(--color-7) !important;
  color: var(--color-5) !important;
}

.bg-color-8 {
  background-color: var(--color-8) !important;
  color: white !important;
}

.bg-color-9 {
  background-color: var(--color-9) !important;
  color: white !important;
}

.bg-color-10 {
  background-color: var(--color-10) !important;
  color: white !important;
}

.bg-color-11 {
  background-color: var(--color-11) !important;
  color: white !important;
}

.bg-color-12 {
  background-color: var(--color-12) !important;
  color: white !important;
}
/* Clases de borde */
.border-color-1 {
  border-color: var(--color-1) !important;
}

.border-color-2 {
  border-color: var(--color-2) !important;
}

.border-color-3 {
  border-color: var(--color-3) !important;
}

.border-color-4 {
  border-color: var(--color-4) !important;
}

.border-color-5 {
  border-color: var(--color-5) !important;
}
.btn-outline-color-5 {
  color: var(--color-5);
  border-color: var(--color-5);
  background-color: transparent;
}

.btn-outline-color-5:hover,
.btn-outline-color-5:focus,
.btn-outline-color-5:active {
  color: white;
  background-color: var(--color-5);
  border-color: var(--color-5);
}

.border-color-6 {
  border-color: var(--color-6) !important;
}

.border-color-7 {
  border-color: var(--color-7) !important;
}

.border-color-8 {
  border-color: var(--color-8) !important;
}

.border-color-9 {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--color-9) !important;
}

.border-color-10 {
  border-color: var(--color-10) !important;
}

.border-color-11 {
  border-color: var(--color-11) !important;
}

.border-color-12 {
  border-color: var(--color-12) !important;
}

/* Fondo transparente cuando el acordeón está cerrado */
.accordion-button {
  background-color: transparent !important;
  color: var(--color-6) !important;
  transition: background-color 0.3s ease-in-out, border-color 0.2s ease-in-out;
  border: 2px solid transparent; /* Evita que el botón se mueva cuando se aplica el borde en focus */
}

/* Aplicar el color solo cuando el acordeón esté abierto */
.accordion-button:not(.collapsed) {
  background-color: var(--color-7) !important;
}

/* Aplicar el borde del mismo color cuando el botón está en focus */
.accordion-button:focus {
  border: 2px solid var(--color-7) !important;
  box-shadow: none; /* Evita el resplandor azul de Bootstrap */
}
/* Cuando el checkbox NO está seleccionado */
.form-check-input {
  background-color: var(--color-12) !important; /* Fondo con color-6 */
  border: 2px solid var(--color-12) !important; /* Borde del mismo color */
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* Cuando el checkbox está seleccionado (estilo Bootstrap original) */
.form-check-input:checked {
  background-color: var(--color-5) !important; /* Color original de Bootstrap */
  border-color: var(--color-5) !important;
}

/* Cuando el checkbox está en focus, mantener el borde */
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important; /* Sombra estándar de Bootstrap */
}

/* Cambiar color cuando el select tiene hover o focus */
.form-select:hover,
.form-select:focus {
  background-color: var(--color-7) !important;
  border-color: var(--color-7) !important;
  box-shadow: 0 0 0 0.25rem rgba(220, 239, 249, 0.5) !important; /* Efecto de foco */
}

/* Para Select2: Cambiar color de la opción seleccionada */
.select2-container--default .select2-selection--single {
  background-color: transparent !important;
  border: 2px solid #ced4da; /* Color por defecto */
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* Cuando el select2 está en focus */
.select2-container--default .select2-selection--single:focus {
  border-color: var(--color-7) !important;
  box-shadow: 0 0 0 0.25rem rgba(220, 239, 249, 0.5) !important;
}

/* Para el menú desplegable del Select2 */
.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-7) !important;
  color: black !important; /* Texto en negro para mejor contraste */
}

/* Cambiar el hover en el menú desplegable */
.select2-container--default .select2-results__option:hover {
  background-color: var(--color-7) !important;
  color: black !important;
}

/* Efecto de crecimiento suave en hover */
.action-icon {
  color: var(--color-4);
  transition: transform 0.2s ease-in-out; /* Suaviza el crecimiento */
}

/* Cuando pasas el mouse sobre el ícono */
.action-icon:hover {
  transform: scale(1.2); /* Agranda el ícono un 20% */
}

/* Cambiar el fondo del número de página activo */
.pagination .page-item.active .page-link {
  background-color: var(--color-5) !important;
  border-color: var(--color-5) !important;
  color: white !important; /* Asegura que el texto sea visible */
}

/* Asegurar que los botones anterior/siguiente tengan el mismo estilo */
.pagination .page-item .page-link {
  color: var(--color-5) !important;
}
/* Cambiar el color cuando pasas el mouse sobre la paginación */
.pagination .page-link:hover {
  background-color: var(--color-5) !important;
  color: white !important;
  border-style: solid !important;
}

.pagination .page-link:focus {
  box-shadow: 0 0 0 0.25rem rgba(16, 56, 90, 0.25) !important;
}

.pagination .page-item.disabled .page-link {
  background-color: #e9ecef !important;
  color: #6c757d !important;
  border-color: #dee2e6 !important;
}

.dataTables_filter label {
  color: var(--color-4) !important;
}

.nav-tabs .nav-link {
  color: var(--color-5) !important;
}
.nav-tabs .nav-link:hover {
  color: white !important; /* Color del texto cuando está activo */
  background-color: var(--color-5) !important; /* Fondo del color-5 */
  border-color: var(--color-5) !important; /* Borde del mismo color */
}

.sp-container {
  background-color: var(--color-white) !important;
}

.btn-primary {
  background-color: var(--color-2) !important;
  border-color: var(--color-white) !important;
}

.btn-primary:hover {
  background-color: var(--color-3) !important;
  border-color: var(--color-white) !important;
}

.btn-info {
  background-color: var(--color-1) !important;
  border-color: var(--color-white) !important;
}

.btn-info:hover {
  background-color: var(--color-3) !important;
  border-color: var(--color-white) !important;
}

/* a {
  color: var(--color-5) !important;
} */

#sidebar-menu a:hover {
  color: var(--color-1) !important;
}

#sidebar-menu a:focus {
  color: var(--color-1) !important;
}

/* .swal2-confirm{
  background-color: var(--color-2) !important;
  border-color: var(--color-2) !important;
} */
/* Estilo para el botón de confirmación */
.swal2-container .swal2-popup .swal2-actions .swal2-confirm {
  background-color: var(--color-1) !important; /* Verde */
  color: white !important;
}

/* Estilo para el botón de cancelar */
.swal2-container .swal2-popup .swal2-actions .swal2-cancel {
  background-color: var(--color-10) !important; /* Rojo */
  color: white !important;
}

/* Estilo para el botón de denegación */
.swal2-container .swal2-popup .swal2-actions .swal2-deny {
  background-color: var(--color-8) !important; /* Naranja */
  color: white !important;
}

/* Estilos al pasar el mouse sobre los botones */
.swal2-container .swal2-popup .swal2-actions .swal2-confirm:hover {
  background-color: var(--color-5) !important;
}

.swal2-container .swal2-popup .swal2-actions .swal2-cancel:hover {
  background-color: var(--color-4) !important;
}

.swal2-container .swal2-popup .swal2-actions .swal2-deny:hover {
  background-color: var(--color-3) !important;
}

/* Desactivar los efectos de los estilos de SweetAlert2 */
.swal2-container .swal2-popup .swal2-actions button {
  box-shadow: none !important;
  outline: none !important;
}

/* Cambiar color del borde y el ícono del éxito */
.swal2-container .swal2-popup .swal2-icon.swal2-success {
  border-color: var(--color-1) !important;
  color: var(--color-1) !important;
}

/* Cambiar color del SVG (checkmark) dentro del ícono */
.swal2-container
  .swal2-popup
  .swal2-icon.swal2-success
  [class^="swal2-success-line"],
.swal2-container .swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
  stroke: var(--color-1) !important;
}

/* Cambiar color del círculo verde del éxito */
.swal2-container .swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
  border-color: var(--color-1) !important;
}

/* Cambiar el color de los botones también */
.swal2-container .swal2-popup .swal2-actions .swal2-confirm {
  background-color: var(--color-1) !important;
  color: white !important;
}

/* Cambiar color del círculo del icono de éxito */
.swal2-container .swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
  border-color: var(--color-1) !important; /* Color del círculo */
}

/* Cambiar color del check dentro del ícono de éxito */
.swal2-container .swal2-popup .swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-container
  .swal2-popup
  .swal2-icon.swal2-success
  .swal2-success-line-long {
  background-color: var(--color-1) !important; /* Color del check */
}

/* Si el check sigue sin cambiar, forzar con stroke */
.swal2-container .swal2-popup .swal2-icon.swal2-success svg path {
  stroke: var(--color-1) !important;
}

/* Cambiar el color del círculo del ícono de información */
.swal2-container .swal2-popup .swal2-icon.swal2-info {
  border-color: var(--color-1) !important;
  color: var(--color-1) !important;
}

/* Cambiar el color de la "i" dentro del ícono */
.swal2-container
  .swal2-popup
  .swal2-icon.swal2-info
  [class^="swal2-info-line"] {
  background-color: var(--color-1) !important;
}

/* Cambiar color del SVG si la "i" sigue sin cambiar */
.swal2-container .swal2-popup .swal2-icon.swal2-info svg path {
  stroke: var(--color-1) !important;
  fill: var(--color-1) !important;
}

/* Cambiar el color del círculo del ícono de advertencia */
.swal2-container .swal2-popup .swal2-icon.swal2-warning {
  border-color: var(--color-3) !important;
  color: var(--color-3) !important;
}

/* Cambiar el color del signo de exclamación dentro del ícono */
.swal2-container
  .swal2-popup
  .swal2-icon.swal2-warning
  [class^="swal2-warning-line"] {
  background-color: var(--color-3) !important;
}

/* Cambiar color del SVG del signo de exclamación si aún no cambia */
.swal2-container .swal2-popup .swal2-icon.swal2-warning svg path {
  stroke: var(--color-3) !important;
  fill: var(--color-3) !important;
}

/* Cambiar el color del círculo del ícono de pregunta */
.swal2-container .swal2-popup .swal2-icon.swal2-question {
  border-color: var(--color-1) !important;
  color: var(--color-1) !important;
}

/* Cambiar el color del signo de interrogación dentro del ícono */
.swal2-container
  .swal2-popup
  .swal2-icon.swal2-question
  [class^="swal2-question-mark"] {
  background-color: var(--color-1) !important;
}

/* Cambiar color del SVG del signo de interrogación si aún no cambia */
.swal2-container .swal2-popup .swal2-icon.swal2-question svg path {
  stroke: var(--color-1) !important;
  fill: var(--color-1) !important;
}

.hover-effect:hover {
  transform: scale(1.1); /* Aumenta el tamaño un poco */
  transition: 0.2s ease-in-out;
}

#contractForm a {
  color: var(--color-5); /* Usando una variable CSS si ya la tienes */
}

#content-tempContract a {
  color: var(--color-5); /* Usando una variable CSS si ya la tienes */
}

.select2-container .select2-search--dropdown .select2-search__field {
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 4px 8px;
}

span.color-6 {
  font-size: 0.75rem; /* Puedes ajustar el valor según lo grande que quieras el texto */
}


.bg-soft-primary {
  background-color: #ffbfae !important;
  color: white !important;
}
.border-primary.border {
  border-color: #ba5525 !important;
}

.bg-soft-success {
  background-color: #d2f3ff !important;
  color: white !important;
}
.border-success.border {
  border-color: #4e90b5 !important;
}

.bg-soft-info {
  background-color: #ffdfd4 !important;
  color: white !important;
}
.border-info.border {
  border-color: #ea824c !important;
}

.bg-soft-warning {
  background-color: #ccecff !important;
  color: white !important;
}
.border-warning.border {
  border-color: #063456 !important;
}