/* Loader */
.loader {
  display:block;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite
}
.loader::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 5px solid var(--bs-principal);
  animation: prixClipFix 2s linear infinite ;
}

@keyframes rotate {
  100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
  0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
  25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
  50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
  75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
  100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}

/* Análisis type */
.text-sm {
  font-size: 1em;
}

.text-md {
  font-size: 1.1em;
}

/* Navigation tool */
.back-icon {
  width: 37px;
  height: 18px;
  background-image: url("../../../../icons/back.png");
  background-size: cover;
}

.back-icon:is(:active, :hover) {
  filter: contrast(0) brightness(0);
}

.helper-icon {
  height: 24px;
  width: 26px;
  background-image: url("../../../statics/app/img/helperInicio.svg");
  background-size: cover;
  transition: all 0.3s ease-in-out;
}

.helper-icon:is(:active, :hover) {
  background-image: url("../../../statics/app/img/helper-change.svg");
}


/* Tag Badge Pill */
.menu-badge-pill-gap {
  gap: 0.7rem !important
}

.menu-badge-pill-max-width {
  max-width:  fit-content;
}

@media (max-width: 768px) {
  .menu-badge-pill-max-width {
    max-width: none !important;
  }
}

.menu-badge-pill {
  font-weight: 500;
  border: 3px var(--bs-principal) solid;
  background-color: var(--bs-blue-light);
  color: var(--bs-principal);
  padding: 0.85rem 0.75rem;
  border-radius: 1.5em;
  transition: background-color 0.3s, color 0.3s;
}

.menu-badge-pill:is(:hover, :active){
  font-weight: 500 !important;
  background-color: var(--bs-principal);
  color: var(--bs-white);
}

.menu-badge-pill-active-principal {
  background-color: var(--bs-principal);
  color: var(--bs-white);
}

.menu-badge-pill-active-violet {
  background-color: var(--bs-violet);
  color: var(--bs-white);
}

.menu-badge-pill-active-violet:is(:hover, :active){
  background-color: var(--bs-violet);
}

/* Category Card */
.card-category {
  width: 180px;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--bs-white);
  background-color: var(--bs-principal);
}

.card-category:is(:hover, :active, :focus) {
  background-color: var(--bs-violet);
  color: var(--bs-white);
}

.icon-btn-menu {
  width: 72px;
  height: 72px;
}

.text-btn-menu {
  font-weight: bold;
  font-size: 1.3em;
}

/* Variantes */
.card-category-outline-principal {
  border: 3px solid var(--bs-blue-light) !important;
  color: var(--bs-principal);
  background-color: var(--bs-white);
}

.card-category-outline-principal:is(:hover, :active,:focus) {
  border-color: var(--bs-violet) !important;
  color: var(--bs-principal);
  background-color: var(--bs-white) !important;
}

.card-category-outline-principal > .text-btn-menu {
  font-weight: normal;
}

/* Responsive card-fieldName */
.card-category-sm {
  width: 140px !important;
  height: 140px !important;
}

.card-category-sm > .icon-btn-menu {
  width: 60px !important;
  height: 60px !important;
}

.card-category-sm > .text-btn-menu {
  font-size: 1em !important;
}

.card-category-md {
  width: 155px !important;
  height: 155px !important;
}

.card-category-md > .icon-btn-menu {
  width: 67px !important;
  height: 67px !important;
}

.card-category-md > .text-btn-menu {
  font-size: 1.05em !important;
}


/* Concept List */
.link-auxiliar:is(:active, :hover) {
  text-decoration: underline;
  cursor: pointer;
}