:root {
  --color-ia: #ff00db;
  --color-ia-medium-light: #ff53e8;
  --color-ia-medium: #db01be;
  --color-ia-dark: #811c73;
  --color-ia-light: #ffdbfa;
  --color-ia-RGB: 255, 0, 219;
  --azul-1-20: rgba(2, 86, 242, 0.2);
}

body {
  .btn {
    &.btn-ia {
      display: flex;
      align-items: center;
      gap: 4px;
      border: 2px solid var(--color-ia) !important;
      text-shadow: none !important;
      &.disabled{
        filter: grayscale(1);
      }
      &:not(.outline){
        font-weight: 400;
        background-color: var(--color-ia) !important;
        color: white !important;
        svg{
          fill: white;
        }
        &:hover{
          box-shadow: inset 5px 0 0 var(--color-ia-medium-light),
            inset -5px 0 0 var(--color-ia-medium-light),
            inset 0 5px 0 var(--color-ia-medium-light),
            inset 0 -5px 0 var(--color-ia-medium-light) !important;
          }
        }
        &:hover {
          border-color: var(--color-ia-medium) !important;
        }
      svg {
        width: 20px;
        height: 14px;
        transform: translateY(0);
      }
      &.outline{
        font-weight: 500;
        color: var(--color-ia) !important;
        background-color: white !important;
        svg{
          fill: var(--color-ia) !important;
        }
        &:hover{
          box-shadow: inset 5px 0 0 var(--color-ia-light),
            inset -5px 0 0 var(--color-ia-light),
            inset 0 5px 0 var(--color-ia-light),
            inset 0 -5px 0 var(--color-ia-light) !important;
        }
      }
    }
  }
  .icon-ia{
    margin-inline-start: 6px;
    width: 27px;
    height: 22px;
  }
  .icon-ia-btn{
    height: 20px;
    height: 14px;
  }
  .label-ia {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    transform: translateY(-2px);
    &:not(.loading){
      svg{
        width: 22px;
        height: 18px;
      }
    }
    &.loading {
      svg{
        width: 34px;
        height: 18px;
      }
    }
  }
  .alert-ia{
    position: relative;
    border: 2px solid var(--color-ia-medium-light);
    outline: 2px solid var(--color-ia-light) !important;
    background-color: rgba(var(--color-ia-RGB), 0.02);
    padding: 16px;
    padding-inline-end: 50px;
    color: var(--color-ia-dark);
    max-width: max-content;
    .title{
      font-family: var(--font-2);
      font-size: 17px;
      margin: 0;
      &.subtitle{
        font-size: 16px;
      }
    }
    .icon-ia{
      position: absolute;
      top: 10px;
      right: 10px;
    }
    &.small{
      padding: 12px;
      padding-inline-end: 50px;
      .title{
        font-size: 15px;
        &.subtitle{
          font-size: 14px;
        }
      }
    }
    .icon-ia {
      margin-inline-start: 6px;
      width: 34px;
      height: 18px;
    }
  }


  .mega-menu {
    grid-template-columns: 250px 250px max-content;
    .mega-menu__links{
      max-height: max-content;
      overflow-y: visible;
    }
    li {
      position: relative;
      &.generate-ia {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        a:not(.generate-ia) {
          width: 100%;
          z-index: 2;
          &:hover {
            background: none;
            & + .generate-ia {
              &:before{
                background-color: #eef3f7;
              }
              opacity: 1;
              .txt {
                opacity: 1;
                transform: translateX(0) scale(1);
              }
            }
          }
        }
        .generate-ia {
          min-width: max-content;
          font-size: 11px;
          color: var(--color-ia);
          padding-block: 8px;
          padding-inline: 0 16px;
          z-index: 1;
          opacity: 0.5;
          .content {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 4px;
            .txt {
              font-family: var(--font-2);
              color: var(--gris-1);
              text-transform: uppercase;
              opacity: 0;
              transform: translateX(20px) scale(0.8);
              transform-origin: center right;
              transition: all 0.1s ease-in-out;
            }
            .tooltip-ia{
              padding: 10px;
              width: 240px;
              background-color: white;
              box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12);
              border: 2px solid var(--color-ia);
              position: absolute;
              z-index: 2;
              right: 0;
              font-size: 12px;
              line-height: 135%;
              opacity: 0;
              pointer-events: none;
              transform: scale(0.25);
              transition: all 0.15s ease-in-out;
              &:after{
                content:"";
                position: absolute;
                z-index: 0;
                right: 4px;
                border-right: 6px solid transparent;
                border-left: 6px solid transparent;
              }
              &.top{
                bottom: calc(100% + 3px);
                transform-origin: bottom right;
                &:after{
                  top: 100%;
                  border-bottom: 6px solid transparent;
                  border-top: 6px solid var(--color-ia-medium-light);
                }
              }
              &.bottom{
                top: calc(100% + 3px);
                transform-origin: top right;
                &:after{
                  bottom: 100%;
                  border-top: 6px solid transparent;
                  border-bottom: 6px solid var(--color-ia-medium-light);
                }  
              }
            }
          }
          &:after,
          &:before{
            pointer-events: none;
            position: absolute;
            z-index: 0;
            content: "";
            top: 0;
            right: 0;
            height: 100%;
            transition: all 0.25s ease-in;
          }
          &:before{
            width: 100%;
          }
          &:after {
            width: 10%;
            transform-origin: center right;
          }
          &:hover {
            opacity: 1;
            background: none;
            z-index: 3;
            .txt {
              color: var(--color-ia);
              opacity: 1;
              transform: translateX(0) scale(1);
            }
            .tooltip-ia{
              opacity: 1;
              transform: scale(1);
            }
            &:after {
              width: 100%;
              background-color: rgba(var(--color-ia-RGB),0.15);
            }
          }
        }
      }
    }
  }
  .li-actividades-campus{
    &.actividadarbolselected{
      .enlace-actividades{
        &.progreso-ia{
          .container-titulo-actividad {
            .i-titulo,
            .titulo-actividad,
            .label-ia {
              opacity: 1;
            }
          }
        }
      }
    }
    .enlace-actividades {
      &.progreso-ia {
        &:hover{
          .container-titulo-actividad {
            .i-titulo,
            .titulo-actividad {
              opacity: 1;
            }
          }
        }
        .container-titulo-actividad {
          .i-titulo,
          .titulo-actividad {
            opacity: 0.4;
          }
        }
      }
      .container-titulo-actividad {
        flex-wrap: nowrap;
        width: 100%;
        justify-content: space-between;
        gap: 6px;
        .titulo-actividad {
          padding: 0;
          width: 100%;
          max-width: 100% !important;
          min-width: 0;
        }
      }
    }
  }
  .container-buttons-actividad {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 16px;
    .container-butons-new {
      display: flex;
      justify-content: flex-end;
      align-items: stretch;
      gap: 10px;
    }
  }
  
  .generate-ia.title {
    padding-inline-start: 10px;
    display: inline-flex;
    gap: 4px;
    align-items: flex-end;
    font-size: 12px;
    color: var(--color-ia);
    text-transform: uppercase;
  }

  .generate-ia-menu{
    line-height: 130%;
    display: grid;
    height: 100%;
    grid-template-columns: 400px 1fr;
    grid-template-rows: 1fr;
    .select-actividades-ia{
      overflow-y: scroll;
      max-height: calc(100dvh - 230px);
      background-color: var(--gris-5);
      padding-block: 20px 60px;
      padding-inline: 16px 30px;
      .title{
        font-size: 12px;
        font-weight: 400;
        margin: 0;
        & + .asignatura-actividades-ia{
          margin-block-start: 20px;
        }
      }
      .asignatura-actividades-ia{
        padding-inline-start: 8px;
        transition: all 0.2s ease-in-out;
        &.actual{
          .title-asignatura{
            .txt-collapse{
              font-weight: 900;
            }
          }
        }
        &.opened{
          .title-asignatura{
            .caret-collapse{
              transform: rotate(180deg);
            }
          }
        }
        &.closed{
          & + .asignatura-actividades-ia{
            margin-block-start: 16px;
          }
          .header-asignatura{
            .form-check-evol {
              input{
                pointer-events: none;
                &:not(:checked){
                  & + .txt{
                    &:after{
                      background-color: var(--gris-4);
                      border-color: var(--primario-2);
                    }
                  }
                }
                &:checked {
                  & + .txt{
                    &:after{
                      background-color: var(--primario-2);
                      border-color: var(--primario-2);
                    }
                  }
                }
              }
            }
            .caret-collapse{
              transform: rotate(0deg);
            }
          }
        }
        .header-asignatura{
          display: flex;
          align-items: flex-start;
          gap: 4px;
          .form-check-evol{
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .title-asignatura{
            position: relative;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            padding-inline-end: 22px;
            &:hover{
              color: var(--azul-1);
            }
            .count-actividades {
              margin-block-start: 6px;
              display: block;
              font-size: 11px;
              font-weight: 500;
              color: var(--azul-1);
              .numero{
                margin-right: 2px;
                line-height: 1;
                font-size: 12px;
                font-weight: 900;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                width: 18px;
                height: 18px;
                border-radius: 100px;
                background-color: white;
                &.tiene{
                  background-color: var(--azul-2);
                  color: white;
                }
              }
            }
            .caret-collapse{
              position: absolute;
              top: 0;
              right: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 6px;
              transform-origin: center center;
              transition: all 0.2s ease-in-out;
              &:hover{
                svg{
                  fill: var(--azul-1);
                }
              }
              svg{
                width: 16px;
                height: 16px;
              }
            }
          }
          & + .actividades-ia{
            margin-block-start: 10px;
          }
        }
        .actividades-ia{
          list-style: none;
          padding: 0;
          margin: 0;
          padding-inline-start: 32px;
          transform-origin: top center;
          transition: all 0.2s ease-in-out;
          li{
            & + li {
              margin-top: 8px;
            }
            .form-check-evol{
              input {

              }
            }
            .txt{
              font-family: var(--font-2);
              font-size: 14px;
              line-height: 130%;
              color: var(--primario-1);
              display: flex;
              gap: 8px;
              align-items: flex-end;
              svg{
                width: 18px;
                height: 18px;
                fill: var(--primario-1);
              }
              span{
              }
            }
          }
        }
        & + .asignatura-actividades-ia{
          margin-block-start: 16px;
          padding-block-start: 16px;
          border-block-start: 1px solid var(--gris-3);
        }
      }
    }
    .settings-actividad-ia{
      padding-block: 20px;
      padding-inline: 30px 16px;
      display: grid;
      grid-template-rows: 1fr 60px;
      .content-settings{
        .title-settings{
          font-size: 18px;
          font-weight: 700;
          margin: 0;
          & + *{
            margin-top: 20px;
          }
        }
        .settings{
          .title{
            margin: 0;
            font-size: 16px;
            font-weight: 500;
            & + .form-field-evol{
              margin-block-start: 16px;
            }
          }
          .form-field-evol{
            font-size: 15px;
            font-weight: 400;
          }
          & + .settings{
            padding-block-start: 16px;
            margin-block-start: 16px;
            border-block-start: 1px solid var(--gris-4);
          }
        }
      }
      .footer-settings{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        border-block-start: 2px solid var(--gris-4);
        .info{
          font-size: 11px;
          font-weight: 400;
          font-style: italic;
        }
      }
    }
  }
  .form-field-evol{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    cursor: pointer;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 120%;
    &.form-field-ia{
      input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
      select,
      textarea {
        &:hover{
          background-color: var(--color-ia-light);
        }
        &:focus{
          border-color: var(--color-ia);
          outline: 3px solid rgba(var(--color-ia-RGB),0.15) !important;
        }
      }
      .switch{
        input{
          &:checked + .slider,
          &:focus + .slider {
            background-color: var(--color-ia);
          }
        }
      }
    }
    input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
    select,
    textarea,
    .switch .slider{
      box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.12) !important;
    } 
    input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
    select,
    textarea{
      background-color: white;
      border: 2px solid var(--primario-2);
      &:hover{
        border-color: var(--gris-1);
        background-color: var(--azul-1-10);
      }
      &:focus{
        border-color: var(--azul-1);
        outline: 3px solid var(--azul-1-20) !important;
      }
    }
    input[type=number]{
      max-width: 100px;
      text-align: center;
    }
    input[type=search]{
      background-position: calc(100% - 8px) center;
      background-size: 18px;
      background-repeat: no-repeat;
      background-image: url(https://www.evolmind.com/wp-content/uploads/2024/10/search-gris.svg);
      &:focus{
        background-image: url(https://www.evolmind.com/wp-content/uploads/2024/10/search-azul.svg);
      }
      /* &:before{
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background: no-repeat center/contain url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"%3E%3Ccircle cx="11" cy="11" r="8"%3E%3C/circle%3E%3Cline x1="21" y1="21" x2="16.65" y2="16.65"%3E%3C/line%3E%3C/svg%3E');
        background-color: rgba(255, 0, 0, 0.5);
      } */
    }
    .switch {
      display: inline-flex;
      position: relative;
      width: 46px;
      height: 28px;
      &.small{
        width: 34px;
        height: 20px;
        .slider{
          &:before{
            top: 3px;
            width: 14px;
            height: 14px;
            left: 3px;
          }
        }
        input{
          &:checked + .slider:before{
            right: 3px;
          }
        }
      }
      input{
        opacity: 0;
        width: 0;
        height: 0;
        &:checked + .slider,
        &:focus + .slider {
          background-color: var(--azul-1);
        }
        &:not(:checked):focus + .slider{
          background-color: var(--gris-2);
        }
        &:checked + .slider:before{
          right: 4px;
          left: unset;
        }
      }
      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--gris-2);
        border-radius: 100px;
        transition: all 0.25s ease-in-out;
        &:before{
          position: absolute;
          content: "";
          height: 20px;
          width: 20px;
          top: 4px;
          left: 4px;
          right: unset;
          background-color: white;
          border-radius: 100px;
          transition: all 0.25s ease-in-out;
        }
      }
    }
  }
  .form-check-evol{
    position: relative;
    margin: 0;
    &.form-check-ia{
      input{
        &:not(:checked) + .txt:after {
          border: 2px solid var(--color-ia-medium-light);
        }
        &:checked + .txt:after{
          background-color: var(--color-ia);
        }
      }
    }
    input{
      &:not(:checked), 
      &:checked {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }
      & + .txt{
        position: relative;
        padding-inline-start: 30px;
        cursor: pointer;
        display: inline-block;
        user-select: none;
        &:after,
        &:before{
          content: '';
          left: 0;
          top: 0;
          position: absolute;
          transition: all 0.15s ease-in-out;
        }
        &:after{
          width: 20px;
          height: 20px;
          box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.12);
        }
      }
      &:not(:checked) + .txt:after {
        background-color: white;
        border: 2px solid var(--azul-2);
        top: 0px;
        z-index: 0;
      }
      &:checked + .txt:after{
        z-index: 1;
        background-color: var(--azul-1);
        border: 2px solid transparent;
      }
      &:not(:checked) + .txt:before{
        border-top: 2px solid transparent;
        border-left: 2px solid transparent;
        border-right: 2px solid white;
        border-bottom: 2px solid white;
        width: 1px;
        height: 1px;
        opacity: 0;
      }
      &:checked + .txt:before{
        z-index: 2;
        top: 2px;
        left: 1px;
        width: 8px;
        height: 13px;
        border-top: 2px solid transparent;
        border-left: 2px solid transparent;
        border-right: 2px solid white;
        border-bottom: 2px solid white;
        transform: rotateZ(37deg);
        transform-origin: 100% 100%;
      }
    }
  }
  .form-file-evol-inline{
    display: flex;
    align-items: center;
    line-height: 1;
    background-color: white;
    &.lleno{
      span{
        color: var(--primario-2);
      }
    }
    input{
      display: none;
    }
    label,
    span{
      display: flex;
      align-items: center;
    }
    label{
      min-width: max-content;
      gap: 6px;
      font-size: 14px;
      font-weight: 400;
      color: var(--azul-1);
      margin: 0;
      cursor: pointer;
      padding: 8px 20px;
      transition: all 0.15s ease-in-out;
      border: 2px solid var(--gris-3);
      background-color: white;
      svg{
        fill: var(--azul-1);
        width: 20px;
        height: 20px;
      }
      &:hover{
        border-color: var(--azul-1);
        outline: 3px solid var(--azul-1-20) !important;
      }
    }
    span{
      font-size: 12px;
      color: var(--gris-2);
      border: 1px solid var(--gris-3);
      border-left: none;
      align-self: stretch;
      width: -webkit-fill-available;
      padding: 10px;
      user-select: none;
    }
  }

  .container-ajustes-actividad{
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .ajustes-actividad{
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    .ajuste-actividad{
      margin-block-end: 0;
      margin-block-start: 0;
      .headerevol {
        margin: 0;
        & + * {
          margin-block-start: 16px;
        }
      }
      & + .ajuste-actividad{
        /* padding-block-start: 1px;
        margin-block-start: 15px; */
      }
      .actions-ajustes{
        &.actions-ajustes-actividad-ia{
          & + .actions-ajustes-actividad-ia{

          }
          .btn{
            & + .alert-ia {
              margin-block-start: 16px;
            }
          }
        }
      }
    }
    .grupo-ajustes-actividad{
      display: grid;
      gap: 20px;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      .ajuste-actividad{
        
      }
    }
  }

  * + .resultados-transcripcion{
    margin-top: 16px;
  }

  .resultados-transcripcion{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--font-2);
    line-height: 110%;
    position: relative;
    background-color: var(--gris-5);
    padding: 12px;
    .datos-resultado-transcripcion{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
    }
    .title{
      color: var(--gris-1);
      font-weight: 400;
    }
    .resultado-transcripcion{
      display: flex;
      align-items: center;
      gap: 6px;
      svg{
        width: 22px;
        height: 22px;
        fill: var(--primario-2);
      }
      .numero{
        font-weight: 700;
      }
      .txt{

      }
      & + .resultado-transcripcion{
        padding-inline-start: 16px;
        border-inline-start: 1px solid var(--gris-3);
      }
    } 
    .btn-revisar{
      font-size: 14px;
      display: flex;
      gap: 6px;
      align-items: center;
      svg{
        width: 16px;
        height: 16px;
      }
    }
  }

  .header {
    &.headerevol{
      &.headerevol-ia{
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 6px;
        svg{
          width: 26px;
          height: 22px;
        }
      }
    }
  }

  .container-capitulos,
  .container-transcripciones{
    height: 100%;
    .capitulo,
    .transcripcion{
      position: relative;
      cursor: pointer;
      font-family: var(--font-3);
      color: var(--primario-1);
      font-size: 14px;
      padding: 10px;
      border-block-start: 1px dashed transparent;
      text-wrap: pretty;
      &.actual{
        background-color: var(--gris-5);
      }
      &.edited{
        background-color: rgba(0, 0, 0, 0.05);
        pointer-events: none;
        .edicion-texto{
          pointer-events: all;
        }
        .minuto{
          color: var(--gris-1);
        }
      }
      &.disabled{
        opacity: 0.5;
        pointer-events: none;
      }
      &:not(.actual):not(:hover) + .capitulo,
      &:not(.actual):not(:hover) + .transcripcion{
        border-block-start: 1px dashed var(--gris-2);
      }
      &:not(.edited):hover{
        border-block-start: 1px dashed transparent !important;
        background-color: var(--azul-1-10);
        .actions-transcription{
          display: flex;
        }
        .minuto{
          text-decoration: underline;
        }
      }
      .minuto{
        color: var(--azul-2);
        font-weight: 700;
      }
      .texto{
        font-weight: 400;
        font-family: var(--font-1);
      }
      .actions-transcription{
        display: none;
        align-items: center;
        gap: 6px;
        position: absolute;
        font-family: var(--font-2);
        transition: all 0.15s ease-in-out;
        .action{
          padding-block: 2px;
          padding-inline: 6px;
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 12px;
          font-weight: 500;
          line-height: 1;
          svg {
            width: 10px;
            height: 10px;
          }
          &.editar{
            color: var(--azul-1);
            svg {
              fill: var(--azul-1);
            }
          }
          &.eliminar{
            color: var(--danger-1);
            svg {
              fill: var(--danger-1);
            }
          }
          & + .action{
            border-inline-start: 1px solid var(--gris-2);
          }
        }
      }
      .edicion-texto{
        position: relative;
        display: flex;
        gap: 6px;
        .input{
          width: 100%;
          outline: none !important;
          box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.12);
          border: 2px solid var(--gris-3);
          font-family: var(--font-1);
          font-size: 13.5px;
          color: var(--primario-1);
          line-height: 150%;
          &:focus{
            border-color: var(--azul-1);
          }
        }
        textarea{
          height: 100%;
        }
        .actions-text{
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 6px;
          .btn{

          }
        }
      }
    }
  }

  .actividad-aula{
    container-name: containerActividadAula;
    container-type: inline-size;
  }
  
  .visualizar-actividad-video-transcripcion{
    display: grid;
    gap: 20px;
    transition: all 0.2s ease-in-out;

    @container containerActividadAula (min-width: 993px){
      grid-template-columns: 1fr 360px;
      grid-template-rows: 78dvh;
      &.collapsed {
        grid-template-columns: 1fr 40px;
        grid-template-rows: 1fr;
        .container-transcripciones-capitulos{
          .nav-tabs-campus{
            overflow: hidden;
            border: none;
            li:not(.container-collapse-menu){
              display: none;
            }
          }
          .tab-content{
            display: none;
          }
        }
      }
    }

    @container containerActividadAula (max-width: 992px){
      grid-template-rows: 1fr 50dvh;
    }
    
    .container-video{
      max-width: 134dvh;
      height: max-content;
      .video-container{

      }
      .descarga-multimedia-btn{

      }
    }
    .container-transcripciones-capitulos{
      display: grid;
      grid-template-rows: max-content 1fr;
      .nav-tabs-campus{
        padding-inline-start: 0;
        .container-collapse-menu{
          & + li a{
            &:before{
              display: none;
            }
          }
          .collapse-menu{
            padding: 6px;
            @container containerActividadAula (max-width: 992px){
              display: none;
            }
            a{
              display: flex;
              justify-content: center;
              align-items: center;
              height: 40px;
              width: 40px;
            }
            svg{
              width: 20px;
              height: 20px;
              margin: 0;
              transform-origin: center center;
              fill: var(--gris-2);
              transform: none;
            }
            &.collapsed{
              svg{
                transform: rotate(180deg) translateY(0);
              }
            }
          }
        }
      }
      .tab-content{
        min-height: 0;
        height: 100%;
        border: none;
        box-shadow: none;
        background-color: var(--blanco90);
        outline: 2px solid var(--gris-4) !important;
        .tab-pane{
          height: 100%;
          .container-transcripciones{
            .search-transcripcion{
              position: sticky;
              top: 0;
              z-index: 10;
              background-color: white;
              padding-block: 4px 14px;
              padding-inline: 10px;
              input{
                width: 100%;
              }
            }
          }
        }
      }
    }
  }

  .modal-transcripcion-video{
    grid-template-rows: 100%;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.85);
    padding: 16px;
    display: none;
    opacity: 0;
    transition: all 0.25s ease-in-out;
    .close-modal{
      position: absolute;
      right: 10px;
      top: 10px;
      svg{
        width: 20px;
        height: 20px;
        fill: var(--primario-1);
      }
    }
    .content-modal{
      position: relative;
      background-color: white;
      height: 100%;
      padding-block: 40px 30px;
      padding-inline: 16px;
      display: grid;
      gap: 20px;
      grid-template-rows: 1fr max-content;
      @media (min-width: 993px){
        grid-template-columns: 40% 1fr;
      }
      .panel-resultado{
        display: flex;
        flex-direction: column;
        background-color: var(--blanco90);
        outline: 2px solid var(--gris-4) !important;
        overflow: hidden;
        .title{
          display: flex;
          align-items: center;
          gap: 6px;
          padding-block: 8px;
          padding-inline: 10px;
          font-family: var(--font-2);
          font-size: 18px;
          font-weight: 400;
          margin: 0;
          background: var(--gris-5);
          color: var(--primario-1);
          svg{
            fill: var(--primario-2);
            width: 20px;
            height: 20px;
          }
        }
      }
      .multimedia-preview{
        display: grid;
        grid-template-rows: 1fr auto;
        gap: 20px;
        min-height: 0;
        .video{
          display: flex;
          flex-direction: column;
          gap: 6px;
          .titulo-video{
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 0;
            color: var(--primario-1);
            font-family: var(--font-2);
            font-size: 20px;
            font-weight: 700;
            padding-block-end: 6px;
            border-block-end: 2px solid rgba(255,255,255,0.2);
            svg{
              fill: var(--primario-2);
              width: 20px;
              height: 20px;
            }
          }
          .vimeo-player{
            #player > div{
              padding-top: 46% !important;
            }
          }
          .video-container{
            padding-bottom: 46% !important;
          }
        }
        .resultado-capitulos{
          height: 100%;
          .title{
            
          }
          .container-capitulos{
            padding-block: 20px;
            padding-inline: 30px;
            overflow-y: auto;
            .capitulo{
              display: flex;
              align-items: center;
              gap: 6px;
              line-height: 1;
              padding-block: 4px;
              padding-inline-end: 180px;
              height: 40px;
              &.edited{
                padding-inline-end: 4px;
              }
              .texto{
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: inline-block;
                width: 100%;
              }
              .actions-transcription{
                top: 50%;
                transform: translateY(-50%);
                right: 6px;
              }
              .edicion-texto{
                width: 100%;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                .input{
                  padding: 4px 6px;
                  height: max-content;
                }
                .actions-text{
                  .btn{
                    /* padding: 0 !important;
                    background: none !important;
                    box-shadow: none !important;
                    border: none !important; */
                  }
                }
              }
            }
          }
        }
      }
      .resultado-transcripcion{
        min-height: 0;
        .title{
        }
        .container-transcripciones{
          padding-block: 10px;
          padding-inline: 10px;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          .transcripcion{
            display: flex;
            flex-direction: column;
            gap: 10px;
            &.edited{
            }
            .minuto{
              & + .texto {
              }
            }
            .texto{
              line-height: 180%;
              p{
                margin: 0;
                & + p{
                  margin-block-start: 10px;
                }
              }
            }
            .actions-transcription{
              right: 6px;
              top: 6px;
            }
            .edicion-texto{
              flex-direction: column;
              height: 100%;
              .actions-text{
                position: absolute;
                bottom: calc(100% + 10px);
                right: 0px;
              }
            }
          }
        }
      }
    }
    .footer-modal{
      grid-column: 1 / 3;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 6px;
    }
  }

  .scroll-personalizado{
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color:var(--azul-2-50) #fff;
    scrollbar-width: thin;
    &::-webkit-scrollbar {
      width: 6px;
      border-radius: 20px;
    }
    &::-webkit-scrollbar-track {
      background-color: #fff;
      outline: rgba(171, 186, 195, 0.5) solid 4px;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(171, 186, 195, 0.3);
    }
    &::-webkit-scrollbar-thumb:hover {
      background: rgba(171, 186, 195, 0.6);
    }
  }

  .btn{
    &.btn-evol {
      &.btn-xsmall{
        font-size: 12px;
        line-height: 130%;
        padding: 4px 8px;
        gap: 4px;
        svg{
          width: 12px;
          height: 12px;
        }
      }
      &.btn-evol-outline,
      &.btn-warning-outline,
      &.btn-danger-outline,
      &.btn-success-outline{
        background-color: white !important;
      }
      &.btn-danger-outline{
        color: var(--danger-1) !important;
        border: 2px solid var(--danger-1) !important;
        font-weight: 700;
        svg{
          fill: var(--danger-1) !important;
        }
        &:hover{
          color: var(--danger-3) !important;
          border-color: var(--danger-3) !important;
          fill: var(--danger-3) !important;
        }
      }
    }
  }

  .enlace-evol {
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--azul-1);
    &:hover{
      color: var(--primario-1);
      svg{
        fill: var(--primario-1);
      }
    }
    svg{
      width: 16px;
      height: 16px;
      fill: var(--azul-1);
    }
  }

  .table-subtitulos{
    width: 100%;
    .content-actions{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      .actions{
        display: flex;
        align-items: center;
        gap: 16px;
        & *:not(:first-child){
          padding-inline-start: 16px;
          border-left: 1px solid var(--gris-3);
        }
      }
      .enlace-evol,
      .form-field-evol{
        font-size: 12px;
        max-width: max-content;
      }
    }
    .td-subtitulos{
      height: 60px;
      padding-block: 0;
      &:not(.change){
        .content-actions.change{
          display: none;
        }
      }
      &.change{
        .content-actions.default{
          display: none;
        }
      }
    }
    td{
      font-size: 12px;
      padding: 12px 10px;
    }
    th{
      font-size: 14px;
      padding: 6px 10px;
    }
    thead{
      background-color: var(--gris-5);
      border-bottom: 2px solid var(--gris-4);
      tr{
        th{
          &:first-child{
            width: 20%;
          }
          width: 50%;
        }
      }
    }
    tbody{
      tr{
        /* &:nth-child(even){
          background-color: var(--azul-1-5);
        } */
         & + tr{
          border-top: 1px solid var(--gris-4);
         }
        td{
          .form-field-evol{
            width: 100%;
            select,
            input{
              width: 100%;
            }
          }
          .form-file-evol-inline{
            width: 100%;
            label{
              font-size: 12px;
              svg{
                width: 16px;
                height: 16px;
              }
            }
          }
        }
      }
    }
    tfoot{
      background-color: var(--gris-5);
      border-top: 2px solid var(--gris-4);
      tr{
        td{
          text-align: right;
          .btn{
            /* width: 100%; */
          }
          .txt{
            font-size: 13px;
          }
        }
      }
    }
  }

  /* REVISAR COMUN TODAS ACTIVIDADES */
 /*  .accTemario-{
    height: 100%;
    & > .tab-content{
      height: 100%;
    }
  } */

  /* NO RELEVANTE */

  #p-loading{
    .loading-ia{
      padding: 16px;
      margin-inline: auto;
      svg{
        margin-inline: auto;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        max-height: 80px;
        opacity: 0.8;
        & + .title{
          margin-top: 30px;
        }
      }
      .title{
        font-family: var(--font-2);
        font-size: 20px;
        margin: 0;
        text-align: center;
        color: var(--color-ia-medium);
        &.subtitle{
          color: var(--color-ia);
          font-size: 18px;
        }
        & + .title{
          margin-top: 10px;
        }
      }
    }
  }


  .container-actions-actividad{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 30px 16px 16px 16px;
  }

  .titulo-actividad-aula{
    &.titulo-actividad-aula-gestion{
      & + *{
        margin-top: 20px;
      }
    }
  }

  .nav.nav-tabs-campus{
    margin: 0 !important;
  }

  .video-container{
    padding-top: 0;
    & + .btnevol1 {
      margin-top: 10px;
      margin-left: auto;
    }
  }
  
  #actividaddetalletipo {
    float: none;
    margin: 0;
    & + *{
      margin-top: 16px;
    } 
  }
  
  * + #actividaddetalletipo {
    margin-top: 16px;
  }

  #p-edicion,
  #p-loading,
  #p-configuracion,
  #actividad-creada {
    display: none;
  }

  .visible{
    display: block !important;
  }

}