#popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* =-=-=-=-=-=-= ICONS -BTNS =-=-=-=-=-=-= */
.btn {
  border: 1px solid var(--details);
  cursor: pointer;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: transparent;
  color: var(--white);
  font-size: 1.6rem;
}

.btn:hover {
  border-color: var(--white);
}

.icon-btn {
  font-size: 2rem;
}

.modal:target {
  display: flex;
}

.icon-home {
  color: var(--details);
  font-size: 4.7rem;
}

.btn-addPayment {
  border: 1px solid var(--details);
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
  background-color: transparent;
  color: white;
  font-weight: bold;
  font-size: 12px;
  margin-left: 12px;
}

.btn__back {
  border: 1px solid var(--details);
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
  background-color: transparent;
  color: white;
  font-weight: bold;
  font-size: 12px;
}

.btn__addproduct a {
  width: 100%;
}

/* =-=-=-=-=-=-= ICONS =-=-=-=-=-=-= */

/* =-=-=-=-=-=-= FORMS =-=-=-=-=-=-= */
.form-categoria {
  display: flex;
  flex-direction: column;
}
.form-categoria button {
  margin-top: 10px;
}

/* =-=-=-=-=-=-= FORMS =-=-=-=-=-=-= */

/* =-=-=-=-=-=-= HEADER =-=-=-=-=-=-= */
body {
  display: flex;
  flex-direction: column  ;
}

.c-layout__header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 20px;
  height: 80px;
  width: 100%;
  background-color: var(--black2);
  box-shadow: 0px 10px 20px -10px #161616;
}

.c-header__logo {
  height: 50px;
  display: flex;
  gap: 12px;
  align-items: center;
}

#c-header__title {
  font-size: 2.6rem;
}

.c-header__icon {
  display: none;
}

.sub_header {
  display: flex;
  gap: 20px;
}

.compact-payment-status {
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  color: #444;
  border-radius: 4px;
  padding: 8px 12px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

#statusMessage {
  color: #d9534f;
  font-weight: bold;
  margin-right: 10px;
  font-size: 0.8em;
}

.avoid-cut {
  font-size: 0.85em;
  font-style: italic;
}

/* Botão de pagamento compacto */
.compact-confirm-button {
  background-color: #5cb85c;
  color: #ffffff;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.85em;
  cursor: pointer;
  transition: background-color 0.3s;
}

.compact-confirm-button:hover {
  background-color: #4cae4c;
}

/* =-=-=-=-=-=-= NAV =-=-=-=-=-=-= */
.container-nav {
  height: calc(100vh - 80px);
  position: sticky;
  top: 80px;
}
.c-header__nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 20px;
  width: 220px;
  height: 100%;
  border-right: 2px solid var(--details);
}

.c-header__nav a {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  padding: 4px 0;
  display: flex;
  gap: 12px;
  width: 100%;
}

.c-header__nav a i {
  display: inline;
  width: 25px;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
}

.c-header__navlist li {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.c-header__navlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
}

.c-header__profileLogo img {
  display: none;
}
/* =-=-=-=-=-=-= NAV =-=-=-=-=-=-= */

/* =-=-=-=-=-=-= LOGOUT =-=-=-=-=-=-= */
.c-header__logout a {
  display: flex;
  align-items: center;
  width: 100%;
  border-top: 1px solid var(--details);
  gap: 12px;
  font-size: 2rem;
  padding: 10px 0px;
  color: var(--white);
}

.ai-block {
  font-size: 2rem;
}
/* =-=-=-=-=-=-= LOGOUT =-=-=-=-=-=-= */

/* =-=-=-=-=-=-= SECTION =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= PROFILE =-=-=-=-=-=-= */
.c-section {
  width: 100%;
  display: flex;
  gap: 20px;
  position: relative;
}

.c-header__profile {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.c-header__profile .profile--userName {
  font-size: 1.8rem;
}

.c-header__profile .profile--icon {
  width: 50px;
  height: 50px;
  background-color: var(--white);
  margin-right: 32px;
  border-radius: 50%;
  overflow: hidden;
}

.c-profile {
  padding: 0 20px;
}

.c-profile--infos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 24px;
  background-color: var(--black2);
  border-radius: 15px;
  width: 100%;
}

.c-profile--infos span label {
  font-size: 1.6rem;
}

.c-profile--infos span input {
  min-height: 50px;
  font-size: 1.4rem;
}

/* =-=-=-=-=-=-= PROFILE =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= BODY =-=-=-=-=-=-= */
.c-section__body {
  width: 100%;
  padding: 16px;
  margin: 20px 20px 20px 0;
  background-color: var(--black2);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* =-=-=-=-=-=-= USER =-=-=-=-=-=-= */
.c-section__user {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.c-section__user--profile,
.btn__addproduct {
  display: flex;
  gap: 12px;
  align-items: center;
}

.c-section__user--title {
  font-size: 3.2rem;
  font-weight: 600;
}

.btns {
  display: flex;
  gap: 8px;
}

/* =-=-=-=-=-=-= PROFILE =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= PROFILE =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= ESTOQUE =-=-=-=-=-=-= */
.c-product__input {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.estoque-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

#checkboxContainer {
  height: 400px;
  overflow: auto;
  margin: 20px 0;
}

.checkbox-items {
  display: flex;
  align-items: center;
  padding: 8px;
}

.labrel-checkbox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  font-size: 1.6rem;
  color: #e0e0e0;
  gap: 10px;
  transition: color 0.3s;
}

.labrel-checkbox:hover {
  color: #007bff;
}

.checkbox-items:nth-child(even) {
  border-top: 1px solid var(--white);
  border-bottom: 1px solid var(--white);
}

input[type=checkbox]:checked {
  background-color: #007bff;
  border-color: #007bff;
  position: relative;
}

input[type=checkbox]:checked::after {
  content: "✔";
  position: absolute;
  top: -2px;
  left: 2px;
  font-size: 14px;
  color: white;
}

.btn-addCatalogo {
  margin: 0 auto;
  border: none;
  padding: 8px 16px;
  background-color: var(--black3);
  border: 2px solid var(--details);
  border-radius: 10px;
  cursor: pointer;
  color: var(--white);
}

/* =-=-=-=-=-=-= ESTOQUE =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= PRODUCT =-=-=-=-=-=-= */
.btn__addproduct {
  border: none;
  padding: 8px 16px;
  background-color: var(--black3);
  border: 2px solid var(--details);
  border-radius: 10px;
  cursor: pointer;
  color: var(--white);
}

.btn__addproduct > a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-remover {
  margin-top: 12px;
  border: none;
  width: 80px;
  /* Reduzi o width para 80px */
  height: 40px;
  /* Reduzi o height para 40px */
  text-align: center;
  background-color: #e74c3c;
  /* Cor de fundo vermelha */
  border-radius: 8px;
  /* Reduzi o raio da borda para 8px */
  color: #fff;
  /* Texto branco */
  cursor: pointer;
  /* Mostrar o cursor de apontar ao passar por cima */
}

.btn__addproduct--text {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--white);
}

.ai-circle-plus {
  font-size: 2.4rem;
  color: var(--white);
}

/* =-=-=-=-=-=-= PRODUCT =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= USER =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= TABLE =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= SEARCH =-=-=-=-=-=-= */
.c-table__search {
  display: flex;
  align-items: center;
  max-width: 600px;
  align-self: flex-end;
}

.c-table__search--text {
  font-size: 1.8rem;
  font-weight: 600;
  margin-right: 8px;
}

.c-table__search--inputs {
  display: flex;
  align-items: center;
  background-color: var(--black1);
  padding: 16px;
  border-radius: 40px 0 0 40px;
  border: 1px solid var(--details);
  height: 50px;
  margin-left: auto;
}

#c-table__search--input {
  font-size: 1.6rem;
  width: 100%;
  color: var(--white);
}

#c-table__search--input::-moz-placeholder {
  color: var(--white);
  font-size: 1.6rem;
}

#c-table__search--input::placeholder {
  color: var(--white);
  font-size: 1.6rem;
}

.btn-search {
  border: 1px solid var(--details);
  border-left: 1px solid var(--white) !important;
  padding: 0 4px;
  width: 64px;
  height: 50px;
  border-radius: 0 40px 40px 0;
  background-color: var(--black1);
}

.ai-search {
  font-size: 1.8rem;
  color: var(--white);
}

/* =-=-=-=-=-=-= SEARCH =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= TABLE =-=-=-=-=-=-= */
.c-section__table {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.c-table_header {
  display: flex;
  justify-content: space-between;
}

.c-table {
  overflow-y: auto;
  max-height: 320px;
  position: relative;
  border-radius: 10px;
  border: 2px solid var(--white);
}

.c-table__table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  text-align: center;
  color: var(--white);
  border: 1px solid var(--black3);
}

.c-table__table thead th {
  position: sticky;
  z-index: 2;
  top: -1px;
  padding: 8px 10px;
  background-color: var(--black3) !important;
  font-size: 1.4rem;
  font-weight: 500;
}

.colum-fixed {
  position: sticky;
  left: -2px;
  z-index: 1;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.colum-desc {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wrap {
  white-space: nowrap;
}

.row-fixed {
  z-index: 2 !important;
}

.colum-id {
  width: 50px !important;
}

.c-table__table tr {
  border: 1px solid var(--black2);
}

.c-table__table tr:nth-child(even) {
  background-color: var(--black3);
}

.c-table__table td {
  font-size: 1.3rem;
  border: 1px solid var(--black1);
  padding: 8px;
}

.c-table__table td:last-child {
  min-width: 131px;
}

.btn-table {
  width: 125px;
}

/* Pedidos */
.btn__table {
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 500;
}

.pedidos-buttons {
  display: flex;
  justify-content: space-around;
  gap: 8px;
}

/* Pedidos */
#contato {
  width: 200px;
}

/* =-=-=-=-=-=-= TABLE =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= TABLE =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= BODY =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= SECTION =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= PRODUCTS =-=-=-=-=-=-= */
.testeBack {
  display: none;
  width: 100%;
  height: 100%;
  /* background-color: var(--black3); */
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  z-index: 4;
  position: fixed;
}

.testeBack.openTestBack {
  display: block;
}

.c-modal__editproduct {
  display: block;
  padding: 0 18px;
  width: 730px;
  z-index: 5;
}

.c-modal__addproduct {
  display: none;
  padding: 0 18px;
  width: 500px;
  z-index: 5;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

.c-modal__addproduct.openSectionProduct {
  display: block;
}

.c-section__product {
  display: none;
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  background-color: var(--black3);
  border-radius: 15px;
  box-shadow: 0px 0px 10px var(--black1);
}

.c-product__inputs--catalogo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0;
}

/* Estilos para o Toggle Switch */
.c-product__inputs--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.toggle-switch input {
  position: absolute;
  z-index: 2;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #4CAF50;
}

input:focus + .slider {
  box-shadow: 0 0 1px #4CAF50;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* Opcional - para uma aparência de "On/Off" */
.slider:after {
  content: "";
  color: white;
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 12px;
}

input:checked + .slider:after {
  content: "";
  /* Ou qualquer outro texto que você preferir */
}

/* =-=-=-=-=-=-= HEADER =-=-=-=-=-=-= */
.c-product__header {
  display: flex;
  justify-content: space-between;
}

.c-product--title {
  font-size: 1.8rem;
  font-weight: 600;
}

.c-product--icon {
  width: 18px;
  cursor: pointer;
}

.ai-cross {
  font-size: 1.6rem;
  color: var(--white);
}

/* =-=-=-=-=-=-= HEADER =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= INPUTS =-=-=-=-=-=-= */
.c-product__input--inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c-wrapper-inputs {
  display: flex;
  gap: 6px;
}
.c-wrapper-inputs .input {
 flex-grow: 1;
}
.c-wrapper-inputs .input-email {
  flex-grow: 15;
}

.metodo-pagamento {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.metodo-pagamento label {
  font-size: 1.8rem;
}

.metodo-pagamento select {
  margin-left: 4px;
  border-radius: 8px;
  border: 2px solid var(--details);
  background-color: transparent;
  color: var(--white);
  padding: 8px;
}

.metodo-pagamento select option {
  color: var(--black3);
  padding: 4px;
}

.metodo-pagamento select:focus {
  border-color: var(--details);
}

label {
  font-size: 1.4rem;
}

.inputs label, .inputs-nfe__inputs .input {
  text-align: center;
}
.infos-basic {
  margin-bottom: 10px;
}
.inputs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 10px 0;
  padding: 10px;
  border-top: 2px solid var(--details);
  border-bottom: 2px solid var(--details);
}

.inputs .input {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.inputs_minimo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.inputs-nfe .inputs-nfe__inputs{
  display: flex;
  flex-direction: column;
  gap: 8px;
  row-gap: 10px;
  height: 380px;
  overflow-y: auto;
}

.selectInput {
  height: 41px;
  font-size: 1.4rem;
  background-color: var(--black1);
  color: var(--white);
  font-family: "Poppins";
  border: none;
  border-radius: 5px;
}

.inputs-nfe__inputs .input {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.inputs-nfe__inputs label {
  display: flex;
  gap: 8px;
}
.input-icms {
  border-bottom: 2px solid var(--details);
  padding-bottom: 6px;
}
/* =-=-=-=-=-=-= BTN =-=-=-=-=-=-= */
.btn__product--save {
  cursor: pointer;
  background-color: var(--details);
  border: none;
  border-radius: 10px;
  color: var(--white);
  font-size: 1.6rem;
  padding: 8px 32px;
  margin: 0 auto;
  width: 200px;
}

.btn-infoProduto {
  cursor: pointer;
  background-color: var(--details);
  border: none;
  border-radius: 10px;
  color: var(--white);
  font-size: 1.6rem;
  padding: 8px 32px;
  margin: 0 auto;
  width: 200px;
}
.inputs-abas input[type="radio"] {
  display: none;
}
.inputs-abas label {
  font-size: 1.6rem;
  padding: 8px 12px;
}
.inputs-abas input[type="radio"]:checked + label {
  background-color: var(--details);
  color: var(--white);
  border-radius: 10px 10px 0 0;
}

/* .btn-tooltip{
  position: relative;
} */
.c-tooltipBox {
  display: flex;
}
.tooltip-text{
  display: block;
  width: 400px;
  position: absolute;
  z-index: 3;
  visibility: hidden;
  text-align: left;
  background-color: var(--black3);
  padding: 10px;
  font-size: 12px;
  border-radius: 5px;
  font-weight: normal;
}
.btn-tooltip:hover .tooltip-text{
  visibility: visible;
}
.tooltip-text span {
  display: block;
  font-size: 1.2rem;
  font-weight: normal;
}
.tooltip-text-desc-g {
  width: 300px;
}
.tooltip-top {
  top: -45px;
  left: -25%;
}
.tooltip-left {

}
.tooltip-right {

}
.tooltip-bottom {
  top: 30px;
  margin-right: -100px;
}


.tooltip-info {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-weight: normal;
  padding: 4px;
  border: 1px solid var(--details);
  border-radius: 50%;
  font-size: 1.2rem;
}

.btn-status {
  background-color: var(--warning); /* Amarelo escuro para melhor contraste */
  color: #212529; /* Cor escura para o texto */
  border: none;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.btn-status.bg-warning {
  background-color: var(--warning);
}
.btn-status.bg-success {
  background-color: var(--success);
}
.btn-status.bg-error {
  background-color: var(--error);
}
.btn-status.bg-neutral {
  background-color: var(--neutral);
}
/* =-=-=-=-=-=-= BTN =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= INPUTS =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= PRODUCTS =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= EDITAR FORMULARIO =-=-=-=-=-=-= */
.editproduct {
  margin: auto;
}

/* =-=-=-=-=-=-= EDITAR FORMULARIO =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= ALERT =-=-=-=-=-=-= */
.alert {
  background-color: var(--black1);
  color: var(--white);
  font-size: 1.6rem;
  padding: 10px;
  border-radius: 5px;
}

/* =-=-=-=-=-=-= ALERT =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= CLIENT =-=-=-=-=-=-= */
.c-section__clients {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 60px 32px 0 32px;
}

/* =-=-=-=-=-=-= CLIENT =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= HOME =-=-=-=-=-=-= */
.c-section__home {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 32px 32px 32px;
  gap: 22px;
  height: calc(100% - 100px);
}

.c-home--title {
  font-size: 2.4rem;
}

.c-home__infos {
  display: grid;
  /* flex-direction: column; */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "sc sc sc h" "t t t  h";
  grid-gap: 18px;
}

.c-home__card {
  background-color: var(--black2);
  border-radius: 15px;
  padding: 15px;
}

.vt,
.ct,
.v {
  display: flex;
  height: 120px;
  align-items: center;
  gap: 12px;
}

/* Graficos */
.grafico-title,
#c-historico__title {
  font-size: 2.2rem;
  font-weight: 500;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--details);
}

.grafico-info {
  display: flex;
  flex-direction: column;
}

.grafico-info--value {
  font-size: 2.8rem;
}

.grafico-info--title {
  font-size: 1.6rem;
}

.container {
  width: 100%;
  height: 300px;
}

/* Graficos */
/* Historico */
.h {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 15px;
  text-align: center;
}

.c-historico__info {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--details);
}

.c-historico--title {
  font-size: 1.6rem;
}

.c-historico--value {
  font-size: 1.8rem;
  font-weight: 500;
}

/* Historico */
.c-card__info {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.ai {
  min-width: 50px;
  min-height: 50px;
  stroke-width: 1;
  color: var(--details);
}

.c-card--title {
  font-size: 1.6rem;
}

.c-card--value {
  font-size: 1.8rem;
}

.scroll {
  grid-area: sc;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-gap: 12px;
}

.sc {
  grid-area: sc;
}

.rv {
  grid-area: rv;
}

.g {
  grid-area: g;
  display: flex;
  flex-direction: column;
  gap: 16px;
  display: none;
}

#myChart {
  /* max-width: 825px; */
  max-height: 400px;
  margin-top: 8px;
}

.h {
  grid-area: h;
  /* display: none; */
}

.t {
  grid-area: t;
}

/* =-=-=-=-=-=-= TABLE =-=-=-=-=-=-= */
.t {
  display: flex;
  flex-direction: column;
  padding: 12px 18px;
  gap: 12px;
}

.c-table__btn {
  border: none;
  cursor: pointer;
  background-color: transparent;
  padding: 8px;
  color: var(--white);
  font-size: 1.8rem;
}

/* =-=-=-=-=-=-= TABLE =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= HOME =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= PEDIDO =-=-=-=-=-=-= */
.c-folhadepedido {
  width: 950px;
  /* height: calc(100% - 80px); */
}

/* =-=-=-=-=-=-= TITULO =-=-=-=-=-=-= */
.c-pedido__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.c-pedido__header span {
  font-size: 2.4rem;
}

/* =-=-=-=-=-=-= TITULO =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= NOTA =-=-=-=-=-=-= */
.c-pedido__nota {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* =-=-=-=-=-=-= INFO EMPRESA =-=-=-=-=-=-= */
.c-nota__infoempresa {
  display: flex;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--details);
}

.c-nota__logo {
  width: 151px;
  height: 151px;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.c-nota__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 1.8rem;
}

.c-nota__cliente--info {
  width: 100%;
  padding: 18px;
  background-color: var(--black2);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.c-nota__cliente--title {
  font-size: 2rem;
}

.c-nota__cliente--text {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
}

.c-nota__cliente--text input {
  background-color: var(--black2);
  border-radius: 0;
}

.c-nota__produtos table {
  width: 100%;
  font-size: 1.6rem;
}

.c-nota__produtos table th {
  text-align: left;
  padding: 8px;
  word-wrap: normal;
  font-size: 1.6rem;
}

.c-nota__produtos table th, .c-nota__produtos table td {
  border: 1px solid var(--white);
}

.c-nota__produtos table td {
  padding: 8px;
  font-size: 1.4rem;
}

.c-nota__produtos table .td-Pedido {
  width: 140px;
}

.c-nota__produtos table th:nth-child(2) {
  width: 250px;
}

.c-nota__produtos table th:nth-child(1n+4) {
  width: 120px;
  padding: 0 12px;
  text-align: end;
}

.c-nota__produtos table td:nth-child(1n+4) {
  text-align: end;
  padding: 8px 26px;
}

/* =-=-=-=-=-=-= INFO EMPRESA =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= NOTA =-=-=-=-=-=-= */
/* =-=-=-=-=-=-= PAGAMENTO =-=-=-=-=-=-= */
.c-nota__pagamento {
  padding: 18px 18px 10px 18px;
  background-color: var(--black2);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.c-pagamento__info {
  display: flex;
  gap: 4px;
  align-items: center;
}

.c-pagamento--title {
  font-size: 1.8rem;
  font-weight: 500;
}

.c-pagamento--text {
  font-size: 1.8rem;
}

.c-pagamento__table {
  width: 100%;
  text-align: center;
}

.c-pagamento__table th {
  font-size: 1.8rem;
  padding: 8px;
  border-bottom: 1px solid var(--white);
}

.c-pagamento__table td {
  padding: 8px;
  font-size: 1.6rem;
}

.c-pagamento__table th:last-child {
  width: 150px;
  padding: 8px 26px;
  text-align: end;
}

.c-pagamento__table td:last-child {
  padding: 8px 26px;
  text-align: end;
}

.c-nota__pagamento h3 {
  font-weight: 6 0;
  font-size: 20px;
  padding-bottom: 4px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--white);
}

.nota-folhaPedido td {
  padding: 4px;
}

.nota-folhaPedido thead tr {
  text-align: left;
}

.nota-folhaPedido thead th {
  font-weight: 600;
}

.nota-folhaPedido thead tr th:first-child {
  width: 200px;
}

.nota-folhaPedido .tfoot tr:first-child td {
  border-top: 1px solid white;
}

.nota-folhaPedido .tfoot tr:last-child td {
  border-top: 1px solid white;
}

/* =-=-=-=-=-=-= PAGAMENTO =-=-=-=-=-=-= */
.btn-imprimir {
  align-self: flex-end;
  padding: 8px 60px;
  color: var(--white);
  background-color: var(--details);
  font-size: 1.8rem;
  border-radius: 50px;
  border: none;
  cursor: pointer;
}

/* ESTILO DO UPLOAD DE ARQUIVO - ESTOQUE */
.droparArquivo {
  position: relative;
  display: flex;
  flex-direction: column;
}

.droparArquivo input[type=file] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.droparArquivo .botaoUploadArquivo {
  border: none;
  background: #2D7AFF;
  padding: 10px 10px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.droparArquivo .botaoUploadArquivo:hover {
  background: #2D7AFF;
}

.droparArquivo .uploadMenssagem {
  display: block;
  text-align: center;
}

.droparArquivo input[type=file]:not(:focus) + .tituloUploadArquivo {
  color: #222;
  text-decoration: underline;
  cursor: pointer;
}

.droparArquivo input[type=file]:not(:focus) + .tituloUploadArquivo:hover {
  color: #111;
}

.droparArquivo input[type=file]:not(:focus) + .tituloUploadArquivo::after {
  content: " (clique para selecionar)";
  font-size: 16px;
  font-weight: normal;
  text-decoration: none;
}

/* ESTILO SELECT VENDAS */
.log {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.logSelect label {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

#logContent {
  font-size: 18px;
  max-height: 400px;
  overflow: auto;
}

.btn__logs {
  padding: 8px 16px;
  background-color: var(--black3);
  border: 2px solid var(--details);
  border-radius: 10px;
  cursor: pointer;
}

.c-vendas-select-name {
  font-size: 16px;
  padding: 8px;
  border-radius: 4px;
  border: none;
  background-color: #f7f7f7;
  color: #333;
}

.c-vendas-select-name:focus {
  outline: none;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
}

.c-vendas-select-name:hover {
  background-color: #eee;
}

/* =-=-=-=-=-=-= PEDIDO =-=-=-=-=-=-= */
/* Popup */
.close-popup {
  font-size: 1.6rem;
  color: var(--white);
}

.c-modal__popup.openSelectPopup {
  display: block;
}

.blackBackgroundkPopup.openBlackBackgroundkPopup {
  display: block;
}

.c-modal__popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

/* .c-section__clients {
    position: relative;
} */
.blackBackgroundkPopup {
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9998;
}

/* Fim popup */
/* Checkbox Permissao */
.checkboxPermissao {
  display: none;
}

.labelPermissao {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  margin-right: 15px;
  font-size: 16px;
  line-height: 20px;
  color: white;
}

.labelPermissao:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  margin-left: 5px;
  top: 2px;
  width: 12px;
  height: 12px;
  border: 1px solid #999;
  background-color: #fff;
}

.checkboxPermissao:checked + .labelPermissao:before {
  content: "✓";
  text-align: center;
  line-height: 18px;
  /* padding: 8px; */
  color: #fff;
  background-color: black;
}

.checkboxPermissao:disabled + .labelPermissao {
  color: #ccc;
  opacity: 0.7;
}

.c-product__input--name legend {
  font-size: 14px;
  padding: 8px;
}

.c-product__input--name div {
  padding: 4px 0;
}

/* Fim Permissao */
/* Financeiro */
.c-financeiro {
  padding: 16px;
  margin: 0 16px;
  background-color: var(--black2);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.c-financeiro h1 {
  font-size: 3.2rem;
  font-weight: 600;
}

.dados-subTitle {
  font-size: 2.2rem;
  color: var(--details);
  padding: 12px 0 8px;
}

.dados-subSubTitle {
  padding: 12px 0 8px;
  color: var(--details);
  font-size: 2rem;
}

.dados-info {
  display: flex;
}

.dados-campos {
  font-weight: bold;
  font-size: 18px;
  margin-right: 4px;
}

.dados-valores {
  font-size: 18px;
}

.dados-inputForm {
  display: flex;
  gap: 12px;
  padding-bottom: 12px;
  justify-content: flex-end;
}

.dadosForm {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.btn__dadoFinanceiro {
  border: none;
  padding: 8px 16px;
  background-color: var(--black3);
  border: 2px solid var(--details);
  border-radius: 10px;
  cursor: pointer;
  color: var(--white);
  width: 100px;
}

/* Financeiro */
/* Vendas */
.c-vendas {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 0 32px 32px 32px;
}

/* Cliente */
.c-vendas__cliente {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 14px;
  padding: 24px;
  background-color: var(--black2);
  border-radius: 15px;
  width: 100%;
}

.c-vendas__cliente span {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}

.c-vendas__cliente span label {
  font-size: 1.6rem;
}

.c-vendas__cliente span input {
  min-height: 50px;
  font-size: 1.4rem;
}

#erroValorPagamento {
  color: red;
  display: none;
}

/* Cliente */
/* Produtos */
.c-vendas__produtos {
  display: flex;
  align-items: flex-start;
  padding: 24px;
  background-color: var(--black2);
  border-radius: 15px;
  max-height: 550px;
  overflow: hidden;
}

.c-nota__produtos {
  overflow-y: auto;
}

#detail {
  height: 100%;
  border-left: 1px solid var(--details);
  margin: 0 30px;
}

/* Tabela */
.c-produtos__table {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-y: scroll;
}

.c-compras__produtos {
  display: flex;
  gap: 14px;
  padding: 24px;
  background-color: var(--black2);
  border-radius: 15px;
  width: 100%;
}

.c-produtos__table table {
  height: 100%;
  width: 100%;
  max-height: 350px;
  text-align: center;
}

.c-produtos__table::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.c-produtos__table table tr {
  height: 35px;
}

.product-row {
  background-color: var(--black1);
}

.c-produtos__table table th {
  font-size: 1.6rem;
  font-weight: 500;
  background-color: var(--black1) !important;
  border-top: 1px solid var(--white);
  border-bottom: 1px solid var(--white);
  position: sticky;
  top: 0;
}

.c-produtos__table table tfoot {
  position: sticky;
  bottom: 0;
  background-color: var(--black2);
}

.c-produtos__table table td {
  font-size: 1.4rem;
  max-height: 50px;
}

.c-produtos__table table th:first-child {
  border-radius: 10px 0 0 0;
  border-left: 1px solid var(--white);
}

.c-produtos__table table th:last-child {
  border-radius: 0 10px 0 0;
  border-right: 1px solid var(--white);
  width: 100px !important;
}

.c-produtos__table table th:nth-child(1n+4) {
  width: 135px;
  text-align: end;
  padding: 0 12px;
}

.c-produtos__table table td:nth-child(1n+4) {
  text-align: end;
  padding: 0 12px;
}

.c-produtos__table table tbody {
  height: 150px;
}

.c-produtos__table table tfoot tr:nth-last-child(3) > td {
  border-top: 1px solid var(--white);
}

.c-produtos__table table tfoot tr:nth-last-child(1) > td {
  border-top: 1px solid var(--white);
  border-bottom: 1px solid var(--white);
}

.c-produtos__table table tfoot tr:nth-last-child(1) > td:first-child {
  border-left: 1px solid var(--white);
  border-radius: 0 0 0 15px;
}

.c-produtos__table table tfoot tr:nth-last-child(1) > td:last-child {
  border-right: 1px solid var(--white);
  border-radius: 0 0 15px 0;
}

.c-produtos__table table tfoot tr:nth-last-child(1) {
  background-color: var(--black2);
}

/* Tabela */
.c-produtos__add {
  max-width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.c-produtos__add label {
  font-size: 1.6rem;
  margin-bottom: 8px;
}

.btn__addProduto {
  margin-top: 12px;
  border: none;
  width: 100px;
  height: 50px;
  text-align: center;
  background-color: var(--details);
  border-radius: 10px;
  color: var(--white);
  cursor: pointer;
  align-self: flex-end;
}

.c-produtos__add button {
  margin: 12px auto 0;
}

/* MODAL */
#modalPayment {
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(27, 27, 30, 0.6235294118);
  position: absolute;
  justify-content: center;
  align-items: center;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: 999;
  padding: 20px;
}

.modalContainer {
  background-color: var(--black3);
  padding: 20px;
  border-radius: 15px;
  /* width: 300px; */
}

.c-pedidoModal__header {
  display: flex;
  flex-direction: column;
  font-size: 18px;
  gap: 12px;
}

.modalTitle {
  font-size: 20px;
  text-align: center;
}

#formPagamento {
  text-align: center;
}

.modalValor {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.modalValor label {
  font-size: 1.8rem;
}

.form-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 20px;
  font-size: 18px;
}

.form-group select {
  padding: 8px 12px;
  border-radius: 10px;
  background-color: transparent;
  border: 1px solid var(--details);
  color: white;
}

.inputs-formGrup {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 20px;
}

#email {
  width: 280px;
}

.form-group select option {
  color: black;
  padding: 8px;
}

.modalbtn {
  font-size: 20px;
  padding: 8px 20px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 25px;
  font-weight: bold;
  cursor: pointer;
}

/* MODAL */
/* Produtos */
/* Vendas */
/* COMPRAS */
.select-preco-medio {
  width: 100%;
  /* O select ocupará toda a largura da célula */
  padding: 5px;
  /* Espaçamento interno para o conteúdo */
  border-radius: 4px;
  /* Bordas arredondadas */
  border: 1px solid #ddd;
  /* Borda fina e discreta */
  background-color: #2c2c2c;
  /* Cor de fundo consistente com tema escuro */
  color: #fff;
  /* Cor do texto */
  font-size: 14px;
  /* Tamanho da fonte */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* Remove a aparência padrão do select */
  cursor: pointer;
  /* Cursor de ponteiro ao passar o mouse */
  transition: background-color 0.3s ease;
  /* Transição suave para hover */
}

/* Hover: Efeito ao passar o mouse */
.select-preco-medio:hover {
  background-color: #3a3a3a;
  /* Cor de fundo mais clara para hover */
}

/* Foco: Estilo para quando o select está em foco */
.select-preco-medio:focus {
  outline: none;
  /* Remove contorno padrão */
  box-shadow: 0 0 5px #4a90e2;
  /* Adiciona contorno azul suave */
  border-color: #4a90e2;
  /* Altera a cor da borda no foco */
}

/* Estilização das opções dentro do select */
.select-preco-medio option {
  background-color: #2c2c2c;
  /* Cor de fundo das opções */
  color: #fff;
  /* Cor do texto nas opções */
}

.preco-anterior {
  font-size: 0.8rem;
  /* Tamanho da fonte menor */
  font-style: italic;
  /* Opcional: Deixar o texto em itálico */
  margin-bottom: 5px;
  /* Espaço abaixo do texto */
  display: block;
  /* Deixa o texto em bloco para alinhamento */
}

/* Estilo do fundo de carregamento */
#loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* Para garantir que esteja no topo */
  visibility: hidden; /* Inicialmente oculto */
}

/* Animação do spinner */
.spinner {
  border: 8px solid #f3f3f3; /* Cor clara */
  border-top: 8px solid #3498db; /* Cor do spinner */
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 1s linear infinite;
}

/* Keyframes para a rotação contínua */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* COMPRAS */
/* USUARIOS */
.gerenciamento-user {
  display: flex;
  align-items: center;
  justify-content: center;
}

.inp-comissao {
  width: auto !important;
  text-align: center;
}

.comissoes-subtitle {
  display: block;
  font-size: 1.8rem;
  margin-bottom: 12px;
}

#vendedor {
  padding: 12px 8px;
  background-color: transparent;
  border: 1px solid var(--details);
  border-radius: 15px;
  color: white;
  font-size: 1.6rem;
  margin-left: 8px;
}

#vendedor:focus {
  outline: none;
}

#vendedor-name {
  font-size: 1.6rem;
}

.vendedor-name {
  display: block;
  font-size: 1.6rem;
  margin: 8px 0;
}

#vendedor option {
  color: black;
}

.p-ativa {
  width: 100px;
}

.c-ativa {
  width: 150px;
}

.actions {
  width: 350px !important;
}

.status-comissao-status {
  font-size: 1.8rem;
}

.status-comissao-tipos {
  font-weight: 600;
}

.btn-gerenciar-comissoes {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.form-select-tipocomissao {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-select-tipocomissao select {
  margin-left: 4px;
  border-radius: 8px;
  border: 2px solid var(--details);
  background-color: var(--black3);
  color: var(--white);
  padding: 8px;
}

.form-select-tipocomissao select:focus {
  outline: none;
}

.ui-autocomplete {
  max-height: 200px; /* Limita a altura e adiciona uma barra de rolagem */
  overflow-y: auto; /* Adiciona barra de rolagem se necessário */
  background-color: #fff; /* Cor de fundo */
  z-index: 1000; /* Garante que a lista de sugestões esteja acima de outros elementos */
}

.ui-menu-item {
  padding: 8px 12px; /* Espaçamento entre os itens */
  cursor: pointer; /* Muda o cursor para indicar que é clicável */
}

.ui-menu-item:hover {
  background-color: #68aeff; /* Cor de fundo ao passar o mouse */
}

/* USUARIOS */
.watermark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: 20px;
}

.watermark span {
  display: flex;
  flex-wrap: wrap;
}

.watermark span:nth-child(even) {
  justify-content: center;
  align-content: center;
}

.watermark img {
  height: 110px;
  width: -moz-fit-content;
  width: fit-content;
}

@media print {
  body {
    background-color: white;
  }
  .c-nota__cliente--text input {
    color: black;
    border: none;
    padding: 0;
  }
  .c-nota__cliente--info {
    gap: 4px;
  }
  .c-header,
  .c-section__header {
    display: none;
  }
  .c-folhadepedido {
    padding: 0;
    color: rgb(17, 17, 17);
    height: 100%;
  }
  .c-nota__cliente--info {
    background-color: white;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .c-nota__produtos table thead {
    display: table-header-group;
  }
  .c-pedido__nota {
    gap: 12px;
  }
  .c-nota__info {
    font-size: 1.6rem;
    justify-content: flex-start;
  }
  .c-nota__cliente--info {
    padding: 0;
  }
  .btn-imprimir {
    display: none;
  }
  .c-nota__infoempresa {
    padding: 0;
  }
  .c-nota__logo {
    height: 135px;
    display: block;
  }
  .c-nota__produtos table, th, td {
    border: 1px solid var(--black3);
  }
  .c-nota__produtos table th {
    font-size: 1.4rem;
    font-weight: 500;
    color: black;
  }
  .c-nota__produtos table td {
    white-space: normal;
    font-size: 1.2rem;
    color: black;
  }
  .c-nota__pagamento {
    background-color: white;
  }
  .c-nota__pagamento th, .c-nota__pagamento td {
    color: var(--black3);
  }
  .nota-folhaPedido .tfoot tr:first-child td {
    border-top: 1px solid black;
  }
  .nota-folhaPedido .tfoot tr:last-child td {
    border-top: 1px solid black;
  }
  .watermark {
    display: grid;
    opacity: 0.1;
    /* Aumenta leveza ao imprimir */
  }
}/*# sourceMappingURL=style.css.map */