html {
  /* 1.6rem = 10px */
  font-size: 62.5%;
}

*,
div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 1.6rem;
  line-height: 2rem;
  font-family: $font_primary;
  font-weight: 400;
  position: relative;
}

.container {
  max-width: 140rem;
  width: 100%;
  margin: 0 auto;
  padding: 0rem;

  &__bx {
    padding: 0 2rem;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;

    @media(max-width: $md) {
      flex-flow: column;
    }
  }
}

.wrapper{
  margin: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;

  .header{
    height: 15.8rem;
    position: sticky;
    top: 0;
    z-index: 9999;
    padding: 1rem 0;

    @media(max-width: $md) {
      height: 12rem;
    }

  }

  .main{
    flex: 1;
    overflow-y: auto;
  }
}


a {
  display: inline-block;
}

a,
button {
  cursor: pointer;
}

img {
  display: block;
  width: 100%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}


strong,
b {
  font-weight: 700;
}

i,
em {
  font-style: italic;
}

ul,
ol {
  display: flex;
  width: 100%;
  padding-left: 2rem;
  margin-bottom: 2.4rem;
  flex-flow: column;
  gap: 2rem;

  li {
    margin-bottom: 0;

    img{
      margin-top: 2rem;
    }
  }
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

.tippy-box[data-theme~='custom-tooltip'] {
  background-color: $white;
  color: #00504E;
  border: 2px solid #00504E;
  border-radius: 1.6rem;
  padding: 2rem;
  box-shadow: 0px 4px 4px 0px #00000040;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 130%;
  letter-spacing: 0%;
  max-width: 26.9rem!important;

  .tippy-content{
    padding: 0;
  }

  > .tippy-arrow::before {
    content: '';
    border-style: solid;
  }
}


/* Direcció: bottom (tooltip a sobre de l’element) */
.tippy-box[data-theme~='custom-tooltip'][data-placement^='top'] > .tippy-arrow::before {
  border-width: 8px 8px 0 8px;
  border-color: #e9e9e9 transparent transparent transparent;
}

/* Contorn de la fletxa (efecte border) */
.tippy-box[data-theme~='custom-tooltip'][data-placement^='top'] > .tippy-arrow {
  color: #0f4f4f; /* contorn */
}

.tippy-box[data-theme~='custom-tooltip']::after {
  content: '';
  position: absolute;

  top: 16px;
  right: -8px;

  width: 1.2rem;
  height: 1.2rem;

  background: $white;
  border-top: .2rem solid #0f4f4f;
  border-right: .2rem solid #0f4f4f;

  transform: rotate(45deg);
}

//type 2
.tippy-box[data-theme~='custom-tooltip2'] {
  background-color: $white;
  color: #00504E;
  border: 2px solid #00504E;
  border-radius: 1.6rem;
  padding: 2rem;
  box-shadow: 0px 4px 4px 0px #00000040;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 130%;
  letter-spacing: 0%;
  max-width: 26.9rem!important;

  .tippy-content{
    padding: 0;
  }

  > .tippy-arrow::before {
    content: '';
    border-style: solid;
  }
}


/* Direcció: bottom (tooltip a sobre de l’element) */
.tippy-box[data-theme~='custom-tooltip2'][data-placement^='top'] > .tippy-arrow::before {
  border-width: 8px 8px 0 8px;
  border-color: #e9e9e9 transparent transparent transparent;
}

/* Contorn de la fletxa (efecte border) */
.tippy-box[data-theme~='custom-tooltip2'][data-placement^='top'] > .tippy-arrow {
  color: #0f4f4f; /* contorn */
}

.tippy-box[data-theme~='custom-tooltip2']::after {
  content: "";
  position: absolute;
  top: -0.9rem;
  right: 4.6rem;
  width: 1.2rem;
  height: 1.2rem;
  background: #fff;
  border-top: 0.2rem solid #0f4f4f;
  border-right: 0.2rem solid #0f4f4f;
  transform: rotate(-45deg);
}

.btn {
  font-family: $font_primary;
  font-weight: 600;
  font-size: 2rem;
  line-height: 100%;
  letter-spacing: 2%;
  text-align: left;
  text-transform: uppercase;
  padding: 2.4rem 7rem 2.4rem 3rem;
  border-radius: 3.2rem;
  border: .3rem solid #00504E;
  color: $white;
  text-decoration: none;
  border-radius: 2rem;
  background-color: #00504E;
  background-image: url('../imgs/btn-arrow.png');
  background-size: 3.6rem;
  background-repeat: no-repeat;
  background-position: center right 1.6rem;

  &--full{
    width: 100%;
  }

  &--light{
    background-color: #CCDCDC;
    border-color: #CCDCDC;
    color: #00504E;
  }

  &--submit{
    background-image: none;
    text-align: center;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 100%;
    text-transform: uppercase;
    padding: 2.1rem 3.2rem;
  }

  &--icon{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    font-size: 1.6rem;
    padding: 1.6rem 3.2rem;
    background-image: none;

    img{
      max-width: 3rem;
    }
  }
}


p {
  margin-bottom: 2rem;

  &:last-child {
    margin-bottom: 0;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  display: block;
  width: 100%;
  font-weight: 600;
}

/* Overlay pantalla completa */
.loading-screen {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.loading-text {
    font-size: 2rem;
    font-weight: 700;
    color: #00504E;
    position: relative;
}

.dots{
  position: absolute;
  margin-left: .2rem;

  &::after {
    content: '';
    display: inline-block;
    animation: dots 1.5s steps(3, end) infinite;
  }
}

@keyframes dots {
    0%   { content: ''; }
    33%  { content: '.'; }
    66%  { content: '..'; }
    100% { content: '...'; }
}

.mdl-error {
  padding: 22.3rem 0;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 150%;
  letter-spacing: 5%;
  text-align: center;

  .container {
    max-width: 64.5rem;

    &__bx {
      justify-content: center;
    }
  }

  span {
    display: block;
    font-family: "Flama Trial", sans-serif;
    font-weight: 500;
    font-size: 9rem;
    line-height: 100%;
    letter-spacing: -2%;
    text-align: center;
    color: $orange01;
    margin-bottom: .8rem;
  }

  h1 {
    font-weight: 500;
    font-size: 2.8rem;
    line-height: 130%;
    text-align: center;
    color: $orange03;
    margin-bottom: 2.4rem;
  }

  p {
    display: block;
    width: 100%;
    margin-bottom: 0;
  }

  a {
    color: $green01;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 140%;
    letter-spacing: 2%;
    text-align: center;
    text-decoration: underline;
    text-decoration-style: solid;
    text-underline-offset: 0%;
    text-decoration-thickness: 0%;
  }
}

.mdl-home{
  padding: 4rem;
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  // background-color: rgb(0, 91, 153);
  background: #02596387;

  @media(max-width: $md) {
    padding: 8rem 1.6rem;
  }

  &__logo{
    position: absolute;
    left: 4rem;
    top: 4rem;
    z-index: 9;

    @media(max-width: $md){
      left: 2rem;
      top: 2rem;
    }

    img{
      max-width: 7.6rem;

      @media(max-width: $lg){
        max-width: 4rem;
      }
    }
  }

  &__language{
    position: absolute;
    right: 4rem;
    top: 4rem;
    z-index: 9;

    @media(max-width: $md){
      right: 2rem;
      top: 2rem;
    }
  }

  &__language-select{
    min-width: 14rem;
    height: 4rem;
    border: 0.1rem solid rgba(255, 255, 255, 0.65);
    border-radius: 0.8rem;
    background-color: rgba(0, 80, 78, 0.7);
    color: $white;
    font-size: 1.4rem;
    font-weight: 600;
    padding: 0 3.2rem 0 1.2rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;

    &:focus{
      outline: 0.2rem solid rgba(255, 255, 255, 0.85);
      outline-offset: 0.2rem;
    }
  }

  &__bg{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    // opacity: 0.2;
    background-size: cover;
    background-position: center;
    z-index: -1;

    img{
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
}

.mdl-home--hero {
  padding: 4rem 6rem;
  justify-content: flex-start;

  @media(max-width: $lg) {
    padding: 6rem 4rem 6rem;
  }

  @media(max-width: $md) {
    padding: 6rem 2rem 6rem;
  }
}

.mdl-home__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 127.2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 49.9rem;
  gap: 3.2rem;
  align-items: start;
  padding-top: 4.7rem;

  @media(max-width: $lg) {
    grid-template-columns: 1fr;
    padding-top: 0;
  }

}

.mdl-home__hero {
  color: $white;
  padding-top: 8rem;
  max-width: 53.6rem;

  @media(max-width: $xl){
    max-width: 100%;
  }

  @media(max-width: $lg){
    padding-top: 4rem;
  }

  h1 {
    font-weight: 800;
    font-size: 7rem;
    line-height: 8rem;
    text-transform: uppercase;

    @media(max-width: $xl) {
      font-size: 5rem;
      line-height: 6rem;
    }

    @media(max-width: $md) {
      font-size: 3.2rem;
      line-height: 3.8rem;
    }
  }

  h2{
    font-weight: 500;
    font-size: 3.7rem;
    line-height: 120%;

    @media(max-width: $xl) {
     font-size: 2.6rem;
    }

    @media(max-width: $md) {
     font-size: 2.2rem;
    }
  }

}

.mdl-home__divider {
  display: block;
  width: 100%;
  height: 1.2rem;
  background: #00504E;
  margin: 4rem 0 2.6rem;

  @media(max-width: $md) {
    margin: 2rem 0;
  }
}

.mdl-home__panel {
  display: grid;
  gap: 7.3rem;
  align-items: start;
  margin-right: 2.3rem;
  position: relative;
}

.home-panel {
  background: $white;
  border-radius: 0;
  padding: 2rem;
  // box-shadow: 0 2rem 4rem rgba(15, 23, 42, 0.15);
  position: relative;
  z-index: 99;
  box-shadow: 2.1rem 2.1rem 0px 0px #00504E;

  // &::after{
  //   content: '';
  //   position: absolute;
  //   top: 2.3rem;
  //   left: 2.3rem;
  //   width: 100%;
  //   height: 100%;
  //   background-color: #00504E;
  //   z-index: -1;
  // }

  // &::before{
  //   content: '';
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 100%;
  //   background-color: $white;
  //   z-index: 9;
  // }

  &--green{
    box-shadow: 2.1rem 2.1rem 0px 0px $white;
    background-color: #00504E;
    // &:after{
    //   background-color: $white;
    // }

    // &:before{
    //   background-color: #00504E;
    // }
  }

  &__cn{
    position: relative;
    width: 100%;
    z-index: 99;
  }


  &__header{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.6rem;

    h2{
      font-weight: 700;
      font-size: 1.8rem;
      line-height: 100%;
      text-transform: uppercase;
      color: #00504E;
    }
  }

  &__selector,
  &__repo{
    display: flex;
    gap: 2rem;
    flex-direction: column;

    h3{
      display: flex;
      gap: 1.1rem;
      font-weight: 500;
      font-size: 1.6rem;
      line-height: 100%;
      color: #00504E;
      align-items: center;

      img{
        max-width: 3.6rem;
      }
    }
  }

  &__divider{
    height: .1rem;
    background: #00504E33;
    margin: 3.2rem 0;
  }

  &__repo{
    margin-bottom: 1.8rem;
  }

  &__filters{
    gap: 4.4rem;
    display: flex;
    align-items: center;

    @media(max-width: $md){
      flex-flow: column;
      gap: 2rem;
      align-items: flex-start;
    }

    > div{
      @media(max-width: $md){
        width: 100%;
      }

    }
  }
}

.home-panel__icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999rem;
  border: 0.1rem solid #cbd5f5;
  background: #f8fafc;
  color: #0f172a;
  font-weight: 700;
}

.home-panel__label {
  display: block;
  font-size: 1.2rem;
  color: #475569;
  margin-bottom: 0.6rem;
}

.home-panel__select {
  width: 100%;
  border-radius: 1.2rem;
  border: 0.1rem solid #e2e8f0;
  padding: 1rem 1.2rem;
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
  background: $white;
}

.home-panel__select.is-small {
  max-width: 12rem;
}

.home-panel__primary {
  width: 100%;
  border: none;
  background: #0f3b3a;
  color: $white;
  border-radius: 1.6rem;
  padding: 1.2rem 1.6rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}

.home-panel__primary.is-ghost {
  background: #e2eceb;
  color: #0f3b3a;
  margin-bottom: 0;
}

.home-progress {
  color: $white;
  border-radius: 1.6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10.6rem;
  align-items: center;
  gap: 1.6rem;

  @media(max-width: $md){
    display: flex;
    flex-flow: column;
    align-items: flex-start;
  }

  > div{
    @media(max-width: $md){
      width: 100%;
    }

  }

  &__title {
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 100%;
    margin-bottom: 2.1rem;
  }

  &__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0;
    background: #FFFFFF4D;
    border-radius: 1rem;
    padding: 1.4rem 1.5rem 1.4rem 2rem;
    font-size: 1.4rem;
    line-height: 2rem;
   
    @media(max-width: $md){
      width: 100%;
    }

    li {
        display: flex;
        align-items: center;
        gap: 1rem;
        color: $white;
        margin: 0;

        strong {
          margin-left: auto;
          white-space: nowrap;
        }

        &:nth-child(1){
          font-weight: 700;
        }
    }
  }
}

.home-progress__community {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.home-progress__chart {
  width: 10.6rem;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;

  @media(max-width: $md){
    width: 100%;
  }
}

[data-exam-no-copy] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mdl-repo {
  position: relative;
  // min-height: 100vh;
  overflow: hidden;
  background-color: $white;
  display: grid;
  gap: 6.4rem;
  padding: 0 2.4rem;

  @media(max-width: $xl){
    gap: 4rem;
  }

  &__content {
    max-width: 72.4rem;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    padding-bottom: 19.6rem;

    @media(max-width: $xl){
      padding-bottom: 4rem;
    }
  }

  &__content-intro{
    display: grid;
    gap: 1.1rem;
    margin-bottom: 2rem;
    font-size: 1.4rem;
    line-height: 100%;
    text-align: justify;

    h3{
      font-weight: 700;
      font-size: 1.4rem;
      line-height: 100%;
      color: #00504E;
    }

  }

  &__intro{
    // margin: 3.8rem 6.4rem auto 6.4rem;
    margin: 0 auto;
    margin-top: 3.8rem;
    border: 4px solid #CCDCDC;
    padding: 3.4rem 3.8rem 3.9rem 3.3rem;
    display: flex;
    flex-flow: column;
    gap: 1.1rem;
    max-width: 78rem;
    width: 100%;

    @media(max-width: $xl){
      padding: 2rem;
      margin-top: 2rem;
    }

    h2{
      color: #00504E;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 1.8rem;
      line-height: 100%;
    }

    p{
      margin-bottom: 0;
    }
  }
}

.repo-table {
  display: grid;
  gap: 0.4rem;
  font-size: 1.4rem;
  color: #000;

  &__head {
    font-weight: 500;
    color: #0f3b3a;
    border-bottom: .1rem solid #00504E33
  }

  &__head,
  &__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12rem 8rem;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 0;
  }

  &__row {
    border-bottom: 0.1rem solid #00504E33;
  }

  &__download {
    border: 0;
    background-color: transparent;
    padding: 0;

    img{
      max-width: 2.4rem;
    }
  }


}

.repo-filter {
  color: $white;
  display: grid;
  gap: 1.5rem;

  &__title {
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 1rem;
  }

  &__select {
    width: 100%;
    max-width: 23.4rem;
  }

  .btn{
    width: 100%;
    max-width: 25.3rem;
    background-image: url("../imgs/btn-arrow-green.png")!important;
    width: 25.3rem;
  }
}

.repo-filter .select2-container {
  max-width: 23.4rem !important;
}

.footer--repo {
  margin-top: 4rem;
  color: $white;

  a {
    color: $white;
  }
}



.card {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 51.6rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding-bottom: 2.4rem;

  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 2.4rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ---------- HEADER ---------- */

.card-header {
  padding: 2.4rem 2.4rem 0 2.4rem;
  text-align: center;
  display: grid;
  gap: .6rem;
}

.card-icon-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 1.6rem;
}

.card-icon {
  position: relative;
  padding: 10;
  border-radius: 2.4rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
  box-shadow: 0 8px 24px rgba(227, 6, 19, 0.3);
  max-width: 8rem;
  max-height: 8rem;
}


/* ---------- TEXT ---------- */

.card-title {
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(to right, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  color: transparent;
  line-height: 3.6rem;
  margin-bottom: .8rem;
}

.card-info {
  padding-top: 1.6rem;
  margin-bottom: .8rem;
  color: rgb(26, 26, 46);
}

.card-subtitle {
  font-weight: 700;
  margin-bottom: .4rem;
  font-size: 2rem;
  line-height: 2.8rem;
}

.card-unit {
  font-size: 2.4rem;
  line-height: 2.8rem;
  font-weight: 700;
  margin-bottom: .4rem;
}

.card-description {
  padding-top: 2.4rem;
  font-size: 1.4rem;
  color: #6b7280;
}

.card-unit-select {

}

.select2-container {
    width: 100% !important;
    max-width: 100%;
}

.select2-selection {
    width: 100% !important;
}

.select2-container--default .select2-selection--single{
  border-radius: 2.5rem;
  border-radius: 2.5rem !important;
  border-color: #005B99 !important;
  height: 4rem !important;
  display: flex !important;
  padding: .5rem 2rem !important;
  border: 5px solid #9C9C9C33 !important;
  height: 6.3rem !important;
  align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
  color: $black!important;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.6rem !important;
  letter-spacing: 0%;
}


.select2-container .select2-selection--single .select2-selection__rendered{
  white-space: normal!important;
  padding-left: 0 !important;
  text-align: left;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 6.3rem!important;
  right: 2rem!important;
  width: 2.4rem !important;
  background-image: url('../imgs/icon-select.png');
  background-size: 2.4rem;
  background-position: center;
  background-repeat: no-repeat;

  b{
    display: none!important;
  }
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
  background-color: #00504E!important;
}

.select2-results{
  ul{
    li{
      margin: 0!important;
      color: #00504E;
    }
  }
}

.select2-results__options{
  display: block;
}


/* ---------- CONTENT ---------- */

.card-content {
  padding: 0 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.card-input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.card-input-group label {
  font-weight: 500;
  font-size: 1.6rem;
  color: rgb(26, 26, 46);
}

.card-input-group input {
  width: 6.4rem;
  height: 3.6rem;
  text-align: center;
  font-size: 1.8rem;
  background: $white;
  border: 1px solid #e5e7eb;
  border-radius: 1.6rem;
  padding: .8rem 1.2rem;
  transition: all 0.2s ease;
  color: rgb(26, 26, 46);
  font-family: $font_primary;
}

.card-input-group input:hover {
  border-color: rgba(227, 6, 19, 0.4);
  box-shadow: 0 4px 16px rgba(227, 6, 19, 0.1);
}

/* ---------- BUTTON ---------- */

.card-button {
  width: 100%;
  height: 4rem;
  border-radius: 1.6rem;
  border: none;
  cursor: pointer;

  font-family: $font_primary;
  font-weight: 500;
  color: $white;
  background: linear-gradient(to right, var(--primary), var(--secondary));
  box-shadow: 0 4px 20px rgba(227, 6, 19, 0.3);
  font-size: 1.4rem;
  line-height: 2rem;

  transition: all 0.2s ease;
}

.main{
  // min-height: 100dvh;
  padding: 0 2rem;
  display: grid;
  width: 100%;
  gap: 2.4rem;

  &__footer{
    max-width: 144.3rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-left: 17.1rem;
    margin-top: 4rem;
    margin-bottom: 4rem;

    @media(max-width: 1440px){
      padding-left: 0;
    }
  }
}

.mdl-unit__progress {
  padding: 2.4rem;
  border-radius: 2.4rem;

  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 30px rgba(15, 35, 60, 0.1);
  max-width: 84.6rem;
  margin: 0 auto;
  width: 100%;
}

/* ---------- HEADER ---------- */

.mdl-unit__progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  color: #64748b; /* slate-500 */
  margin-bottom: 1.6rem;
}

.mdl-unit__progress-info {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: rgb(26, 26, 46)
}

.mdl-unit__progress-dot {
  display: inline-flex;
  width:  2rem;
  height: 2rem;
}

.mdl-unit__progress-percent {
  color: rgb(107, 114, 128); /*slate04*/
  display: block;
  text-align: right;
  font-size: 1.4rem;
  line-height: 2rem;
}

/* ---------- BAR ---------- */

.mdl-unit__progress-bar {
  // margin-top: 1.2rem;
  width: 100%;
  height: 0.8rem;
  border-radius: 999px;
  background-color: #005b9933; /* slate-100 */
  overflow: hidden;
  margin-bottom: .8rem;
}

.mdl-unit__progress-bar-fill {
  height: 100%;
  border-radius: 999px;

  background: linear-gradient(
    to right,
    #1f4f9c,
    #0a6aa4
  );

  transition: width 0.3s ease;
}

.mdl-unit__nav {
  padding: 2.4rem 1.6rem;
  border-radius: 2.4rem;

  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(15, 35, 60, 0.1);
  max-width: 84.6rem;
  margin: 0 auto;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---------- LIST ---------- */

.mdl-unit__nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}

/* ---------- BUTTON BASE ---------- */

.mdl-unit__nav-btn {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  font-size: 1.4rem;
  font-weight: 500;
  background: #F1F5F9;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: $font_primary;
}

/* Hover */
.mdl-unit__nav-btn:hover {
  border-color: rgba(31, 79, 156, 0.4);
}

/* ---------- ACTIVE STATE ---------- */

.mdl-unit__nav-btn--active {
  border: none;
  color: white;

  background: linear-gradient(
    90deg,
    #ef4444,
    #1f4f9c
  );

  box-shadow: 0 4px 12px rgba(31, 79, 156, 0.3);
}

/* ---------- CARD BASE ---------- */

.mdl-unit{
  &__question {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;

    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(24px);

    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 2.4rem;

    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    max-width: 84.6rem;
    margin: 0 auto;
    margin-bottom: 0;
    width: 100%;
  }

  &__question-header {
    padding: 2.4rem 2.4rem 0;
    display: grid;
    gap: .6rem;
  }

  &__question-tag {
    background: #005B99;
    color: white;
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0.2rem 0.8rem;
    border-radius: 1.6rem;
    width: fit-content;
    display: flex;
    align-self: flex-end;
    margin: 0 0 0.8rem auto;
  }

  &__question-title {
    font-size: 2rem;
    line-height: 3.25rem;
    font-weight: 500;

    @media(max-width: $md) {
      font-size: 1.6rem;
      line-height: 140%;
    }
  }

  &__question-content {
    padding: 0 2.4rem 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
  }
}

/*TEXTAREA*/
.mdl-unit-question-text {
  display: flex;
  flex-direction: column;

  &__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.4rem; /* text-sm */
    font-weight: 500; /* font-medium */
    line-height: 1;
    user-select: none;
    margin-bottom: .8rem
  }

  &__textarea {
    width: 100%;
    min-height: 150px;
    padding: 0.8rem 1.2rem;
    font-size: 1.4rem;
    border-radius: 1rem;
    border: .1rem solid transparent;
    background-color: rgb(249, 249, 251);
    resize: none;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: $font_primary;
    color: rgb(26, 26, 46);
    font-size: 1.4rem;
    line-height: 2rem;
    margin-bottom: .8rem;

    &::placeholder{
      color: #6B7280;
    }

    &:focus-visible{
      border-color: rgb(0, 91, 153);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  &__help {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    color: #6b7280;
  }

  &__icon {
    width: 1.6rem;
    height: 1.6rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    &--secondary {
      color: #005B99;
    }
  }
}

/**/
.mdl-unit-question-options {
  display: grid;
  gap: 1.2rem;

  &__option {
    position: relative;
    margin-bottom: 1.2rem;
    width: 100%;
  }

  &__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  &__label {
    display: flex;
    // align-items: center;
    padding: 1.6rem;
    border: 1px solid #e5e7eb; /* border-gray-200 */
    border-radius: 1rem; /* rounded-2xl */
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.4rem;

    &:hover {
      border-color: #4E0383;
      box-shadow: 0 4px 16px 0 rgba(78, 3, 131, 0.15);
    }
  }

  &__control {
    width: 2rem;
    height: 2rem;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
    margin-top: .2rem;

    &::after {
      content: "";
      position: absolute;
      inset: 4px;
      background-color: rgb(227, 6, 19);
      border-radius: 50%;
      transform: scale(0);
      transition: transform 0.2s ease;
    }

  }

  &__text {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2.2rem;
    margin-left: 1.2rem;
  }
}

.mdl-unit-question-options__control
/* Checked state */
.mdl-unit-question-options__input:checked + .mdl-unit-question-options__label {
  // border-color: #4E0383;
  // box-shadow: 0 4px 16px 0 rgba(78, 3, 131, 0.15);
}

// .mdl-unit-question-options__input:checked + .mdl-unit-question-options__label .mdl-unit-question-options__control {
//   border-color: #4E0383;
// }

.mdl-unit-question-options__input:checked + .mdl-unit-question-options__label .mdl-unit-question-options__control::after {
  transform: scale(1);
}

/* Focus state (keyboard accessibility) */
.mdl-unit-question-options__input:focus-visible + .mdl-unit-question-options__label {
  box-shadow: 0 0 0 3px rgba(78, 3, 131, 0.3);
}

/**/

.mdl-unit-question-multiple {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Option wrapper */
.mdl-unit-question-multiple__option {
  position: relative;
  width: 100%;
}

/* Hide native checkbox but keep accessibility */
.mdl-unit-question-multiple__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Card style label */
.mdl-unit-question-multiple__label {
  display: flex;
  // align-items: center;
  gap: 0.75rem;
  padding: 1.6rem;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;

  // @media(max-width: $md) {
  //   flex-direction: column;
  //   align-items: flex-start;
  // }
}

/* Hover */
.mdl-unit-question-multiple__label:hover {
  border-color: #005B99;
  box-shadow: 0 4px 16px 0 rgba(0, 91, 153, 0.15);
}

/* Checkbox square */
.mdl-unit-question-multiple__control {
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  background: #ffffff;
  margin-top: .2rem;
}

/* SVG check */
.mdl-unit-question-multiple__icon {
  width: 14px;
  height: 14px;
  stroke: #ffffff;
  stroke-width: 3;
  fill: none;
  transform: scale(0);
  transition: transform 0.2s ease;
}

/* Checked state */
// .mdl-unit-question-multiple__input:checked + .mdl-unit-question-multiple__label {
//   border-color: #005B99;
//   box-shadow: 0 4px 16px 0 rgba(0, 91, 153, 0.15);
// }

.mdl-unit-question-multiple__input:checked + .mdl-unit-question-multiple__label .mdl-unit-question-multiple__control {
  background-color: rgb(227, 6, 19);
  border-color: rgb(227, 6, 19);
}

.mdl-unit-question-multiple__input:checked + .mdl-unit-question-multiple__label .mdl-unit-question-multiple__icon {
  transform: scale(1);
}

/* Focus visible */
.mdl-unit-question-multiple__input:focus-visible + .mdl-unit-question-multiple__label {
  box-shadow: 0 0 0 3px rgba(0, 91, 153, 0.3);
}

/* Text */
.mdl-unit-question-multiple__text {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2.2rem;
}

/* Disabled state */
.mdl-unit-question-multiple__input:disabled + .mdl-unit-question-multiple__label {
  opacity: 0.5;
  cursor: not-allowed;
}

/**/

.mdl-unit__answers {
  display: grid;
  gap: 1.6rem;
}

.mdl-unit__answer {
  display: flex;
  align-items: center;
  gap: 1.2rem;

  padding: 1.6rem;
  border-radius: 1.6rem;
  border: 1px solid #e5e7eb;
  background: white;

  cursor: pointer;
  transition: all 0.2s ease;
}

.mdl-unit__answer:hover {
  border-color: rgba(78, 3, 131, 0.4);
  box-shadow: 0 4px 16px rgba(78, 3, 131, 0.15);
}

/* ---------- RADIO ---------- */

.mdl-unit__radio {
  width: 1.25rem;
  height: 1.25rem;

  border-radius: 50%;
  border: 2px solid #d1d5db;
  background: white;

  flex-shrink: 0;
  cursor: pointer;
}

/* Estado seleccionado opcional */
.mdl-unit-question-options__-checked {
  border-color: #005B99;
  background: radial-gradient(#005B99 50%, white 52%);
}

/* ---------- ACTIONS ---------- */

.mdl-unit__question-actions {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid #e5e7eb;
}

/* ---------- QUESTION BUTTON ---------- */

.mdl-unit__question-btn {
  border-radius: 1.6rem;
  border: 2px solid rgba(0,0,0,.1);

  font-size: 1.6rem;
  font-weight: 500;

  cursor: pointer;
  transition: all 0.2s ease;
  font-family: $font_primary;

  padding: .8rem 1.6rem;
  background-color: transparent;

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  &--secondary {
    background: $white;
    border-color: #e5e7eb;

    &:hover:not(:disabled) {
      background: #f3f4f6;
    }
  }

  &--primary {
    margin-left: auto;
    color: white;
    background: linear-gradient(to right, #E30613, #005B99);
    box-shadow: 0 4px 20px rgba(227, 6, 19, 0.3);
    padding: .9rem 1.7rem;
    border: 0;

    &:hover:not(:disabled) {
      opacity: 0.9;
    }
  }
}


/* =========================
   CONTENEDOR PRINCIPAL
========================= */

.mdl-final-feedback {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;

  backdrop-filter: blur(40px);
  background: rgba(255, 255, 255, 0.7);

  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 2.4rem;

  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);

  color: #1f2937;

  max-width: 89.4rem;
  margin: 0 auto;
}

/* =========================
   HEADER
========================= */

.mdl-final-feedback__header {
  padding: 2.4rem 2.4rem 0 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.mdl-final-feedback__title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  line-height: 1;

  img{
    max-width: 2.4rem;
  }
}

.mdl-final-feedback__description {
  color: #6b7280;
  font-size: 1.6rem;
  margin: 0;
}


/* =========================
   CONTENT
========================= */

.mdl-final-feedback__content {
  padding: 0 2.4rem 2.4rem 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}


/* =========================
   QUESTION BLOCK
========================= */

.mdl-final-feedback__question {
  padding-top: 0.8rem;
  display: flex;
  width: 100%;
  flex-flow: row;
  gap: 1.2rem;
}

.mdl-final-feedback__question + .mdl-final-feedback__question {
  border-top: 1px solid #e5e7eb;
  padding-top: 2.4rem;
}


/* =========================
   QUESTION HEADER
========================= */

.mdl-final-feedback__question-header {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  width: calc(100% - 3.6rem);
}

.mdl-final-feedback__status-icon {
  margin-top: 0.4rem;
  flex-shrink: 0;

  img{
    max-width: 2.4rem;
  }
}

.mdl-final-feedback__question-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.mdl-final-feedback__question-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.6rem;

  @media(max-width: $md) {
    flex-direction: column-reverse;
  }
}

.mdl-final-feedback__question-text {
  font-weight: 500;
  margin: 0;
  font-size: 1.6rem;
  line-height: 2.4rem;
}


/* =========================
   BADGE
========================= */

.mdl-final-feedback__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 1.2rem;
  font-weight: 500;

  padding: .2rem 0.8rem;

  border-radius: 1rem;
  white-space: nowrap;
  flex-shrink: 0;

  background-color: #00A63E;
  color: $white;

  @media(max-width: $md) {
    margin: 0 0 0 auto;
  }

}

.mdl-final-feedback__badge--error {
  background: #dc2626;
}


/* =========================
   ANSWER BOX
========================= */

.mdl-final-feedback__answer-box {
  background: #f8fafc;
  border: .2rem solid #e5e7eb;
  border-radius: 1.2rem;
  padding: 1.6rem;
  font-size: 1.6rem;
  gap: .9rem;
  display: flex;
  flex-flow: column;
  line-height: 2rem;
  font-size: 1.4rem;

  p{
    margin: 0;
  }
}

/* =========================
   FEEDBACK BOX
========================= */

.mdl-final-feedback__feedback-box {
  background: #F0FDF4;
  border: 2px solid #7BF1A8;
  border-radius: 1.2rem;
  padding: 1.6rem;
  line-height: 2rem;
  font-size: 1.4rem;

  &--ko{
    background: #faf5ff;
    border: 2px solid #d8b4fe;
  }
}

.mdl-final-feedback__feedback-title {
  margin-bottom: 0.4rem;
  gap: .4rem;
  display: flex;
  align-items: center;

  img{
    max-width: 1.6rem;
  }
}

.mdl-final-feedback__feedback-text {
  color: #6b7280;
  margin: 0;
}

/* =========================================================
   COMPONENT: mdl-feedback-analysis
========================================================= */

.mdl-feedback-analysis {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;

  backdrop-filter: blur(40px);
  background: rgba(255, 255, 255, 0.7);

  border: 0.0625rem solid rgba(255, 255, 255, 0.4);
  border-radius: 2.4rem;

  box-shadow: 0 0.8rem 3.2rem rgba(31, 38, 135, 0.15);
  color: #1f2937;

  max-width: 89.6rem;
  width: 100%;
  margin: 0 auto;
}

/* HEADER */

.mdl-feedback-analysis__header {
  padding: 2.4rem 2.4rem 0 2.4rem;
  display: grid;
  gap: 0.6rem;
}

.mdl-feedback-analysis__title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  line-height: 1;

  img{
    max-width: 2.4rem;
  }
}

.mdl-feedback-analysis__description {
  font-size: 1.4rem;
  color: #6b7280;
  margin: 0;
}

/* CONTENT */

.mdl-feedback-analysis__content {
  padding: 0 2.4rem 2.4rem 2.4rem;
  display: flex;
  flex-direction: column;
}

/* CHART */

.mdl-feedback-analysis__chart {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;

  canvas{
    max-width: 30rem!important;
    width: 100%!important;
  }

}

/* DIMENSIONS */

.mdl-feedback-analysis__dimensions {
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.mdl-feedback-analysis__dimension {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 1.2rem;
  background: #f8fafc;

  border: 0.0625rem solid #e2e8f0;
  border-radius: 1.2rem;

  @media(max-width: $md) {
    flex-flow: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

.mdl-feedback-analysis__dimension-left {
  display: flex;
  align-items: center;
  gap: 1.2rem;

  @media(max-width: $md) {
    width: 100%;
  }
}

.mdl-feedback-analysis__dimension-badge {
  width: 3.2rem;
  height: 3.2rem;

  border-radius: 50%;
  background: #005B99;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 700;
  font-size: 1.4rem;
}

.mdl-feedback-analysis__dimension-label {
  font-size: 1.4rem;
  font-weight: 500;
}

.mdl-feedback-analysis__dimension-right {
  display: flex;
  align-items: center;
  gap: 0.8rem;

  @media(max-width: $md) {
    width: 100%;
    justify-content: space-between;
  }
}

/* PROGRESS */

.mdl-feedback-analysis__progress {
  width: 12.8rem;
  height: 0.8rem;

  background: #e5e7eb;
  border-radius: 999rem;
  overflow: hidden;

  @media(max-width: $md) {
    width: 100%;
  }
}

.mdl-feedback-analysis__progress-bar {
  height: 100%;
  background: #005B99;
  border-radius: 999rem;
  transition: width 0.3s ease;
}

/* PERCENTAGE */

.mdl-feedback-analysis__percentage {
  font-size: 1.4rem;
  font-weight: 700;
  min-width: 4.5rem;
  text-align: right;
}

.mdl-feedback-analysis__percentage.is-primary {
  color: #E30613;
}

.mdl-feedback-analysis__percentage.is-warning {
  color: #ca8a04;
}

.mdl-feedback-analysis__percentage.is-success {
  color: #00A63E;
}

/* =========================================================
   COMPONENT: mdl-feedback-complete
========================================================= */

.mdl-feedback-complete {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;

  backdrop-filter: blur(40px);
  background: rgba(255, 255, 255, 0.7);

  border: 0.0625rem solid rgba(255, 255, 255, 0.4);
  border-radius: 2.4rem;

  box-shadow: 0 0.8rem 3.2rem rgba(31, 38, 135, 0.15);
  color: #1f2937;

  max-width: 89.6rem;
  margin: 0 auto;
  width: 100%;
}

/* ================= HEADER ================= */

.mdl-feedback-complete__header {
  padding: 2.4rem 2.4rem 0 2.4rem;
  text-align: center;

  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: center;
}

/* Trophy container */
.mdl-feedback-complete__trophy {
  padding: 2.4rem;
  border-radius: 50%;

  background: linear-gradient(to bottom right, var(--primary), var(--secondary));
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.15);

  display: flex;
  justify-content: center;
  align-items: center;

  margin-bottom: .8rem;
}

.mdl-feedback-complete__trophy svg {
  width: 6.4rem;
  height: 6.4rem;
  color: #fff;
}

/* Subtitle */

.mdl-feedback-complete__subtitle {
  font-size: 1.8rem;
  color: #6b7280;
  margin-bottom: .8rem;
}

/* Title gradient */

.mdl-feedback-complete__title {
  font-size: 3.6rem;
  line-height: 4rem;
  font-weight: 400;

  background: linear-gradient(to right, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  @media(max-width: $md) {
    font-size: 2.4rem;
    line-height: 2.8rem;
  }
}

/* ================= CONTENT ================= */

.mdl-feedback-complete__content {
  padding: 0 2.4rem 2.4rem 2.4rem;

  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

/* ================= SCORE BLOCK ================= */

.mdl-feedback-complete__score-block {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.mdl-feedback-complete__score {
    font-size: 6rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 6rem;
    margin-bottom: 1.6rem;

    @media(max-width: $md) {
      font-size: 4rem;
      line-height: 4rem;
    }

    &--medium{
      color: #D08700;
    }

    &--perfect{
      color: #00A63E;
    }
}

.mdl-feedback-complete__correct-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;

  font-size: 2rem;
  line-height: 2.8rem;
  color: #1A1A2E;

  img{
    max-width: 2.4rem;
  }
}

/* ================= PROGRESS ================= */

.mdl-feedback-complete__progress {
  width: 100%;
  height: 1.2rem;
  background: rgba(227, 6, 19,.2);
  border-radius: 999rem;
  overflow: hidden;
  position: relative;

  &--medium{
    background: rgba(208, 135, 0, .2);
  }

  &--perfect{
    background: rgba(0, 166, 62, .2);
  }

}



.mdl-feedback-complete__progress-bar {
  height: 100%;
  width: 100%;
  background: var(--primary);
  transition: transform 0.3s ease;

  &--medium{
    background: rgb(208, 135, 0);
  }

  &--perfect{
    background: rgb(0, 166, 62);
  }
}

/* ================= STATS GRID ================= */

.mdl-feedback-complete__stats {
  display: grid;
  gap: 1.6rem;
  padding-top: 1.6rem;
}

@media (min-width: 640px) {
  .mdl-feedback-complete__stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mdl-feedback-complete__stat {
  padding: 1.6rem;
  text-align: center;
  border-radius: 1.2rem;
  border: 0.125rem solid;
}

/* Variant backgrounds */

.mdl-feedback-complete__stat--total {
  background: linear-gradient(to bottom right, #eff6ff, #e0e7ff);
  border-color: rgba(59, 130, 246, 0.3);
}

.mdl-feedback-complete__stat--correct {
  background: linear-gradient(to bottom right, #ecfdf5, #d1fae5);
  border-color: #86efac;

  .mdl-feedback-complete__stat-number{
    color: #00A63E;
  }
}

.mdl-feedback-complete__stat--incorrect {
  background: linear-gradient(to bottom right, #fef2f2, #ffe4e6);
  border-color: #fca5a5;

  .mdl-feedback-complete__stat-number{
    color: #E30613;
  }

}

.mdl-feedback-complete__stat-number {
  font-size: 2.4rem;
  font-weight: 700;
  color: #1E2A5E;
  line-height: 3.2rem;
}

.mdl-feedback-complete__stat-label {
  font-size: 1.4rem;
  color: #6b7280;
}

/* ================= BUTTONS ================= */

.mdl-feedback-complete__actions {
  display: flex;
  gap: 1.6rem;

  @media(max-width: $md) {
    flex-direction: column;

  }
}

.mdl-feedback-complete__button {
  font-family: $font_primary;
  flex: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;

  height: 4rem;
  padding: 1rem 2.4rem;

  font-size: 1.4rem;
  font-weight: 600;
  line-height: 2rem;

  border-radius: 1.6rem;
  border: none;
  cursor: pointer;

  background: linear-gradient(to right, var(--primary), var(--secondary));
  color: #fff;

  box-shadow: 0 0.4rem 2rem rgba(227, 6, 19, 0.3);
  transition: all 0.2s ease;

  gap: 2rem;

  img{
    max-width: 1.6rem;
  }

}

.mdl-feedback-complete__button:hover {
  opacity: 0.9;
  transform: translateY(-0.1rem);
}

.toastify.float-notifications{
  background: $white;
  color: $black;
  font-size: 1.3rem;
  line-height: 1.95rem;
  font-family: $font_primary;
  border-radius: .8rem;
  border: .1rem solid rgba(0,0,0,.1);
  padding: 1.7rem 10.4rem 1.7rem 1.4rem;
  font-weight: 500;

  @media(max-width: $md){
    padding: 1.7rem 1.4rem;
  }

  span{
    background-image: url('../imgs/icon-check.png');
    background-size: 1.6rem;
    background-repeat: no-repeat;
    background-position: left center;
    min-height: 1.6rem;
    padding-left: 2.6rem;
  }
}

/* ========================= */
/*   COMPONENT: exam layout  */
/* ========================= */

.exam-layout {
  display: grid;
  // grid-template-columns: minmax(0, 1fr) 28rem;
  gap: 2.4rem;
  align-items: start;
  max-width: 144.3rem;
  margin: 0 auto;
  // padding-left: 12.1rem;
  display: flex;
  flex-flow: column;
  position: relative;
  width: 100%;
  padding-left: 17.1rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;

  @media(max-width: 1440px){
    padding-left: 0;
  }

  @media(max-width: $lg) {
    grid-template-columns: 1fr;
  }

  &--fb,
  &--repo{


  }

}

.exam-paper {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 92.3rem;
  padding-top: 5.4rem;
  -webkit-box-shadow: 2.1rem 2.1rem 0px 0px #00504E;
  box-shadow: 2.1rem 2.1rem 0px 0px #00504E;

  @media(max-width: $lg){
    padding-top: 4rem;
  }

  &:before{
    content: '';
    position: absolute;
    inset: 0;
    background: white;
    pointer-events: none;
    width: calc(100% - 5.4rem);
    right: 0;
    height: 5.4rem;
    top: 0;
    left: auto;
    z-index: 9;

    @media(max-width: $lg){
      height: 4rem;
      width: calc(100% - 4rem);
    }
  }

  &:after{
    content: '';
    background-image: url('../imgs/icon-paper.png');
    width: 5.4rem;
    height: 5.4rem;
    display: block;
    top: 0;
    position: absolute;
    z-index: 9;
    left: 0;
    background-size: 5.4rem;

    @media(max-width: $lg){
      height: 4rem;
      width: 4rem;
      background-size: 4rem;
    }
  }

  &__content{
    background-color: $white;
    padding-top: 3.8rem;
    padding: 3.8rem 2rem;

    @media(max-width: $lg){
      padding: 2rem;
    }
  }

  &__header {
    border: 4px solid #CCDCDC;
    background-color: $white;
    padding: 3.4rem 3.8rem 3.8rem 3.3rem;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2.2rem;
    letter-spacing: 0%;
    text-align: justify;
    // margin: 3.8rem 6.4rem 5.8rem;
    margin: 0 auto;
    margin-top: 3.8rem;
    margin-bottom: 5.8rem;
    max-width: 78rem;

    @media(max-width: $xl){
      margin-bottom: 4rem;
      margin-top: 0;
      padding: 2rem;
    }

    h2 {
      font-weight: 700;
      font-size: 1.8rem;
      line-height: 2.4rem;
      text-transform: uppercase;
      color: #00504E;
      margin-bottom: 1.1rem;
    }

  }

  &__body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2.4rem;
    // padding: 0 10rem;
    font-weight: 400;
    font-size: 1.4rem;
    text-align: justify;
    width: 100%;
    max-width: 72.4rem;
    margin: 0 auto;

    .btn{
      margin: 3.6rem auto 6rem;
      background-image: none;
      text-align: center;
      width: fit-content;
      padding: 2.1rem 3.2rem;

      @media(max-width: $lg){
        margin: 0 auto;
      }
    }


    ol {
      li{
        &::marker {
          content: counter(list-item, lower-alpha) ") ";
        }
      }
    }

    h1, h2, h3, h4, h5, h6{
      color:#00504E;
    }

    h2, h3{
      font-weight: 700;
      font-size: 1.4rem;
      line-height: 2rem;
    }

    p,
    li {
      line-height: 2.2rem;
    }

  }
}

.img-auto{
  width: auto;
  margin: 0 auto 2rem;
}


.exam-question {
  display: grid;
  gap: 1.3rem;
}

.exam-question__number {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0f172a;
}

.exam-question__statement {
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: #0f172a;
  margin-bottom: 1.6rem;
}

.exam-question__clickable {
  cursor: pointer !important;
  display: inline-block;
  line-height: 2.2rem;
}

.exam-question__clickable * {
  cursor: pointer !important;
  line-height: 2.2rem;
}

.exam-question__clickable--editor:hover,
.exam-question__clickable--editor:hover * {
  font-weight: 700;
}

.exam-answer-block {
  width: 100%;
  border-radius: 1.2rem;
  border: 0.1rem dashed rgba(0, 91, 153, 0.4);
  padding: 1.6rem;
  background: rgba(0, 91, 153, 0.05);
  text-align: left;
  min-height: 8rem;
  transition: all 0.2s ease;
  margin-top: 2rem;
}

.exam-answer-block:hover {
  border-color: rgba(0, 91, 153, 0.7);
  background: rgba(0, 91, 153, 0.08);
}

.exam-answer-block__placeholder {
  color: #64748b;
  font-size: 1.4rem;
}

.exam-answer-block__text {
  color: #0f172a;
  font-size: 1.4rem;
  line-height: 2.1rem;

  p {
    margin: 0 0 1rem;
  }

  ul,
  ol {
    display: block;
    margin: 0 0 1rem;
    padding-left: 2rem;
    gap: 0;
  }

  li {
    margin: 0.4rem 0;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
  }

  th,
  td {
    border: 1px solid #cbd5e1;
    padding: 0.6rem;
    vertical-align: top;
  }
}

.match-dropzone {
  min-height: 2.8rem;
}

.exam-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  background: #0f3b3a;
  color: $white;
  border-radius: 0;
  padding: 3.8rem 2.4rem 3.2rem;
  display: grid;
  gap: 7.7rem;
  box-shadow: 0 2rem 3.2rem rgba(15, 23, 42, 0.2);
  font-size: 1.4rem;
  line-height: 120%;
  color: $white;

  -webkit-box-shadow: 2.1rem 2.1rem 0px 0px $white;
  box-shadow: 2.1rem 2.1rem 0px 0px $white;

  position: sticky;
  top: 0;
  width: 300px;
  height: fit-content;

  @media(max-width: $lg) {
    // display: none;
    box-shadow: none;

    &.js-open{
      // display: block;
      position: absolute;
      z-index: 99;
    }

    &.menu {
      display: block;
      position: fixed;
      top: 12rem;
      right: 0;
      width: 100%;
      height: 100vh;
      padding-top: 2rem;

      transform: translateX(100%);
      transition: transform 0.3s ease;
      z-index: 1000;
      max-height: calc(100dvh - 12rem);
      overflow-y: auto;
      opacity: 0;

      &.js-open {
        transform: translateX(0);
        opacity: 1;
      }
    }

  }

  &__title {
    font-size: 1.4rem;
    line-height: 120%;
    color: $white;
    max-width: 19.2rem;

    @media(max-width: $lg){
      max-width: 100%;  
    }
  }

  &__list {
    display: grid;
    gap: 4rem;

    @media(max-width: $lg){
      gap: 2rem;
      margin-bottom: 2rem;
    }
  }

  &__item {
    display: grid;
    grid-template-columns: 1fr 2.4rem;
    gap: 1.8rem;
    border-radius: 1.2rem;
    color: $white;
    text-align: left;
    transition: all 0.2s ease;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-family: $font_primary;


    &.is-done {
      .exam-sidebar{
        &__item-status {
          background-image: url('../imgs/icons/icon-check-ok.png');
          background-size: 2.4rem;
          background-position: center;
          background-repeat: no-repeat;
        }
      }
    }

  }

  &__item-text{
    width: 100%;
    max-width: 19.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    @media(max-width: $lg){
      max-width: 100%;  
    }
  }

  &__item-status {
    width: 2.4rem;
    height: 2.4rem;
  }

  .btn{
    background-image: none;
    padding: 2.1rem 3.2rem;
    background-color: #CCDCDC;
    color: #00504E;
    font-size: 1.6rem;
    border-color: #CCDCDC;
  }
}

// .exam-sidebar__item-number {
//   width: 2.4rem;
//   height: 2.4rem;
//   border-radius: 999rem;
//   background: rgba(255, 255, 255, 0.2);
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   font-weight: 600;
//   font-size: 1.2rem;
// }

// .exam-sidebar__item-text {
//   font-size: 1.3rem;
// }



.exam-sidebar__submit {
  background: $white;
  color: #0f3b3a;
  border: none;
  border-radius: 1.6rem;
  padding: 1.2rem 1.6rem;
  font-weight: 600;
  font-size: 1.4rem;
  transition: all 0.2s ease;
}

.exam-sidebar__submit:hover {
  transform: translateY(-0.1rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

/* ========================= */
/*     COMPONENT: modal      */
/* ========================= */

.exam-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20000;
  padding: 2rem;
}

.exam-modal.is-hidden {
  display: none;
}

.exam-modal__panel {
  background: $white;
  width: min(76.1rem, 100%);
  border-radius: 2rem;
  padding: 7.2rem 5.4rem 6rem;
  box-shadow: 0 2.4rem 4.8rem rgba(15, 23, 42, 0.3);
  display: grid;
  gap: 2.2rem;
  position: relative;

  @media(max-width: $md){
    padding: 2rem;
  }
}

.exam-modal__panel--confirm {
  width: min(56rem, 100%);
  padding: 4.8rem 4.2rem 3.8rem;

  @media(max-width: $md){
    padding: 2rem;
  }
}

.exam-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  h3 {
    font-size: 2rem;
    line-height: 100%;
    color: #00504E;
    margin: 0;
    text-transform: uppercase;
  }
}

.exam-modal__close {
  border: none;
  background: transparent;
  width: 2.4rem;
  height: 2.4rem;
  position: absolute;
  top: 4rem;
  right: 4rem;
  background-image: url('../imgs/icons/x-mark.png');
  background-size: 2.4rem;
  background-repeat: no-repeat;
  background-position: center;

  @media(max-width: $md){
    top: 1rem;
    right: 1rem;
  }
}

.exam-modal__helper {
  font-size: 1.4rem;
  line-height: 2.2rem;
  margin: 0;
  color: $black;
}

.exam-editor {
  border: 0.1rem solid rgba(15, 23, 42, 0.15);
  border-radius: 1.2rem;
  overflow: visible;
}

.exam-editor__content {
  min-height: 18rem;
  padding: 1.4rem;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #0f172a;
  outline: none;
  width: 100%;
  border: 0;
  resize: vertical;
}

.exam-editor .tox-tinymce {
  border: 0;
  border-radius: 1.2rem;
}

.exam-editor .tox .tox-toolbar__group {
  padding: 0 .6rem;
}

.exam-editor .tox .tox-edit-area__iframe {
  background: #fff;
}

.exam-modal__actions {
  display: flex;
  justify-content: flex-start;
}

.exam-modal__actions--confirm {
  justify-content: flex-end;
  gap: 1.2rem;
}

.exam-modal__cancel,
.exam-modal__submit {
  min-width: 24rem;
  border-radius: 2rem;
  padding: 2.1rem 3.2rem;
  font-family: $font_primary;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 100%;
  text-align: center;
  text-transform: uppercase;
  border: .3rem solid transparent;
  transition: all 0.2s ease;
}

.exam-modal__cancel {
  background: #CCDCDC;
  border-color: #CCDCDC;
  color: #00504E;
}

.exam-modal__submit {
  background: #0f3b3a;
  border-color: #0f3b3a;
  color: $white;
}

.exam-modal__cancel:hover,
.exam-modal__submit:hover {
  transform: translateY(-0.1rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

/* ========================= */
/*   COMPONENT: feedback     */
/* ========================= */

.feedback{
  background-color: $white;
  padding: 6.4rem;
  // display: grid;
  display: flex;
  gap: 4.8rem;
  align-items: flex-start;
  flex-flow: column;

  @media(max-width: $xl){
    gap: 4rem;
    padding: 2rem;
  }
}

.feedback-summary {
  background: $white;
  border-radius: 2.4rem;
  padding: 3.4rem 3.2rem 4rem;
  display: grid;
  gap: 3.7rem;
  max-width: 79.5rem;
  width: 100%;
  border: .4rem solid #CCDCDC;
  border-radius: 0;

  @media(max-width: $md){
   padding: 2rem;
  }
}

.feedback-summary__score {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 3.1rem;
  align-items: center;

  @media(max-width: $md) {
    grid-template-columns: 1fr;
  }
}

.feedback-summary__score-circle {
  width: 12rem;
  height: 12rem;
  border-radius: 999rem;
  background: #00504E33;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 3.6rem;
  color: #00504E;
  line-height: 100%;
  text-transform: uppercase;
}

.feedback-summary__title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.8rem;
  color: #00504E;
  letter-spacing: 0%;
  text-transform: uppercase;
  margin-bottom: 0;
  margin-bottom: .5rem;
}

.feedback-summary__text {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.8rem;
  color: $black;
  margin: 0;
}

.feedback-summary__bar {
  margin-top: 2.1rem;
  width: 100%;
  height: 1rem;
  border-radius: 999rem;
  background: #9C9C9C33;
  overflow: hidden;

  span {
    display: block;
    height: 100%;
    background: #00504E;
  }
}

.feedback-summary__actions {
  display: grid;
  gap: 2.8rem;
  flex-wrap: wrap;
  grid-template-columns: repeat(2,1fr);

  @media(max-width: $md){
    grid-template-columns: 1fr;
  }

  .btn{
    width: 100%;
  }

}

.feedback-summary__button {
  border: none;
  background: #0f3b3a;
  color: $white;
  padding: 1.2rem 2.4rem;
  border-radius: 1.6rem;
  font-weight: 600;
  font-size: 1.3rem;
}

.feedback-summary__button.is-ghost {
  background: #e2eceb;
  color: #0f3b3a;
}

.feedback-detail {
  border-radius: 0;
  padding: 0 4rem;
  width: 100%;

  @media(max-width: $xl){
    padding: 0;
  }

  &__header {
    margin-bottom: 3.7rem;
    gap: 2.4rem;
    display: grid;

    h3 {
      font-weight: 700;
      font-size: 1.4rem;
      line-height: 100%;
      text-transform: uppercase;
      color: #00504E;
    }

    p {
      font-size: 1.4rem;
      line-height: 100%;
      text-align: justify;
      color: $black;
    }
  }
}

.feedback-detail__list {
  display: grid;
  gap: 2rem;
}

.feedback-card {
  display: grid;
  gap: 1rem;

  &__question {
    display: -webkit-box;
    -webkit-line-clamp: 1; /* canvia a 2 o 3 si vols */
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-top: .8rem;

    &.expanded {
      -webkit-line-clamp: unset;
    }
  }

  &.is-expanded {
    .feedback-card__block {
      display: block;
    }
  }
}

.feedback-card__question-label {
  font-weight: 700;
  margin-right: 0.6rem;
}

.feedback-card__question-text {
  font-weight: 600;
  line-height: 1.35;
}

.feedback-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .7rem;
}

.feedback-card__title {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.35;
  color: #00504E;
  flex: 1;
}

.feedback-card__icon {
  display: flex;

  img{
    max-width: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    min-width: 3rem;
  }
}

.feedback-card__link {
  border: none;
  background: #CCDCDC;
  color: #00504E;
  border-radius: 999rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: $font_primary;
  text-transform: uppercase;
}

.feedback-card__result {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 2rem;
  padding: 2rem;
  color: $black;
  font-size: 1.4rem;
  line-height: 2rem;

  &.is-correct{
    border: 1px solid #2ECC71;
    background: #2ECC7140;
  }

  &.is-pending{
    background: #F39C1240;
    border: 1px solid #F39C12
  }

  &.is-wrong{
    background: #E21A2340;
    border: 1px solid #E21A23;
  }

}

.feedback-card__block {
  display: none;
  border-radius: 2rem;
  padding: 2rem 2.4rem;
  font-size: 1.4rem;
  line-height: 2.4rem;
  background: #fff;
  border: 1px solid #CCDCDC;
  color: #000;

}

.feedback-card__block-section {
  display: grid;
  gap: 1.2rem;
}

.feedback-card__block-title {
  font-weight: 700;
  margin: 1rem 0 0.6rem;
}

.feedback-card__block-item {
  margin: 0;
  line-height: 1.65;

  p {
    margin: 0 0 0.8rem;
  }

  p:last-child {
    margin-bottom: 0;
  }
}

.feedback-card__match {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-top: 0.8rem;
}

.feedback-card__match-col {
  display: grid;
  gap: 0.6rem;
}

.feedback-card__match-row {
  padding: 0.6rem 0.8rem;
  border: 1px solid #CCDCDC;
  border-radius: 0.8rem;
  background: #f7faf9;
}

.feedback-card__badge {
  padding: 0.5rem 2rem;
  border-radius: 999rem;
  color: $white;
  font-weight: 700;
  font-size: 1rem;
  line-height: 100%;
  text-align: center;

  &.is-correct {
    background: #2ECC71;
  }

  &.is-wrong {
    background: #E21A23;
  }

  &.is-pending {
    background: #F39C12;
  }

}

.feedback-card__score {
  color: #000;

  strong{
    font-weight: 600;
  }
}

.feedback-card__answer {
  border-radius: 2rem;
  padding: 1.6rem 2rem;
  font-size: 1.4rem;
  background: #CCDCDC40;
  border: 1px solid #CCDCDC;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2rem;
  text-align: justify;

  &.is-correct {
    border-color: #86efac;
    background: #f0fdf4;
  }

}

.feedback-card__answer-text{
  font-style: italic;

  .feedback-card__answer-lines {
    display: grid;
    gap: 0.35rem;
  }

  .feedback-card__answer-line {
    line-height: 1.6;
  }

  .feedback-card__answer-line.is-relation {
    padding-left: 1.4rem;
  }

  ol {
      li{
        background-position: right top;
        background-repeat: no-repeat;
        background-size: 2rem;
        padding-right: 6rem;
        padding-left: 1.1rem;

        &::marker {
          content: counter(list-item, lower-alpha) ") ";
          font-weight: 700;
          font-style: normal;
        }

        &.is-wrong{
          background-image: url('../imgs/icons/icon-answer-is-wrong.png');
        }

        &.is-pending{
          background-image: url('../imgs/icons/icon-answer-is-pending.png');
        }
         &.is-correct{
          background-image: url('../imgs/icons/icon-answer-is-correct.png');
        }
      }
    }

  p {
    margin: 0 0 1rem;
  }

  ul,
  ol {
    display: block;
    margin: 0 0 1rem;
    padding-left: 2rem;
    gap: 0;
  }

  li {
    margin: 0.4rem 0;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-style: normal;
  }

  th,
  td {
    border: 1px solid #cbd5e1;
    padding: 0.6rem;
    vertical-align: top;
    font-style: normal;
  }

}

.feedback-card__feedback {
  border: 1px solid #3498DB;
  background: #3498DB40;
  padding: 2.3rem 2rem 2.1rem;
  border-radius: 2rem;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #000;
  display: grid;
  gap: 1rem;

  p{
    margin: 0;
  }
}

.match-widget{
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 2rem; 
  margin-top: 1rem;

  @media(max-width: $md){
    grid-template-columns: 1fr;
  }
}

.match-dropzone{
  min-height: 2.8rem; 
  padding: 0.6rem 0.8rem; 
  border: 1px dashed rgba(15, 23, 42, 0.2); 
  border-radius: 0.8rem;
}

.match-option{
  padding: 0.6rem 0.8rem; 
  margin-bottom: 0.8rem; 
  border: 1px solid rgba(15, 23, 42, 0.15); 
  border-radius: 0.8rem; 
  background: $white; 
  cursor: grab;

  &.is-used{
    opacity: 0.45;
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.1);
  }
}