/* Toda a documentação necessária está em ./source/Documentacao/README/Componentes.md */

.botoes-icone {
  display: flex;
  gap: 10px;

  & .botao {
    background: transparent;
    font-size: 1.7rem;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
  }
}

.campo-pesquisa,
.campo-texto {
  width: fit-content;

  & input {
    border: 2px solid var(--cor-cinza);
    height: 30px;
    padding: 20px;
    border-radius: calc((30px + 20px) * 0.5);
  }

  &:has(.icone) {
    position: relative;

    & input {
      padding-right: 40px;
    }

    & .icone {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--cor-texto);
    }
  }
}

.card-login {
  & .campo-pesquisa,
  & .campo-texto {
    width: 100%;

    & input {
      height: auto;
      padding: 10px 20p;
    }
  }
}

.botao-canto {
  height: 45px;
  border-top-right-radius: calc(45px / 2); /* Metade da altura */
  border-bottom-right-radius: calc(45px / 2); /* Metade da altura */
  width: fit-content;
  min-width: 150px;
  display: flex;
  background-color: #fff;
  align-items: center;
  justify-content: right;
  gap: 15px;
  padding-right: 20px;
  position: relative;
  overflow: hidden;
  /* transition: 0.2s ease-in-out; */

  & * {
    z-index: 2;
  }

  & .texto {
    font-size: 1.1rem;
  }

  & .icone {
    font-size: 1.2rem;
  }

  &::before {
    content: "";
    width: 100%;
    height: 45px;
    border-top-right-radius: calc(45px / 2); /* Metade da altura */
    border-bottom-right-radius: calc(45px / 2); /* Metade da altura */
    position: absolute;
    top: 0;
    left: -100%;
    /* transition: 0.2s ease-in-out; */
    background-color: rgba(87, 181, 255, 1);
    z-index: 1;
  }

  &:hover::before {
    left: 0;
  }

  &:hover {
    color: white;
  }
}

.card-1 {
  display: flex;
  gap: 15px;
  align-items: center;
  border-radius: 15px;
  padding: 30px;
  background: white;
  width: fit-content;
  min-width: 300px;
  border: 2px solid var(--cor-cinza);

  & .titulo {
    grid-area: titulo;
    font-size: 1.15rem;
  }

  & .icone {
    grid-area: icone;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    min-width: 65px;
    height: 65px;
    min-height: 65px;
    border-radius: 50%;
    color: var(--cor-texto);
    font-size: 1.5rem;
    border: 2px solid var(--cor-cinza);
  }

  & .conteudo {
    grid-area: conteudo;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    width: 100%;
    gap: 10px;

    & .titulo {
      color: var(--cor-texto);
      font-size: 1.3rem;
    }

    & .texto {
      color: var(--cor-texto);
      font-size: 1.2rem;
    }

    & .numero {
      color: var(--cor-texto);
      font-size: 1.7rem;
      font-weight: bold;
    }
  }

  &:hover {
    transform: scale(1.03) translateY(-2px);
  }
}

.card-2 {
  display: flex;
  flex-direction: column;
  gap: 25px;
  border-radius: 15px;
  padding: 0;
  padding-bottom: 30px;
  background: white;
  width: fit-content;
  min-width: 250px;
  box-shadow: var(--shadow);

  & .header {
    display: flex;
    align-items: center;
    padding: 30px;
    padding-bottom: 10px;
    gap: 10px;
    position: relative;

    &::after {
      content: "";
      height: 2px;
      width: 80%;
      background-color: var(--cor-cinza);
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }

    & .icone {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 55px;
      min-width: 55px;
      height: 55px;
      min-height: 55px;
      border-radius: 50%;
      color: var(--cor-texto);
      font-size: 1.3rem;
      border: 2px solid var(--cor-cinza);
    }

    & .titulo {
      color: var(--cor-texto);
      font-size: 1.3rem;
    }
  }

  & .conteudo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 0 30px;

    & .texto {
      color: var(--cor-texto);
      font-size: 1rem;
    }

    & .numero {
      color: var(--cor-texto);
      font-size: 1.7rem;
      font-weight: bold;
    }
  }

  & .acao {
    padding-right: 30px;

    & .botao-canto {
      width: 100%;
      background-color: var(--cor-cinza);

      &:hover {
        color: var(--cor-texto);
        &::before {
          background-color: var(--cor-cinza-claro);
        }
      }
    }
  }
}

.card-3 {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "icone conteudo"
    "acao acao";
  width: fit-content;
  min-width: 250px;
  padding: 15px;
  gap: 10px;
  border-radius: 15px;
  box-shadow: var(--shadow);
  background: white;

  & .icone-box {
    grid-area: icone;
    display: flex;
    width: 55px;
    min-width: 55px;
    height: 55px;
    min-height: 55px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 2px solid var(--cor-cinza);

    & .icone {
      color: var(--cor-texto);
      font-size: 1.3rem;
    }
  }

  & .conteudo {
    grid-area: conteudo;
    display: grid;
    grid-template-columns: auto;
    height: 100%;
    align-items: center;
    gap: 10px;

    & .titulo {
      color: var(--cor-texto);
      font-size: 1.3rem;
    }

    & .texto {
      filter: opacity(0.7);
    }
  }

  & .acao {
    grid-area: acao;

    & .botao {
      display: flex;
      width: 100%;
      height: 45px;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      cursor: pointer;
      background-color: var(--cor-cinza);
      color: var(--cor-texto);

      &:hover {
        background-color: var(--cor-cinza-claro);
      }

      & .texto {
        color: var(--cor-texto);
      }
    }
  }

  &.redondo {
    & .icone-box {
      border-radius: 50%;
    }

    & .acao {
      & .botao {
        border-radius: calc(45px / 2); /* Metade da altura */
      }
    }
  }
}

.card-4 {
  display: flex;
  flex-direction: column;
  width: fit-content;
  min-width: 250px;
  padding: 20px;
  gap: 25px;
  border-radius: 15px;
  border: 2px solid var(--cor-cinza);
  background: white;

  & .header {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cor-cinza);

    & .icone {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      min-width: 42px;
      height: 42px;
      min-height: 42px;
      border-radius: 10px;
      color: var(--cor-texto);
      font-size: 1.3rem;
      box-shadow: var(--shadow);
    }

    & .titulo {
      color: var(--cor-texto);
      font-size: 1.3rem;
    }
  }

  & .conteudo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;

    & .texto {
      color: var(--cor-texto);
      font-size: 1rem;
      filter: opacity(0.8);
    }

    & .numero {
      color: var(--cor-texto);
      font-size: 1.7rem;
      font-weight: bold;
      filter: opacity(0.8);
    }
  }

  & .acao {
    display: flex;

    & .botao {
      flex: 1;
      display: flex;
      height: 45px;
      border-radius: 10px;
      background-color: var(--cor-cinza);
      color: var(--cor-texto);
      justify-content: center;
      align-items: center;

      &:hover {
        text-decoration: none;
        background-color: var(--cor-cinza-claro);
        color: var(--cor-texto);
      }

      &.redondo {
        border-radius: calc(45px / 2); /* Metade da altura */
      }

      &.cor-principal {
      }
    }
  }

  &.cor-principal {
    & .icone {
      background-color: var(--cor-principal);
      color: var(--cor-texto-principal);
    }

    & .acao {
      & .botao {
        background-color: var(--cor-principal);
        color: var(--cor-texto-principal);

        &:hover {
          background-color: var(--cor-principal-hover);
        }
      }
    }
  }
}

.card-5 {
  padding: 15px 30px;
  align-items: center;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: repeat(3, auto);
  grid-template-areas:
    "titulo titulo"
    "icone numero"
    "botao botao";
  gap: 15px;
  border-radius: 15px;
  padding: 30px;
  background: white;
  width: fit-content;
  min-width: 300px;
  border: 2px solid var(--cor-cinza);

  & .titulo {
    grid-area: titulo;
    font-size: 1.15rem;
    text-align: center;
  }

  & .icone {
    grid-area: icone;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    min-width: 65px;
    height: 65px;
    min-height: 65px;
    border-radius: 50%;
    color: var(--cor-texto);
    font-size: 1.5rem;
    border: 2px solid var(--cor-cinza-escuro);
  }

  & .numero {
    grid-area: numero;
    font-size: 1.7rem;
    font-weight: bold;
    text-align: right;
  }

  & .descricao {
    grid-area: descricao;
    font-size: 1.1rem;
  }

  & .botao {
    grid-area: botao;
    background-color: var(--cor-cinza-claro);
    padding: 0px 15px;
    height: 30px;
    border-radius: calc(30px / 2);
    border: none;
    cursor: pointer;
    justify-content: center;

    &:hover {
      background-color: var(--cor-cinza);
    }
  }

  &:hover {
    transform: scale(1.03) translateY(-2px);
  }
}

.card-6 {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "titulo icone"
    "txt-principal icone"
    "texto texto";

  background-color: #fff;
  border-radius: 15px;
  padding: 15px;
  box-shadow: var(--shadow);
  min-width: 250px;
  max-width: 300px;
  gap: 10px;
  width: fit-content;

  & .icone {
    grid-area: icone;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: 45px;
    border-radius: 50%;
    background-color: var(--cor-principal);
    color: var(--cor-texto-principal);
  }

  & .titulo {
    grid-area: titulo;
  }

  & .texto-principal {
    grid-area: txt-principal;
    font-weight: bold;
    font-size: 1.3rem;
  }

  & .texto {
    grid-area: texto;
    font-size: 0.8rem;
  }

  & .destaque {
    background-color: var(--cor-principal);
    color: var(--cor-texto-principal);
    padding: 3px 5px;
    border-radius: 5px;
  }
}

.card-7 {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto 1fr;

  background-color: #fff;
  border-radius: 15px;
  padding: 15px;
  box-shadow: var(--shadow);
  min-width: 250px;
  max-width: 300px;
  gap: 10px;
  width: fit-content;

  & .header {
    display: flex;
    width: 100%;

    &:has(.titulo.center) {
      justify-content: center;
    }

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

  & .conteudo {
    display: flex;
    flex-direction: column;
    grid-gap: 10px;

    & .linha {
      display: flex;
      justify-content: space-between;

      & .texto {
        grid-area: texto;
        font-size: 1rem;
      }
    }
  }
}

.card-8 {
  padding: 15px 30px;
  align-items: center;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: repeat(3, auto);
  grid-template-areas:
    "titulo titulo"
    "icone numero"
    "botao botao";
  gap: 15px;
  border-radius: 15px;
  padding: 30px;
  background: white;
  width: fit-content;
  min-width: 300px;
  border: 2px solid var(--cor-cinza);

  & .titulo {
    grid-area: titulo;
    font-size: 1.15rem;
    text-align: center;
  }

  & .icone {
    grid-area: icone;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    min-width: 65px;
    height: 65px;
    min-height: 65px;
    border-radius: 50%;
    color: var(--cor-texto);
    font-size: 1.5rem;
    border: 2px solid var(--cor-cinza-escuro);
  }

  & .numero {
    grid-area: numero;
    font-size: 1.7rem;
    font-weight: bold;
    text-align: right;
  }

  & .descricao {
    grid-area: descricao;
    font-size: 1.1rem;
  }

  & .botao {
    grid-area: botao;
    background-color: var(--cor-cinza-claro);
    padding: 0px 15px;
    height: 30px;
    border-radius: calc(30px / 2);
    border: none;
    cursor: pointer;
    justify-content: center;

    &:hover {
      background-color: var(--cor-cinza);
    }
  }

  &:hover {
    transform: scale(1.03) translateY(-2px);
  }
}

/* Versão do card-4 */
.card-9 {
  display: flex;
  flex-direction: column;
  width: fit-content;
  min-width: 250px;
  padding: 20px;
  gap: 25px;
  border-radius: 15px;
  /* border: 2px solid var(--cor-cinza); */
  background: white;
  box-shadow: var(--smooth-shadow);

  & .header {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    position: relative;
    padding-bottom: 10px;
    /* border-bottom: 2px solid var(--cor-cinza); */

    & .icone {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      min-width: 42px;
      height: 42px;
      min-height: 42px;
      border-radius: 10px;
      color: var(--cor-texto);
      font-size: 1.3rem;
      box-shadow: var(--shadow);
    }

    & .titulo {
      color: var(--cor-texto);
      font-size: 1.3rem;
      text-align: right;
      width: 100%;
    }
  }

  & .conteudo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;

    & .texto {
      color: var(--cor-texto);
      font-size: 1rem;
      filter: opacity(0.8);
    }

    & .numero {
      color: var(--cor-texto);
      font-size: 1.7rem;
      font-weight: bold;
      filter: opacity(0.8);
    }
  }

  & .acao {
    display: flex;

    & .botao {
      flex: 1;
      display: flex;
      height: 45px;
      border-radius: 10px;
      background-color: var(--cor-cinza);
      color: var(--cor-texto);
      justify-content: center;
      align-items: center;

      &:hover {
        text-decoration: none;
        background-color: var(--cor-cinza-claro);
        color: var(--cor-texto);
      }

      &.redondo {
        border-radius: calc(45px / 2); /* Metade da altura */
      }

      &.cor-principal {
      }
    }
  }

  &.cor-principal {
    & .icone {
      background-color: var(--cor-principal);
      color: var(--cor-texto-principal);
    }

    & .acao {
      & .botao {
        background-color: var(--cor-principal);
        color: var(--cor-texto-principal);

        &:hover {
          background-color: var(--cor-principal-hover);
        }
      }
    }
  }
}

.card-imagem-1 {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px;
  border-radius: 15px;
  width: 230px; /* largura 100px + os paddings de 15px cada lado */
  box-shadow: 0 0 15px #00000020;
  background-color: #fff;

  & .conteudo {
    & picture {
      width: 100%;
      height: 220px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      border-radius: 10px;
      border: 1px solid var(--cor-cinza);
      padding: 10px;

      & img {
        border-radius: 10px;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    }
  }
}

.cards {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  &.fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  &:has(.card-2, .card-3) {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    & :is(.card-2, .card-3) {
      .conteudo {
        flex: 1;
        justify-content: start;
      }
    }
  }

  &.cards-shadow > * {
    box-shadow: var(--shadow);
  }

  & > * {
    min-width: 0;
    height: 100%;
    width: 100%;
  }
}

a.botao-padrao,
.botao-padrao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  height: 45px;
  padding: 0 15px;
  border-radius: calc(45px / 2); /* Metade da altura */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: fit-content;
  min-width: max-content !important;
  background-color: var(--cor-cinza);

  &.direita {
    margin-left: auto;
  }

  &.icone {
    height: 45px;
    width: 45px;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  &:hover {
    background-color: var(--cor-cinza-escuro);
  }

  &.cor-principal {
    background-color: var(--cor-principal);
    color: var(--cor-texto-principal);

    &:hover {
      background-color: var(--cor-principal-hover);
    }
  }

  &.cor-secundaria {
    background-color: var(--cor-secundaria);
    color: var(--cor-texto-secundaria);

    &:hover {
      background-color: var(--cor-secundaria-hover);
    }
  }

  &.cor-branca {
    background-color: white;
    color: var(--cor-texto);

    &:hover {
      background-color: rgb(242, 242, 242);
    }
  }

  &.cor-verde {
    background-color: rgb(45, 184, 45);
    color: white;

    &:hover {
      background-color: rgb(78, 222, 78);
    }
  }

  &.cor-vermelha {
    background-color: rgb(200, 63, 63);
    color: white;

    &:hover {
      background-color: rgb(234, 87, 87);
    }
  }

  &.cor-amarela {
    background-color: rgb(225, 210, 40);
    color: white;

    &:hover {
      background-color: rgb(232, 234, 87);
    }
  }

  &.light {
    background-color: transparent !important;
    border: 1px solid var(--cor-texto);
    color: var(--cor-texto);

    &:hover {
      border: 1px solid var(--cor-texto-hover);
      color: var(--cor-texto-hover);
    }

    &.cor-principal {
      border: 1px solid var(--cor-principal);
      color: var(--cor-principal);

      &:hover {
        border: 1px solid var(--cor-principal-hover);
        color: var(--cor-principal-hover);
      }
    }
  }
}

a.botao-simples,
.botao-simples {
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: 1.1rem;
  height: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--cor-texto);
  gap: 5px;

  &:hover {
    color: var(--cor-texto-hover);
  }

  &.botao-cheio {
    height: 45px;
    padding: 0 15px;
  }

  &.full {
    width: 100%;
  }

  & .texto {
    min-width: max-content;
  }

  &.direita {
    margin-left: auto;
  }

  &.cor-principal {
    color: var(--cor-principal);

    &:hover {
      color: var(--cor-principal-hover);
    }
  }

  &.cor-secundaria {
    color: var(--cor-secundaria);

    &:hover {
      color: var(--cor-secundaria-hover);
    }
  }
}

.botoes {
  display: flex;
  gap: 10px;

  & :is(button, a).full {
    width: 100%;
    align-items: center;
    justify-content: center;
  }

  &.bloco {
    background-color: white;
    box-shadow: var(--shadow);
    padding: 10px;
    border-radius: calc(45px / 2 + 10px);
  }

  &:has(.botao-simples) {
    gap: 20px;
  }

  &.direita {
    margin-left: auto;
    justify-content: right;
  }

  &.centralizado,
  &.meio {
    margin: auto;
    justify-content: center;
  }

  &.centralizado.aninhado,
  &.meio.aninhado {
    margin: 1rem;
    justify-content: center;
  }

  &.separado {
    justify-content: space-between;
  }

  &.coluna {
    flex-direction: column;
    justify-content: unset;

    &.direita {
      align-items: end;
    }

    &.centralizado {
      align-items: center;
    }

    &.separado {
      align-items: space-between;
    }
  }

  &.full {
    width: 100%;
  }

  &.setas-navegacao {
    position: fixed;
    bottom: 10px;
    right: 10px;
    gap: 5px;

    & :is(button, a) {
      height: 35px !important;
      width: 35px !important;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem !important;
    }
  }
}

.tabela-1 {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  border: 1px solid var(--cor-principal);
  box-shadow: var(--shadow);

  & thead {
    text-align: center;
    background-color: var(--cor-principal);
    color: var(--cor-texto-principal);

    & tr {
      & th {
        padding: 10px 15px;
        border: none;
      }
    }
  }

  & tbody {
    color: var(--cor-texto);
    text-align: center;

    & tr {
      &:nth-child(even) {
        background-color: var(--cor-cinza-claro);
      }

      &:not(:last-child) {
        border-bottom: 1px solid var(--cor-principal-transparent);
      }

      & td {
        padding: 10px 15px;

        & label {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 30px;
          border-radius: calc(30px / 2); /* Metade da altura */
          padding: 0 15px;
          background-color: var(--cor-cinza);
          color: var(--cor-texto);
          font-size: 1rem !important;
        }

        &.acao {
          display: flex;
          gap: 10px;

          & .botao-acao {
            display: flex;
            border-radius: 10px;
            background-color: var(--cor-principal);
            color: var(--cor-texto-principal);
            border: none;
            height: 30px;
            width: 30px;
            min-height: 30px;
            min-width: 30px;
            align-items: center;
            justify-content: center;

            & span {
            }

            &:hover {
              background-color: var(--cor-principal-hover);
            }
          }
        }
      }
    }
  }
}

.tabela-2 {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  border: 1px solid var(--cor-principal);
  box-shadow: var(--shadow);
  width: 100% !important;



  & thead {
    text-align: center;
    background-color: var(--cor-principal);
    color: var(--cor-texto-principal);

    & tr {
      & th {
        padding: 10px 15px !important;
        border: none;
      }
    }
  }

  & tbody {
    color: var(--cor-texto);
    text-align: center;

    & tr {
      &:nth-child(even) {
        background-color: var(--cor-cinza-claro);
      }

      &:not(:last-child) {
        border-bottom: 1px solid var(--cor-principal-transparent);
      }

      & td {
        padding: 10px 15px;
        color: black !important;

        & label {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 30px;
          border-radius: calc(30px / 2); /* Metade da altura */
          padding: 0 15px;
          background-color: var(--cor-cinza);
          color: var(--cor-texto);
          font-size: 1rem !important;
        }

        &.acao {
          display: flex;
          gap: 10px;
          justify-content: center;

          & .botao-acao {
            display: flex;
            border-radius: 10px;
            background-color: var(--cor-principal);
            color: var(--cor-texto-principal);
            border: none;
            height: 30px;
            width: 30px;
            min-height: 30px;
            min-width: 30px;
            align-items: center;
            justify-content: center;

            & span {
            }

            &:hover {
              background-color: var(--cor-principal-hover);
            }
          }
        }
      }
    }
  }
}

.checklist {
  border: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}

.checklist-box {
  border: 2px solid var(--cor-cinza);
  border-radius: 15px;
  height: fit-content;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;

  & .abre-checklist {
    width: 100%;
    border: none;
    cursor: pointer;
    background-color: transparent;
    text-align: left;
    display: flex;
    gap: 10px;

    &:hover {
      text-decoration: underline;
    }

    &[aria-expanded="true"] {
      padding-bottom: 15px;
      border-bottom: 2px solid var(--cor-cinza);
    }
  }

  & .checklist:not(.active) {
    display: none;
  }
}

.abas-box {
  display: flex;
  flex-direction: column;
  gap: 15px;

  & .abas {
    display: flex;
    gap: 5px;
    border-bottom: 2px solid var(--cor-principal);

    & button {
      border: none;
      height: 45px;
      padding: 0 20px;
      background-color: transparent;
      color: var(--cor-texto);
      position: relative;
      cursor: pointer;

      &.active {
        cursor: default;

        &::after {
          content: "";
          display: block;
          height: 4px;
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          background-color: var(--cor-principal);
        }
      }
    }
  }

  & > .conteudo {
    min-height: 400px;

    & .section-aba:not(.active) {
      display: none;
    }
  }

  & .botoes-acao {
    display: flex;
    justify-content: right;
    gap: 5px;

    & a,
    & button {
      background-color: var(--cor-principal);
      color: var(--cor-texto-principal);

      &:hover {
        background-color: var(--cor-principal-hover);
      }
    }
  }
}

.historico {
  border-left: 2px solid var(--cor-cinza-claro);
  padding-left: 15px;
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: stretch;

  & h3 {
    text-align: center;
  }

  & .timeline {
    & .linha {
      display: flex;
      align-items: center;

      & .tempo {
        width: 50px;
        text-align: right;
        padding: 10px 0;
        padding-right: 20px;
        position: relative;
        min-height: 100%;

        &::after {
          content: "";
          display: block;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%) translateX(50%);
          width: 15px;
          height: 15px;
          border-radius: 50%;
          background-color: var(--cor-principal);
          z-index: 2;
        }
      }

      & .descricao {
        padding: 20px 0;
        padding-left: 20px;
        width: 100%;
        max-width: 200px;
        position: relative;

        &::before {
          content: "";
          display: block;
          position: absolute;
          height: 100%;
          width: 2px;
          top: 0;
          left: 0;
          transform: translateX(-50%);
          background-color: var(--cor-cinza);
          z-index: 1;
        }
      }

      &:first-child .descricao::before {
        height: 50%;
        top: 50%;
      }

      &:last-child .descricao::before {
        height: 50%;
        bottom: 0;
      }
    }
  }
}

.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;

  & .msg-box {
    display: flex;
    flex-direction: column;
    min-height: 500px;
    height: 100%;
    max-height: 500px;
    gap: 15px;
    padding: 20px;
    border-radius: calc(45px / 2);
    border: 2px solid var(--cor-cinza);

    & .mensagem {
      padding: 15px;
      background-color: var(--cor-cinza-claro);
      width: fit-content;
      max-width: 350px;

      &.recebida {
        border-radius: 0 15px 15px 15px;
      }

      &.enviada {
        margin-left: auto;
        border-radius: 15px 0 15px 15px;
      }

      & .usuario {
        color: var(--cor-principal);
        font-weight: bold;
      }
    }
  }

  & .campo-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;

    & .campo-texto {
      flex: 1;
      display: flex;

      & input {
        flex: 1;
      }
    }
  }
}

#form-entidade {
  & .conteudo {
    min-height: 400px;

    & .section-aba:not(.active) {
      display: none;
    }
  }
}

.input-arquivo {
  --height: 45px;
  height: var(--height);
  width: 100%;
  border-radius: calc(var(--height) / 2);
  border: 1px solid lightgray;
  cursor: pointer;
  background-color: #fff;

  &::-webkit-file-upload-button,
  &::file-selector-button {
    border: none;
    padding: 0 15px;
    height: var(--height);
    cursor: pointer;
    background-color: var(--cor-principal);
    color: white;
    margin-right: 15px;

    &:hover {
      background-color: var(--cor-principal-clara);
    }
  }
}

.ellipsis-1 {
  display: -webkit-box; /* Para suportar o WebKit */
  -webkit-box-orient: vertical; /* Define a orientação do box como vertical */
  -webkit-line-clamp: 1; /* Limita o texto a uma linha */
  overflow: hidden; /* Esconde o texto que ultrapassa o limite */
  text-overflow: ellipsis; /* Adiciona a elipse (...) */
  white-space: normal; /* Permite que o texto quebre em palavras */
}

.tooltip-container {
  position: relative;
}

.my-tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 1000;
  display: none;
  pointer-events: none; /* Garante que o tooltip não interfira nos eventos do mouse */
  white-space: normal; /* Permite quebra de linha */
  word-wrap: break-word; /* Quebra palavras longas */
}

.my-tooltip::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
}

@media only screen and (max-width: 700px) {
  .my-tooltip {
    display: none !important;
  }
}

.scrollbar {
  /* Estilo para a barra de rolagem */
  &::-webkit-scrollbar {
    width: 7px; /* Largura da barra de rolagem */
  }

  /* Cor de fundo da barra de rolagem */
  &::-webkit-scrollbar-track {
    background: #f1f1f1; /* Cor do fundo */
  }

  /* Cor e estilo do "thumb" da barra de rolagem */
  &::-webkit-scrollbar-thumb {
    background: var(--cor-principal); /* Cor do thumb */
    border-radius: 7px; /* Bordas arredondadas */
  }

  /* Cor do "thumb" ao passar o mouse */
  &::-webkit-scrollbar-thumb:hover {
    background: var(--cor-principal-clara); /* Cor ao passar o mouse */
  }
}

.guias {
  & .box-aba-button {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 45px;
    gap: 5px;

    & .aba-button {
      height: 45px;
      width: max-content;
      min-width: max-content;
      padding: 0 20px;
      border: none;
      border-radius: 10px 10px 0 0;
      border-bottom: none;
      color: black;
      background-color: white;

      &:not(.active) {
        position: relative;

        &::after {
          content: "";
          width: 100%;
          height: 0px;
          position: absolute;
          bottom: 0;
          left: 0;
          background-color: var(--cor-principal);
          transition: 0.2s ease-in-out;
        }

        &:hover {
          &::after {
            height: 3px;
          }
        }
      }

      &.active {
        cursor: default;
        position: relative;

        &::after {
          content: "";
          width: 100%;
          height: 3px;
          position: absolute;
          bottom: 0;
          left: 0;
          background-color: var(--cor-principal);
        }
      }
    }
  }

  & .box-aba-content {
    padding: 20px;
    background-color: white;
    flex: 1;
    border-top: 1px solid var(--cor-cinza);
    min-height: 1063px;

    & .aba-content {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
  }

  & .aba-content:not(.active) {
    display: none !important;
  }
}

.my-badge {
  --height: 35px;
  display: flex;
  width: fit-content;
  height: var(--height) !important;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: calc(var(--height) / 2);
  background-color: #d7d7d7;
  cursor: default;

  &.red {
    background-color: #f64242 !important;
    color: white;
  }

  &.green {
    background-color: #54bc31 !important;
    color: white;
  }

  &.yellow {
    background-color: #e68618 !important;
    color: white;
  }

  &.blue {
    background-color: #2d71ca !important;
    color: white;
  }
}

.modulos-links .dropdown-menu.show {
  margin-left: -100px !important;
}

.campos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.text-principal {
  color: var(--cor-principal);
}

.botao-comentario {
  text-decoration: underline;
  cursor: pointer;
  font-weight: 800;
  display: inline-block;
}