.search-modern{ margin: 10px 0 15px; }
  .search-wrapper{
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    transition: box-shadow .2s, border-color .2s;
  }
  .search-wrapper:focus-within{
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13,110,253,.15);
  }
  .search-icon{ color: #94a3b8; font-size: 14px; margin-right: 8px; }
  .search-input{
    flex: 1;
    border: none;
    outline: none;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    background: transparent;
  }
  .search-input::placeholder{ color: #94a3b8; font-weight: 400; }
  .search-clear{
    border: none;
    background: #f1f5f9;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
  }


    
  /* contenedor principal */
  .familias-carousel{
    position: relative;
    width: 100%;
  }

  /* pista horizontal */
  #trackFamilias{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 10px 48px;
    scroll-behavior: smooth;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    
    /* Firefox - scroll semi transparente */
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.25) transparent;
  }

  /* Chrome, Edge, Safari - scroll semi transparente */
  #trackFamilias::-webkit-scrollbar{
    height: 6px;
  }
  #trackFamilias::-webkit-scrollbar-track{
    background: transparent;
  }
  #trackFamilias::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,0.25);
    border-radius: 3px;
  }
  #trackFamilias::-webkit-scrollbar-thumb:hover{
    background: rgba(0,0,0,0.4);
  }

  /* categorías */
  #trackFamilias .categories{
    flex: 0 0 auto;
    padding: 8px 14px;
    background: #f1f1f1;
    border-radius: 20px;
    white-space: nowrap;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s;
  }
  #trackFamilias .categories:hover{
    background: #e4e4e4;
  }
  #trackFamilias .categories.selectedGat{
    background: #0d6efd;
    color: #fff;
  }

  /* flechas semi transparentes */
  .familias-carousel .carousel-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    cursor: pointer;
    font-size: 18px;
    transition: background .2s;
  }
  .familias-carousel .carousel-arrow:hover{
    background: rgba(255,255,255,0.85);
  }
  .familias-carousel .prev{ left: 6px; }
  .familias-carousel .next{ right: 6px; }



  .productos-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }
  .product-card{
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    cursor: pointer;
    overflow: hidden;
    transition: transform .15s;
  }
  .product-card:hover{ transform: translateY(-2px); }
  .product-img{ position: relative; width: 100%; padding-top: 100%; background: #f5f5f5; }
  .product-img img{ position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; }
  .price-tag{
    position: absolute; bottom: 5px; right: 5px;
    background: rgba(0,0,0,.7); color:#fff; font-size:12px;
    padding: 2px 6px; border-radius: 4px;
  }
  .product-info{ padding: 6px 8px; }
  .product-name{ font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .product-family{ font-size: 11px; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .paginador{ display:flex; justify-content:center; gap:5px; margin-top:10px; flex-wrap: wrap; }
  .paginador button{ border:1px solid #ddd; background:#fff; padding:4px 10px; border-radius:4px; cursor:pointer; }
  .paginador button.active{ background:#0d6efd; color:#fff; border-color:#0d6efd; }




/* ===== DETALLE DE VENTAS - colores sobrios ===== */

/* Inputs como el buscador */
#savepos.form-control{
  border:1px solid #e2e8f0!important;
  border-radius:10px!important;
  padding:10px 12px!important;
  background:#fff!important;
  color:#1e293b!important;
  font-weight:500!important;
  box-shadow:none!important;
  transition:border-color.2s, box-shadow.2s;
}
#savepos.form-control:focus{
  border-color:#0ea5e9!important; /* azul celeste sobrio */
  box-shadow:0 0 0 3px rgba(14,165,233,.15)!important;
  outline:none!important;
}
#savepos.form-control-feedback{
  color:#94a3b8!important;
}

/* quita el negro bold inline que tenías */
#savepos.form-control[style]{
  color:#1e293b!important;
  font-weight:500!important;
}

/* Input-group del cliente (botón verde + input) */
#savepos.input-group{
  border:1px solid #e2e8f0;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
#savepos.input-group.form-control{
  border:0!important;
}
#savepos.input-group.btn{
  border-radius:0;
}

/* Alertas rosadas -> gris azulado sobrio */
#savepos.alert-danger,
#muestra_mensaje.alert-danger{
  background:#f1f5f9!important;
  border:1px solid #cbd5e1!important;
  color:#334155!important;
}

/* Modal de pago: quita el rojo */
#myModalPago.modal-header.bg-danger{
  background:#475569!important; /* gris pizarra */
}
#myModalPago.modal-header.modal-title{
  color:#fff!important;
}

/* Tabla vacía "NO HAY DETALLES" - quita rosado */
#carrito.warning-element{
  border-left:2px solid #94a3b8!important;
  background:#f8fafc!important;
}

/* Totales y labels más limpios */
#savepos h4, #savepos h5{
  color:#334155;
  font-weight:500;
}
#savepos label{
  color:#475569;
}

/* Selects y textarea igual que inputs */
#savepos select.form-control,
#savepos textarea.form-control{
  border:1px solid #e2e8f0!important;
  border-radius:10px!important;
}




.table {
 width:100%;
 margin-bottom:1rem;
 color:#313131
}

.table td,
.table th {
 padding:.9375rem .4rem;
 vertical-align:top;
 border-top:1px solid rgba(120,130,140,.13)
}
.table thead th {
 vertical-align:bottom;
 border-bottom:2px solid rgba(120,130,140,.13)
}
.table tbody+tbody {
 border-top:2px solid rgba(120,130,140,.13)
}
.table-sm td,
.table-sm th {
 padding:.3rem
}
.table-bordered,
.table-bordered td,
.table-bordered th {
 border:1px solid rgba(120,130,140,.13)
}
.table-bordered thead td,
.table-bordered thead th {
 border-bottom-width:2px
}
.table-borderless tbody+tbody,
.table-borderless td,
.table-borderless th,
.table-borderless thead th {
 border:0
}
.table-striped tbody tr:nth-of-type(odd) {
 background-color:rgba(0,0,0,.05)
}
.table-hover tbody tr:hover {
 color:#313131;
 background-color:rgba(0,0,0,.075)
}
.table-primary,
.table-primary>td,
.table-primary>th {
 background-color:#d7daf2
}
.table-primary tbody+tbody,
.table-primary td,
.table-primary th,
.table-primary thead th {
 border-color:#b5bbe8
}
.table-hover .table-primary:hover,
.table-hover .table-primary:hover>td,
.table-hover .table-primary:hover>th {
 background-color:#c4c8ec
}
.table-secondary,
.table-secondary>td,
.table-secondary>th {
 background-color:#dee2e7
}
.table-secondary tbody+tbody,
.table-secondary td,
.table-secondary th,
.table-secondary thead th {
 border-color:#c1c9d3
}
.table-hover .table-secondary:hover,
.table-hover .table-secondary:hover>td,
.table-hover .table-secondary:hover>th {
 background-color:#cfd5dc
}
.table-success,
.table-success>td,
.table-success>th {
 background-color:#c4f2db
}
.table-success tbody+tbody,
.table-success td,
.table-success th,
.table-success thead th {
 border-color:#91e7bc
}
.table-hover .table-success:hover,
.table-hover .table-success:hover>td,
.table-hover .table-success:hover>th {
 background-color:#afedce
}
.table-info,
.table-info>td,
.table-info>th {
 background-color:#c4e7f7
}
.table-info tbody+tbody,
.table-info td,
.table-info th,
.table-info thead th {
 border-color:#91d3f0
}
.table-hover .table-info:hover,
.table-hover .table-info:hover>td,
.table-hover .table-info:hover>th {
 background-color:#aedef4
}
.table-warning,
.table-warning>td,
.table-warning>th {
 background-color:#ffeed6
}
.table-warning tbody+tbody,
.table-warning td,
.table-warning th,
.table-warning thead th {
 border-color:#ffe0b3
}
.table-hover .table-warning:hover,
.table-hover .table-warning:hover>td,
.table-hover .table-warning:hover>th {
 background-color:#ffe3bd
}
.table-danger,
.table-danger>td,
.table-danger>th {
 background-color:#ffcece
}
.table-danger tbody+tbody,
.table-danger td,
.table-danger th,
.table-danger thead th {
 border-color:#ffa4a4
}
.table-hover .table-danger:hover,
.table-hover .table-danger:hover>td,
.table-hover .table-danger:hover>th {
 background-color:#ffb5b5
}
.table-light,
.table-light>td,
.table-light>th {
 background-color:#fdfefe
}
.table-light tbody+tbody,
.table-light td,
.table-light th,
.table-light thead th {
 border-color:#fbfcfd
}
.table-hover .table-light:hover,
.table-hover .table-light:hover>td,
.table-hover .table-light:hover>th {
 background-color:#ecf6f6
}
.table-dark,
.table-dark>td,
.table-dark>th {
 background-color:#c5c5c5
}
.table-dark tbody+tbody,
.table-dark td,
.table-dark th,
.table-dark thead th {
 border-color:#949494
}
.table-hover .table-dark:hover,
.table-hover .table-dark:hover>td,
.table-hover .table-dark:hover>th {
 background-color:#b8b8b8
}
.table-cyan,
.table-cyan>td,
.table-cyan>th {
 background-color:#ceeefd
}
.table-cyan tbody+tbody,
.table-cyan td,
.table-cyan th,
.table-cyan thead th {
 border-color:#a3e0fb
}
.table-hover .table-cyan:hover,
.table-hover .table-cyan:hover>td,
.table-hover .table-cyan:hover>th {
 background-color:#b6e6fc
}
.table-orange,
.table-orange>td,
.table-orange>th {
 background-color:#ffeed6
}
.table-orange tbody+tbody,
.table-orange td,
.table-orange th,
.table-orange thead th {
 border-color:#ffe0b3
}
.table-hover .table-orange:hover,
.table-hover .table-orange:hover>td,
.table-hover .table-orange:hover>th {
 background-color:#ffe3bd
}
.table-purple,
.table-purple>td,
.table-purple>th {
 background-color:#d7daf2
}
.table-purple tbody+tbody,
.table-purple td,
.table-purple th,
.table-purple thead th {
 border-color:#b5bbe8
}
.table-hover .table-purple:hover,
.table-hover .table-purple:hover>td,
.table-hover .table-purple:hover>th {
 background-color:#c4c8ec
}
.table-inverse,
.table-inverse>td,
.table-inverse>th {
 background-color:#cdd0d4
}
.table-inverse tbody+tbody,
.table-inverse td,
.table-inverse th,
.table-inverse thead th {
 border-color:#a2a7b0
}
.table-hover .table-inverse:hover,
.table-hover .table-inverse:hover>td,
.table-hover .table-inverse:hover>th {
 background-color:#bfc3c8
}
.table-active,
.table-active>td,
.table-active>th,
.table-hover .table-active:hover,
.table-hover .table-active:hover>td,
.table-hover .table-active:hover>th {
 background-color:rgba(0,0,0,.075)
}
.table .thead-dark th {
 color:#fff;
 background-color:#313131;
 border-color:#444
}
.table .thead-light th {
 color:#525f7f;
 background-color:#e9ecef;
 border-color:rgba(120,130,140,.13)
}
.table-dark {
 color:#fff;
 background-color:#313131
}
.table-dark td,
.table-dark th,
.table-dark thead th {
 border-color:#444
}
.table-dark.table-bordered,
.table-responsive>.table-bordered {
 border:0
}
.table-dark.table-striped tbody tr:nth-of-type(odd) {
 background-color:rgba(255,255,255,.05)
}
.table-dark.table-hover tbody tr:hover {
 color:#fff;
 background-color:rgba(255,255,255,.075)
}
@media (max-width:575.98px) {
 .table-responsive-sm {
  display:block;
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch
 }
 .table-responsive-sm>.table-bordered {
  border:0
 }
}


/*Clases para manejo de modales*/

.modal.fade .modal-dialog {
    transform: translateY(-30px) scale(.96);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

.modal-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,.25);
    background: #fff;
}

.modal-header {
    padding: 16px 22px;
    border-bottom: none;
}

/* AQUÍ ESTÁ EL CAMBIO: danger ahora es AZUL */
.modal-header.bg-danger,
.modal-header.bg-primary,
.modal-header.bg-info {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
}

.modal-header.bg-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}
.modal-header.bg-dark {
    background: linear-gradient(135deg, #4a4a4a 0%, #212121 100%) !important;
}

.modal-title {
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-header .close {
    opacity: 1;
    padding: 6px;
    background: rgba(255,255,255,.15);
    border-radius: 10px;
    transition: all .2s;
}
.modal-header .close:hover {
    background: rgba(255,255,255,.25);
    transform: rotate(90deg);
}
.modal-header .close img {
    width: 18px; height: 18px;
    filter: brightness(0) invert(1);
}

.modal-body { padding: 22px; color: #2d3748; font-size: .95rem; }
.modal-footer {
    padding: 14px 22px;
    border-top: 1px solid #f1f3f5;
    background: #fafbfc;
}
.modal-footer .btn {
    border-radius: 10px;
    padding: 8px 18px;
    font-weight: 500;
}
.modal-footer .btn-dark {
    background: #1e40af;
    border: none;
}
.modal-footer .btn-dark:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.modal-backdrop.show {
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(4px);
}