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;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

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

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

    &.icon{
        font-size: 1.3rem;
    }
}

.c-button{
    font-size: 1rem;
    color: transparent;
    border: 0;
    background-color: transparent;
    border-radius: 10px;

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

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

    &.c-button-default-disabled{
        background-color: var(--blue-4);
    }

    &.c-button-opposite{
        background-color: var(--grey-2);
        border: 1px solid #00666D;

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

    &.c-button-opposite-disabled{
        background-color: var(--grey-2);
        border: 1px solid #00666D;
    }

    &.c-button-transparent{
        &:hover{
            cursor: pointer;
        }
    }

    &.c-button-transparent-disabled{}

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

.c-button-icon{
    width: 25px;
    height: 25px;
    align-self: center;
}

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

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

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

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

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

.c-button-large-thin{
    width: 268px;
    height: 26px;
}: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;
}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-5);
    }
    &.output-text-disabled{
        color: var(--grey-3);
    }

    @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;
        }
    }
}.google-button{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    border-radius: 20px;
    border: 0;

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

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

    &.google-button-opposite{
        color: var(--blue-4);
        background-color: var(--grey-2);
        border: 1px solid #00666D;

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

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

    &.google-button-small{
        width: 112px;
        height: 39px;
    }

    &.google-button-normal{
        width: 190px;
        height: 39px;

        gap: 5px;
    }

    &.google-button-large{
        width: 268px;
        height: 39px;

        gap: 10px;
    }
}.c-icon{
    &.blue{
        color: var(--blue-3);
    }

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

    &.red{
        color: var(--red-5);
    }

    &.green{
        color: var(--green-5);
    }

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

    &.normal{
        font-size: 1.6rem;
    }

    &.large{
        font-size: 2.8rem;
    }

    &.extraLarge{
        font-size: 4.375rem;
    }
}.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;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.c-modal-close {
    float: right;
    font-size: 1.5rem;
}

.c-modal-button{
    float: right;
}.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);
    }
}/* Contenedor del componente */
.c-toggle-container {
    display: flex;
    gap: 1rem;
    align-items: center;
    width: fit-content;
}

/* Contenedor del switch */
.c-toggle-switch-container {
  position: relative;
  width: 87px;
  height: 39px;
  border-radius: 50px;
  transition: background-color 0.3s ease;
  box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.6),
              inset 2px 2px 5px rgba(0, 0, 0, 0.15);
}

/* Bolita del switch */
.c-toggle-switch-container::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 30px;
  height: 30px;
  background-color: var(--grey-1);
  border-radius: 50%;
  transition: transform 0.25s ease-in-out;
  pointer-events: none;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.25),
              -2px -2px 6px rgba(255,255,255,0.7);
}

/* Colores del fondo del switch */
.c-toggle-switch-container-grey {
    background-color: var(--grey-2);
}

.c-toggle-switch-container-blue {
    background-color: var(--blue-3);
}

.c-toggle-active-grey {
  background-color: var(--grey-2) !important;
  box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.6),
              inset 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.c-toggle-active-grey::after {
  transform: translateX(48px);
}

.c-toggle-active-blue {
  background-color: var(--blue-3) !important;
  box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.6),
              inset 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.c-toggle-active-blue::after {
  transform: translateX(48px);
}

/* Botón invisible que captura el click del switch */
.c-toggle-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
}
.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-topbar{
    display: flex;
    justify-content: space-between;
    background-color: var(--grey-4);
    height: 60px;
}

.c-topbar.desktop {
    display: none;
}

@media (min-width: 768px) {
    .c-topbar.desktop{
        padding-left: 3rem;
        padding-right: 3rem;
        display: flex;
    }
    .c-topbar.mobile{
        display: none;
    }
}

.c-topbar.mobile{
    padding-left: 1rem;
    padding-right: 1rem;
}

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

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

.c-topbar-half{
    display: flex;
    align-items: center;
    gap: 1rem;
}