html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

span {
    display: inline-block;
}

label, span {
    font-family: 'Roboto', sans-serif;
    color: var(--grey-2);
}

.available{
    width: 100%;
    -moz-available;
    -webkit-fill-available;
}.c-button-container{
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
}

.c-button-label-container{
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: 12px;
    box-sizing: border-box;
    pointer-events: none;
}

.c-button-label-content{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
}

.c-button-leading-visual{
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}

.c-button-logo{
    width: 20px;
    height: 20px;
}

.c-button-text{
    display: inline-block;
    flex: 0 1 auto;
    width: fit-content;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    min-width: 0;
    max-width: 100%;
    text-align: center;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.c-button-text-blue{
    color: var(--blue-3);
}

.c-button-text-grey{
    color: var(--grey-2);
}

.c-button-text-green{
    color: var(--green-7);
}

.c-button{
    font-size: 1rem;
    color: transparent;
    border: 1px solid transparent;
    background-color: transparent;
    border-radius: 10px;
    transition: background-color .2s ease, border-color .2s ease;

    &:hover{
        cursor: pointer;
    }

    &:disabled{
        cursor: default;
    }

    &.c-button-color-blue{
        background-color: var(--blue-4);
        border-color: var(--blue-4);

        &:hover:not(:disabled){
            background-color: var(--blue-3);
            border-color: var(--blue-3);
        }
    }

    &.c-button-color-grey{
        background-color: var(--grey-2);
        border-color: var(--blue-4);

        &:hover:not(:disabled){
            background-color: var(--grey-1);
            border-color: var(--blue-3);
        }
    }

    &.c-button-color-disabled{
        background-color: var(--grey-3);
        border-color: var(--grey-3);
    }

    &.c-button-color-green{
        background-color: var(--grey-2);
        border-color: var(--green-8);

        &:hover:not(:disabled){
            background-color: var(--grey-1);
            border-color: var(--green-6);
        }
    }
}

.c-button-width-small{
    width: 112px;
}

.c-button-width-normal{
    width: 190px;
}

.c-button-width-large{
    width: 268px;
}

.c-button-height-small{
    height: 26px;
}

.c-button-height-normal{
    height: 39px;
}
.c-chip-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;

    width: fit-content;
    height: fit-content;
    background-color: var(--grey-2);

    border: 2px solid;
    border-radius: 999px;

    padding-left: 10px;
    padding-right: 10px;
}

.c-chip-blue {
    border-color: var(--blue-3);
}

.c-chip-red {
    border-color: var(--red-7);
}

.c-chip-green {
    border-color: var(--green-7);
}

.c-chip-orange {
    border-color: var(--orange-7);
}

.c-chip-purple {
    border-color: var(--purple-7);
}

.c-chip-yellow {
    border-color: var(--amber-7);
}:root {
    --grey-1: #fff5fb;
    --grey-2: #e6dcdf;
    --grey-3: #7f7679;
    --grey-4: #4d4548;
    --grey-5: #211a1c;

    --blue-1: #00faff;
    --blue-2: #00c7cc;
    --blue-3: #00959b;
    --blue-4: #00666d;
    --blue-5: #003a43;

    --red-1: #ffebee;
    --red-2: #ffcdd2;
    --red-3: #ef9a9a;
    --red-4: #e57373;
    --red-5: #ef5350;
    --red-6: #f44336;
    --red-7: #e53935;
    --red-8: #d32f2f;
    --red-9: #c62828;
    --red-10: #b71c1c;

    --purple-1: #F3E5F5;
    --purple-2: #E1BEE7;
    --purple-3: #CE93D8;
    --purple-4: #BA68C8;
    --purple-5: #AB47BC;
    --purple-6: #9C27B0;
    --purple-7: #8E24AA;
    --purple-8: #7B1FA2;
    --purple-9: #6A1B9A;
    --purple-10: #4A148C;

    --green-1: #E8F5E9;
    --green-2: #C8E6C9;
    --green-3: #A5D6A7;
    --green-4: #81C784;
    --green-5: #66BB6A;
    --green-6: #4CAF50;
    --green-7: #43A047;
    --green-8: #388E3C;
    --green-9: #2E7D32;
    --green-10: #1B5E20;

    --orange-1: #fff3e0;
    --orange-2: #ffe0b2;
    --orange-3: #ffcc80;
    --orange-4: #ffb74d;
    --orange-5: #ffa726;
    --orange-6: #ff9800;
    --orange-7: #fb8c00;
    --orange-8: #f57c00;
    --orange-9: #ef6c00;
    --orange-10: #e65100;

    --blue-grey-1: #eceff1;
    --blue-grey-2: #cfd8dc;
    --blue-grey-3: #b0bec5;
    --blue-grey-4: #90a4ae;
    --blue-grey-5: #78909c;
    --blue-grey-6: #607d8b;
    --blue-grey-7: #546e7a;
    --blue-grey-8: #455a64;
    --blue-grey-9: #37474f;
    --blue-grey-10: #263238;

    --amber-1: #fff8e1;
    --amber-2: #ffecb3;
    --amber-3: #ffe082;
    --amber-4: #ffd54f;
    --amber-5: #ffca28;
    --amber-6: #ffc107;
    --amber-7: #ffb300;
    --amber-8: #ffa000;
    --amber-9: #ff8f00;
    --amber-10: #ff6f00;
}/* Estilo */
.c-topbar {
  display: flex;
  justify-content: space-between;
  height: 60px;
  padding-left: 1rem;
  padding-right: 1rem;

  & .left, .right, .right > div {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
  }

  & .right, .right > div {
    justify-content: right;

    & .normal-buttons{
      display: none;
    }

    @media (min-width: 1150px) {
      & .normal-buttons{
        display: flex;
      }
      & .small-buttons{
        display: none;
      }
    }
  }
}

.c-topbar-light{
  background-color: var(--grey-2);
}

.c-topbar-dark{
  background-color: var(--grey-4);
}

@media (min-width: 992px) {
  .c-topbar{
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.c-topbar-modal{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Comportamiento */
.c-topbar-desktop{
  display: none;
}

@media (min-width: 992px) {
  .c-topbar-mobile{
    display: none;
  }
  .c-topbar-desktop{
    display: block;
  }
}a {
    color: var(--blue-2);
    text-decoration: none;

    &:visited {
        color: var(--purple-3);
    }
}

.output-text {
    font-family: 'Roboto', sans-serif;
    margin: 0;

    &.output-text-h1-large {
        font-size: 2rem;
    }

    &.output-text-h1-normal {
        font-size: 1.5rem;
    }

    &.output-text-h1-small {
        font-size: 1.25rem;
    }

    &.output-text-h2-large {
        font-size: 1.5rem;
    }

    &.output-text-h2-normal {
        font-size: 1.25rem;
    }

    &.output-text-h2-small {
        font-size: 1rem;
    }

    &.output-text-h3-large {
        font-size: 2rem;
    }

    &.output-text-h3-normal {
        font-size: 1.5rem;
    }

    &.output-text-h3-small {
        font-size: 1.25rem;
    }

    &.output-text-h4-large {
        font-size: 1.5rem;
    }

    &.output-text-h4-normal {
        font-size: 1.25rem;
    }

    &.output-text-h4-small {
        font-size: 1rem;
    }

    &.output-text-h5-large {
        font-size: 1.25rem;
    }

    &.output-text-h5-normal {
        font-size: 1rem;
    }

    &.output-text-h5-small {
        font-size: .875rem;
    }

    &.output-text-h6-large {
        font-size: 1rem;
    }

    &.output-text-h6-normal {
        font-size: .875rem;
    }

    &.output-text-h6-small {
        font-size: .75rem;
    }

    &.output-text-p-large {
        font-size: 1.125rem;
    }

    &.output-text-p-normal {
        font-size: 1rem;
    }

    &.output-text-p-small {
        font-size: .875rem;
    }

    &.output-text-grey {
        color: var(--grey-1);
    }

    &.output-text-blue {
        color: var(--blue-3);
    }

    &.output-text-red {
        color: var(--red-7);
    }

    &.output-text-disabled {
        color: var(--grey-3);
    }

    &.output-text-green {
        color: var(--green-7);
    }

    &.output-text-orange {
        color: var(--orange-7);
    }

    &.output-text-purple {
        color: var(--purple-7);
    }

    &.output-text-yellow {
        color: var(--amber-7);
    }

    @media (min-width: 992px) {
        &.output-text-h1-large {
            font-size: 4rem;
        }

        &.output-text-h1-normal {
            font-size: 3rem;
        }

        &.output-text-h1-small {
            font-size: 2rem;
        }

        &.output-text-h2-large {
            font-size: 3rem;
        }

        &.output-text-h2-normal {
            font-size: 2rem;
        }

        &.output-text-h2-small {
            font-size: 1.5rem;
        }
    }
}.c-icon-button{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
    line-height: 1;
}

.c-icon-button.c-icon-blue{
    color: var(--blue-3);
}

.c-icon-button.c-icon-blue .c-icon-glyph{
    background-color: var(--blue-3);
}

.c-icon-button.c-icon-grey{
    color: var(--grey-2);
}

.c-icon-button.c-icon-grey .c-icon-glyph{
    background-color: var(--grey-2);
}

.c-icon-button.c-icon-disabled{
    color: var(--grey-3);
}

.c-icon-button.c-icon-disabled .c-icon-glyph{
    background-color: var(--grey-3);
}

.c-icon-button.c-icon-green{
    color: var(--green-7);
}

.c-icon-button.c-icon-green .c-icon-glyph{
    background-color: var(--green-7);
}

.c-icon-button.c-icon-small{
    width: 18px;
    height: 18px;
}

.c-icon-button.c-icon-normal{
    width: 25px;
    height: 25px;
}

.c-icon-button.c-icon-large{
    width: 45px;
    height: 45px;
}

.c-icon-button.c-icon-extra-large,
.c-icon-button.c-icon-extraLarge{
    width: 70px;
    height: 70px;
}

a.c-icon-button{
    cursor: pointer;
}

.c-icon-glyph{
    display: block;
    width: 100%;
    height: 100%;
    mask: var(--c-icon-url) center / contain no-repeat;
    -webkit-mask: var(--c-icon-url) center / contain no-repeat;
    pointer-events: none;
}
.input {
    position: relative;
    display: flex;
    flex-direction: column;
}

.input-label {
    position: absolute;
    display: flex;
    align-items: baseline;
    gap: 10px;
    transition: left 0.3s, top 0.3s, font-size 0.3s;
    top: 7px;
    left: 10px;
    pointer-events: none;
}

.input-label > i,label {
    font-size: 1.25em;
}

.label-container-focus{
    left: 13px !important;
    top: -10px !important;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

.label-focus{
    font-size: 1em !important;
}

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

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

.input > input,select {
    border: 1px solid var(--grey-3);
    background-color: transparent;
    font-family: 'Roboto', sans-serif;
    color: var(--grey-2);
    border-radius: 5px;
    font-size: 1.25em;
    padding-left: 0.5em;
    height: 35px;
}

.input > input:hover,select:hover{
    border: 1px solid var(--grey-1);
}

.input > input {
    cursor: text;
}

.input > select {
    cursor: pointer;
}

.input > select > option:first-child{
    display: none;
}
.input > select > option {
    color: black;
}

.input-ok {
    outline: none;
    border: 1px solid var(--blue-2) !important;
}

.input-error {
    outline: none;
    border: 1px solid var(--red-5) !important;
}

.input-text-small{
    width: 112px;
    height: 37px;
}

.input-text-normal{
    width: 225px;
    height: 37px;
}

.input-text-large{
    width: 450px;
    height: 37px;
}

.select-one-small{
    width: 112px;
    height: 37px;
}

.select-one-normal{
    width: 225px;
    height: 37px;
}

.select-one-large{
    width: 450px;
    height: 37px;
}.c-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(77, 69, 72, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.c-modal-header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
}

.c-modal-content {
    display: flex;
    flex-direction: column;
    background-color: var(--grey-5);
    padding: 1rem;
    border-radius: 10px;
    position: relative;
    width: fit-content;
    max-width: 100vw;
    max-height: 100vh;
    box-sizing: border-box;
    overflow: auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.c-modal-content-full-screen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}

.c-modal-close {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.c-modal-button{
    float: right;
}
.opacity-10{
  opacity: 10%;
}

.opacity-20{
  opacity: 20%;
}

.opacity-30{
  opacity: 30%;
}

.opacity-40{
  opacity: 40%;
}

.opacity-50{
  opacity: 50%;
}

.opacity-60{
  opacity: 60%;
}

.opacity-70{
  opacity: 70%;
}

.opacity-80{
  opacity: 80%;
}

.opacity-90{
  opacity: 90%;
}

.opacity-100{
  opacity: 100%;
}.c-sidebar-option{
  position: relative;
  width: 50px;
  height: 50px;

  & .option {
    position: absolute;
    pointer-events: none;
    height: inherit;
    width: inherit;
    display: flex;
    justify-content: center;
    align-items: center;

    & .text {
      display: flex;
      gap: 1rem;

      & .label{
        display: none;
      }

      @media (min-width: 768px) {
        .label{
          display: block;
        }
      }
    }

    & .lock {
      display: none;
    }

    @media (min-width: 768px) {
      & .text{
        padding-left: 2rem;
      }

      & .lock{
        padding-right: 2rem;
      }
    }
  }

  & .button {
    width: inherit;
    height: inherit;
    border: 0;
  }

  & .light-grey {
    color: var(--blue-3);
    background-color: var(--grey-2);

    &:hover {
      background-color: var(--grey-1);
      cursor: pointer;
    }
  }

  & .dark-grey {
    color: var(--grey-2);
    background-color: var(--grey-4);

    &:hover {
      background-color: var(--grey-3);
      cursor: pointer;
    }
  }

  & .selected {
    color: var(--grey-2);
    background-color: var(--blue-3);
  }

  & .disabled {
    color: var(--grey-2);
    background-color: var(--grey-4);
  }

  @media (min-width: 768px) {
    & .option{
      justify-content: space-between;
    }
  }
}

@media (min-width: 768px) {
  .c-sidebar-option{
    width: 330px;
  }
}.c-sidebar{
    height: 100%;
    display: flex;
    flex-direction: column;

    &.desktop{
        width: 330px;
    }

    &.mobile{
        width: 70px;
    }

    &.light-grey{
        background-color: var(--grey-2);
    }

    &.dark-grey{
        background-color: var(--grey-4);
    }
}.c-tooltip-wrapper {
    position: relative;
}

.c-tooltip-content {
    position: absolute;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    z-index: 999;
    padding: 6px 10px;
}

.c-tooltip-top {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
}

.c-tooltip-right {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 8px;
}

.c-tooltip-wrapper:hover .c-tooltip-content {
    opacity: 1;
    visibility: visible;
}.c-youtube-video {
  width: 100%;
  height: 100%;
}