:root {
  --color-primary: #FF6B35;
  --color-secondary: #161D21;
  --chart-color-1: #2E5EAA; 
  --chart-color-2: #45B7D1; 
  --chart-color-3: #7B287D; 
  --chart-color-4: #1F956B; 
}
@font-face{
  font-family: "SF UI Display";
  src:url('../../static/fonts/fonts-text/SF-UI-Display-Regular.otf');
}

body{
  font-family: SF UI Display;
}
h5{
  font-family: SF UI Display;
}
h6{
  font-family: SF UI Display;
}

/* Bloque de mediaquerys*/
/*xl*/
@media (min-width: 1200px){
  html{
    font-size: 13px;
  }
}
/*lg*/
@media (min-width: 992px) and (max-width: 1199px){
  html{
    font-size: 13px;
  }
}
/*md*/
@media (min-width: 768px) and (max-width: 991px){
  html{
    font-size: 11px;
  }
}
/*sm*/
@media(min-width: 576px) and (max-width: 767px){
  html{
    font-size: 11px;
  }
}
/*xs*/
@media (max-width: 575px){
 html{
    font-size: 10px;
  }
}
/* Fin Bloque*/

/* body{
  font-family: Manrope-Regular;
} */

.bg-Clogin{
  background: url('../../static/images/login.png');  
}

.full-Cimage{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  
}

@media (orientation: portrait) {
    .ptp-C40 {
      padding-top: 40% !important;
    }
    .ptp-C50 {
      padding-top: 50% !important;
    }
    .ptp-C60 {
      padding-top: 60% !important;
    }
    .ptp-C70 {
      padding-top: 70% !important;
    }
    .ptp-C80 {
      padding-top: 80% !important;
    }
  }

.pt-C25 {
  padding-top: 25%;
}

.badge-Cprimary {
  color: #fff;
  background-color: var(--color-primary);
}

.pt-C35 {
  padding-top: 35%;
}

.pt-C17 {
  padding-top: 17%;
}
.pb-C17 {
  padding-bottom: 17%;
}
/* Fin Bloque*/

.bg-Cprimary{
  background-color: var(--color-primary);
}

.bg-Csecondary{
  background-color: var(--color-secondary);
}

.bg-Ctertiary{
  background-color: var(--color-black);
}


.text-Cprimary{
  color: var(--color-primary) !important;
}

a.text-Cprimary:hover, a.text-Cprimary:focus {
  color: var(--color-primary) !important;
}

.text-Csecondary{
  color: var(--color-secondary);
}

.text-Ctertiary{
  color: var(--color-tertiary);
}


a:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
  color: inherit !important;
  text-decoration: none !important;
}

.btn:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}
i:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.border-Cprimary{
  border: 1px var(--color-primary) solid;
}

.border-Cprimary {
  border-color: var(--color-primary) !important;
}

.border-2 {
  border-width: 2px !important;
}

.nav-link.active {
  color: var(--color-primary) !important;
}


.min-vh-C76 {
  min-height: 78vh !important;
}

.vh-C65{
  height: 65vh;
}

.vh-C10{
  height: 2vh;
}

.vh-C75{
  height: 75vh;
}

.mt-C5{
  margin-top: 5vh;
}


.rounded-C30{
  border-radius: 30px;
}


ul.ui-autocomplete {
  background-color: rgb(233, 236, 239);
  position: absolute;
  border: 1px var(--color-secondary) solid;
  padding-left: 8px; 
  z-index: 9999;
  font-size: 16px;
}

ul.ui-autocomplete li{
  list-style-type: none;
  padding:2px;
} 
ul.ui-autocomplete li:hover{
  background: rgba(var(--color-secondary),0.3);

} 
ul.ui-autocomplete li .ui-state-active{
  background: rgba(var(--color-secondary),0.3);
}

[aria-live="assertive"]{
  display: none;
}

.cpointer {
  cursor: pointer;
}

#id_pos_e_btn[disabled] {
    opacity: 1 !important;
    background-color: var(--color-secondary) !important; /* Use your actual color value if var() doesn't work */
}

.products-grid {
    display: grid;
    gap: 0.35rem;
    width: 100%;
    padding: 0.35rem;
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .products-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

@media print {
  .no-print {
      display: none !important;
  }
  
  /* hidden buttons */
  .btn {
      display: none !important;
  }
  
  /* hidden navbar, breadcrumb, modal */
  .navbar, .breadcrumb, .modal {
      display: none !important;
  }
  
  /* ensure that the content is printed correctly */
  .container-fluid {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
  }
  
  /* improve readability in print */
  body {
      font-size: 12pt !important;
      line-height: 1.4 !important;
      color: #000 !important;
      background: #fff !important;
  }
  
  /* styles for titles in print */
  h2, h3, h4, h5 {
      color: #000 !important;
      margin-bottom: 10px !important;
  }
  
  /* styles for tables in print */
  .table {
      margin-bottom: 20px !important;
  }
  
  .table thead th {
      background-color: #f8f9fa !important;
      font-weight: bold !important;
  }
  
  /* ensure that the tables are printed correctly */
  .table {
      border-collapse: collapse !important;
      width: 100% !important;
  }
  
  .table th,
  .table td {
      border: 1px solid #ddd !important;
      padding: 8px !important;
  }
  
  /* hidden elements */
  .print-hide {
      display: none !important;
  }
  
  /* show elements only during print */
  .print-only {
      display: block !important;
  }
}

.product-item {
    width: 100%;
    height: 200px;
    margin: 0;
    padding: 0;
    min-width: 0; /* Prevents content from forcing wider than container */
}

.product-item .card {
    height: 100%;
    margin: 0;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    word-wrap: break-word;
    overflow-wrap: break-word;
    position: relative;
}

.product-item .card .product-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 60px;
}

.product-item .image-container {
    height: 70px; /* Fixed height for image container */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.30rem;
}

.product-item .card-img-top {
    max-height: 75px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.product-item .product-info {
    display: flex;
    flex-direction: column;
}

.product-item .product-details {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.10rem;
    padding-bottom: 1rem;
}

.product-item .product-footer {
    position: absolute;
    bottom: 0;
    left: 0.5rem;
    right: 0.5rem;
    padding: 0;
}

.product-item .product-footer hr {
    margin: 0;
    padding: 0;
}

.product-item .card-title,
.product-item .card-text {
    margin: 0;
    padding: 0;
    line-height: 1.2;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}