:root{
    --bg:#2a2b3aa3; --panel:#fff; --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:var(--panel);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{filter:brightness(.95)}

/* 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;
}