:root{
    --bg:#2a2b3aa3; --panel:#ebebeb; --border:#d7dbe2; --ink:#0f172a;
    --accent:#2457a6; --brand:#183153; --ok:#1b7f4b; --danger:#b42318;
    --r:12px; --sh:0 8px 22px rgba(16,24,40,.06);
}
body{background-image:url('../img/background-light.png');
    background-size: cover;
    color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
.glass{background:var(--panel);border:1px solid var(--border)}
.rounded-xl{border-radius:var(--r)}
.elev{box-shadow:var(--sh)}
.topbar{
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#cfcfcf), color-stop(.05, #dadada), color-stop(.92, white));
    border:1px solid var(--border)
}

/* Toolbar */
.toolbar .actions{display:flex;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;width:100%}
.toolbar .btn{background:#f7f8fb;border:1px solid var(--border);color:var(--ink);border-radius:10px;padding:.45rem .6rem;white-space:nowrap;display:flex;align-items:center;gap:.5rem}
.btn-primary-brand{background:var(--accent);border:none;color:#fff;border-radius:10px}
.btn-primary-brand:hover {
    background: #0d6efd;
    color: white;
}

/* Tabs pedidos */
.order-tab{background:#f4f6fb;border:1px solid var(--border);border-radius:999px;padding:.35rem .6rem;display:inline-flex;align-items:center;gap:.45rem}
.order-tab.active{background:#e7ecf6}
.orders-scroller{display:flex;gap:.5rem;overflow-x:auto;padding:.5rem}
.orders-scroller::-webkit-scrollbar{height:8px}
.orders-scroller::-webkit-scrollbar-thumb{background:#cfd7e6;border-radius:20px}
.order-close{cursor:pointer;opacity:.6}
.order-close:hover{opacity:1}

/* Cabecera */
.doc-chip{background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:.5rem .65rem}
.form-static{display:flex;align-items:center;gap:.5rem;background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:.5rem .65rem;min-height:38px}

/* Tabla y totales */
.table-modern thead th{background:#f5f7fa;color:#475467}
.summary-sticky{position:sticky; top:12px}
.money{color:var(--ok);font-weight:700}
.change{color:var(--danger);font-weight:700}
.big-total{font-size:1.7rem;font-weight:800;color:var(--brand)}
.img-ph{width:40px;height:40px;border-radius:8px;background:#e9edf3}

/* Clientes modal */
.customer-card{border:1px solid var(--border);border-radius:12px;padding:.75rem;cursor:pointer;background:#fff}
.customer-card:hover{background:#f6f9ff;border-color:#c9d8ff}
.customer-meta{font-size:.8rem;color:#667085}

/* Pagos modal (misma línea visual) */
.pay-line{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);border-radius:10px;padding:.5rem .75rem;margin-bottom:.5rem}
.pay-chip{border:1px solid var(--border);border-radius:999px;padding:.15rem .5rem;background:#f8fafc}
/* ancla del overlay al contenedor cubierto */
.contenedor-carga { position: relative; }

/* capa de cobertura */
.cobertura-carga{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(240,246,255,.6);
    z-index: 10;
}

/* spinner */
.rueda-carga{
    width: 40px; height: 40px;
    border: 4px solid #cfe3ff;
    border-top-color: #6aa8ff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.texto-carga{ margin-top: 8px; font-size: .95rem; color: #4b5563; }
/* válido: verde */
.input-valid,
.is-valid {
    border-color: #22c55e !important;
    background-color: #e7f6ec !important;
}

/* inválido: rosa */
.input-invalid,
.is-invalid {
    border-color: #f472b6 !important;  /* pink-400 */
    background-color: #ffe4f1 !important;
}

/* vacío (no requerido o aún sin capturar): amarillo suave */
.input-empty,
.is-empty {
    border-color: #f59e0b !important;  /* amber-500 */
    background-color: #fff7e6 !important;
}
/* Micro-estilos para tarjetas seleccionables */
.card-sucursal {
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    transition: transform .08s ease-in, box-shadow .12s ease-in;
}
.card-sucursal:hover,
.card-sucursal:focus {
    transform: translateY(-1px);
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.06);
    outline: 0;
}
.card-sucursal.activa {
    border-color: var(--bs-primary);
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.08), 0 0 0 .15rem rgba(var(--bs-primary-rgb), .15);
}
.card-sucursal.activa .marcador { display: block !important; color: var(--bs-primary); }
.prod {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
}
.prod:hover {
    background: #b1cbe7;
}
.prod .name {
    font-weight: 500;
    font-size: 12px;
    text-align: center;
}
.prod .sku {
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
    color: #1d4ed8;
}
.prod .price {
    font-size: 14px;
    font-weight: 600;
}
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.list-card {
    flex: 1 1 auto;
    min-height: 0;
}
.list-card .scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    max-height: 100vh;
    scrollbar-width: thin;
    scrollbar-color: #5478c8 #e2e8f6;
}
.list-card .scroll-area > .d-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.list-card .scroll-area::-webkit-scrollbar {
    width: 8px;
}
.list-card .scroll-area::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6a8ef0, #3656b2);
    border-radius: 20px;
    border: 2px solid #e2e8f6;
}
.list-card .scroll-area::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #3656b2, #1e3f8c);
}
.list-card .scroll-area::-webkit-scrollbar-track {
    background: #e2e8f6;
    border-radius: 20px;
}
.toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}.toolbar .input {
    min-width: 240px;
}.chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.chip {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #c7d8ff;
    background: #eef3ff;
    color: #1e3a8a;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.chip:hover {
    background: #e0e9ff;
    border-color: #b0c6ff;
}
.chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, .25);
}
.chip.active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
    box-shadow: 0 6px 16px rgba(29, 78, 216, .25);
}
.fondo2{
    background: #f1f5f9;
}
input#searchInput {
    max-width: 240px;
    height: 30px;
}
.form-control{
    background-color: rgb(255, 249, 175);
}
.productosCarrito{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    max-height: 42vh;
    scrollbar-width: thin;
    scrollbar-color: #5478c8 #e2e8f6;
}
.row-producto{
    display: inline-block;
    grid-template-columns: 1fr 92px 100px 90px 24px;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 3px;
}
.img-producto{
    float: left;
    width: 10%;
}
.img-p-responsive{
    width: 100%;
}
.nombre-producto{
    float: left;
    width: 35%;
    line-height: 13px;
}
.titulo-producto{
    font-weight: bolder;
    font-size: 11px;
}
.variante-producto{
    font-size: 10px;
}
.ctd-producto{
    float: left;
    width: 15%;
    font-size: 12px;
    text-align: center;
}
.iptCtd{
    width: 100%;
    padding: 3px;
    text-align: right;
    font-size: 12px;
}
.precio-producto{
    float: left;
    width: 15%;
    font-size: 12px;
    text-align: center;
}
.importe-producto{
    float:left;
    width: 20%;
    font-size: 12px;
    font-weight: bolder;
    text-align: center;
}
.quitar-producto{
    float: left;
    width: 5%;
    text-align: right;
}
button.rm.btn.btn-sm.btn-outline-danger{
    padding: 3px;
}