:root {
      --bg-0: #101010;
      --bg-1: #151515;
      --bg-2: #171717;
      --bg-3: #212121;
      --bg-4: #111111;

      --bg-o1: #10101012;
      --bg-o2: #1010103e;
      --bg-o3: #101010ad;
      --bg-o4: #101010f1;


      /* Textos */
      --color-1: #b7bfc6;
      /* --enfasis-1: {{request.user.user_configuacion.color_enfasis}}; */

      /* --bg-enfasis-1: #ffc107; */
}
.close {
      transition: 0.3s;
}
.close:hover {
      color: rgba(255, 47, 47, 0.761) !important;
      border-color: rgba(255, 47, 47, 0.761) !important;
      background-color: rgb(70, 13, 13);
      transform: scale(1.03);
}


body {
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
}
#body {
      background-color: var(--bg-0 ) !important;
}
main {
      font-family: "Poppins", sans-serif;
      width: 99dvw;
      height: 99.5dvh;
      color: #e9e9e9;
      background-color: var(--bg-0);

}
.content-view {
      background-color: var(--bg-0);
      border: 1px #33333341 solid;
      border-top: 0;
      border-bottom: 0;
      border-right: 0;
}

/* Estilos predefinidos */
h6 {
      font-weight: bold;
      color: #919191 !important;
}
p {
      font-size: 14px;
      color: #919191;
}
span {
      color: #919191;
}
i {
      color: #919191;
}
ul, li {

      color: #606060;
}
hr {
      color: #444444 !important;
}
a {
      text-decoration: none;
      color: #b7bfc6;
}

select:focus,  input:focus,    .form-control:focus,   textarea:focus,
.form-class:focus, .form-check-input:focus {
      box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.039);;
}

.form-control::placeholder {
      color:rgba(180, 180, 180, 0.45) !important;
}

.gradiant-top {
      background: linear-gradient(to top, transparent, var(--bg-0)),
      linear-gradient(to bottom, transparent, transparent) !important;
}
.gradiant-bottom {
      background: linear-gradient(to bottom, transparent, var(--bg-0)),
      linear-gradient(to top, transparent, transparent) !important;
}
.bg-black {
      background-color: var(--bg-0) !important;
}


.send {
      transition: 0.3s;
}
.send:hover {
      color: #a5ff2fc2 !important;
      border-color: #a5ff2fc2 !important;
      background-color: #121b06 !important;
      transform: scale(1.03);
}
.send-1 {
      color: #a5ff2fc2 !important;
}

/* Interfaz */
#section-escritorio-nav {
      background-color: var(--bg-0) !important;
}



.head-company {
      background: linear-gradient(to bottom, transparent, var(--bg-0)),
      linear-gradient(to top,#0b0b0b , #0b0b0b39) !important;
}


/* Dashboar */
.card-section .card-info {
      height: 270px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-decoration: none;
      /* padding: 0.4rem; */
      border-radius: 3rem;
      transition: 0.3s ;
      background-color: var(--bg-4);
      border: 1px solid var(--bg-2);
      color: #858585;
}

.card-section .card-info div {
      display: flex; flex-wrap:  wrap;
      align-content: center;
      padding: 2rem;

}
.card-section .card-info div span {
      width: 100%;
}
.card-section .card-info div h6 {
      width: 100% !important ;
      margin: 0 !important;
      font-weight: bold;
      color: inherit;
}

.card-section .card-info div p {
      width: 100%;
      font-size: 14px;
}
.card-section i {
      min-width: 80px; min-height: 80px;
      max-width: 80px; max-height: 80px;
      border-radius: 50%;
      font-size: 30px;
      margin: 0;
      margin-top: 0.5rem;
      margin-bottom: 1.2rem !important;
      display: flex; align-content: center; flex-wrap: wrap;
      justify-content: center;
      color: #a1a9b0;
      background-color: var(--bg-1);
}

.card-section h6, p {
      color: #676c71;
}
.card-section p {
      /* color: #232323; */
}
@media (max-width: 600px) {
      .card-section {
            grid-template-columns: repeat(1, 1fr) !important;
      }
      .card-section .card-info {
            border-radius: 2.5rem;
      }

}




/* Almacenes */

.sec-card {
      display: grid; grid-template-columns: repeat(3,  1fr);
      gap: 10px;
      max-height: max-content; width: 100%;
      /* position: absolute; right: 0; */
      padding:1rem
}
.sec-card a {
      text-decoration: none;
}
.sec-card .carta {
      position: relative;
      width: 100%;
      background-color: var(--bg-2);
      border-radius: 2.5rem;
      display: flex; flex-wrap: wrap; align-items: center; padding: 0.5rem;
      transition: 0.3s;
      border: 1px solid #262626;
      cursor: pointer;
      -webkit-backdrop-filter: blur(5px) !important;
      backdrop-filter: blur(5px) !important;
}
.sec-card .carta:hover {
      transform: scale(1.03);
}
.sec-card .carta div {
      width: 100%;
      background-color: var(--bg-2);
      padding: 0.9rem;
      border-radius: 2rem;
      border: 1px solid #262626;
      height: 90px;
}
.sec-card .carta i {
      display: flex; flex-wrap: wrap; align-items: center; padding: 2rem;
      font-size: 40px;
}
.sec-card .carta p {
      width: 100%;
}


/* Items */
.list-grid-item {
      background-color: var(--bg-1);
}
.item-pos {
      display: flex; flex-wrap: wrap; align-content: start;
      justify-content: center;
      width: 100%;
      height: 100%;
      border-radius: 2.5rem !important;
      padding: 0.1rem !important;
      background-color: var(--bg-2) !important;

      transition: 0.3s;
}

.item-pos .image-item {
      width: 110px !important;
      height: 110px !important;
      border-radius: 10% !important;
      border: #e2e2e2 1px solid;
      object-fit: cover !important;
      /* border-bottom-right-radius: 0.4rem !important; */
      /* border-bottom-left-radius: 0.4rem !important; */
}
.item-pos hr {
      color: #8e949a !important;
}

.item-pos .name-item {
      margin-top: 0.3rem !important;
      font-size: 14px;
      color: #9ba4ad !important;
      font-weight: 500;

}

.price-item {
      font-size: 16px;
      color: #b9bdc0 !important;
      font-weight: 500;

}


.div-ventas {
      border: 1px solid rgba(35, 35, 35, 0.658) !important;
      border-top: 0 !important;
      border-bottom:  0 !important;
}