/* BZ POS — Punto de Venta. Tema oscuro por defecto + variante clara. */

:root {
    /* Paleta oficial de BZ Ingeniería */
    --bz-navy-dark: #0e1a2b;
    --bz-navy-header: #1e3a5f;
    --bz-navy-panel: #172a45;
    --bz-navy-border: #2c4d75;
    --bz-accent: #3182ce;
    --bz-accent-hover: #2b6cb0;
    --bz-gold: #d69e2e;
    --bz-success: #2f855a;
    --bz-success-hover: #276749;
    --bz-danger: #e53e3e;
    --bz-danger-hover: #c53030;
    --text-main: #f7fafc;
    --text-muted: #a0aec0;
    --card-bg: #1e3656;
    --input-bg: #0b1524;
}

body.theme-light {
    --bz-navy-dark: #f0f4f8;
    --bz-navy-header: #1e3a5f;
    --bz-navy-panel: #ffffff;
    --bz-navy-border: #cbd5e0;
    --bz-accent: #2b6cb0;
    --bz-accent-hover: #1c4ed8;
    --bz-gold: #d69e2e;
    --bz-success: #2f855a;
    --bz-danger: #e53e3e;
    --text-main: #1a202c;
    --text-muted: #4a5568;
    --card-bg: #ffffff;
    --input-bg: #f8fafc;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif; }
body { background: var(--bz-navy-dark); color: var(--text-main); height: 100vh; display: flex; flex-direction: column; overflow: hidden; transition: background 0.25s, color 0.25s; }

/* ── Header ────────────────────────────────────────────────────────── */
header.pos-header {
    background: var(--bz-navy-header);
    border-bottom: 2px solid var(--bz-navy-border);
    padding: 0.65rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.brand-title { display: flex; align-items: center; gap: 0.75rem; font-weight: 800; font-size: 1.3rem; color: white; text-decoration: none; }
.brand-title img { width: 38px; height: 38px; border-radius: 8px; object-fit: contain; background: white; padding: 2px; }
.brand-title span { color: #63b3ed; font-weight: 900; }

.pos-tabs { display: flex; gap: 0.4rem; }
.tab-btn {
    background: rgba(255,255,255,0.08);
    color: #cbd5e0;
    border: 1px solid transparent;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.88rem;
    transition: all 0.2s;
    display: flex; align-items: center; gap: 0.4rem;
}
.tab-btn:hover, .tab-btn.active { background: var(--bz-accent); color: white; border-color: #63b3ed; box-shadow: 0 2px 8px rgba(49, 130, 206, 0.4); }

.user-status { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: white; }
.shift-badge { padding: 0.3rem 0.8rem; border-radius: 50px; font-weight: 700; font-size: 0.8rem; cursor: pointer; }
.shift-open  { background: rgba(47, 133, 90, 0.25);  color: #68d391; border: 1px solid var(--bz-success); }
.shift-closed { background: rgba(229, 62, 62, 0.25); color: #fc8181; border: 1px solid var(--bz-danger); }

/* ── Main / Tabs ───────────────────────────────────────────────────── */
main.pos-main { flex: 1; display: flex; overflow: hidden; height: calc(100vh - 65px); }
.tab-content { display: none; width: 100%; height: 100%; }
.tab-content.active { display: flex; flex-direction: column; }
#tab-venta.active { display: grid; grid-template-columns: 1fr 380px; }

.products-section { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; border-right: 1px solid var(--bz-navy-border); background: var(--bz-navy-dark); flex: 1; height: 100%; }
.search-bar { display: flex; gap: 0.75rem; }
.search-bar input { flex: 1; background: var(--input-bg); border: 1px solid var(--bz-navy-border); color: var(--text-main); padding: 0.75rem 1rem; border-radius: 8px; font-size: 1rem; outline: none; }
.search-bar input:focus { border-color: var(--bz-accent); }

.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; overflow-y: auto; padding-bottom: 2rem; }
.product-card {
    background: var(--card-bg); border: 1px solid var(--bz-navy-border); border-radius: 10px;
    padding: 1rem; text-align: center; cursor: pointer; transition: transform 0.15s, border-color 0.15s;
    display: flex; flex-direction: column; justify-content: space-between; min-height: 140px;
}
.product-card:hover { transform: translateY(-3px); border-color: #63b3ed; }
.product-card h4 { font-size: 0.92rem; color: var(--text-main); margin-bottom: 0.5rem; line-height: 1.3; font-weight: 700; }
.product-card .price { font-size: 1.15rem; font-weight: 900; color: #63b3ed; }
.product-card .stock { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.4rem; }
.product-card .stock.is-low { color: #fc8181; font-weight: 700; }

/* ── Carrito ───────────────────────────────────────────────────────── */
.cart-section { background: var(--bz-navy-panel); padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; border-left: 1px solid var(--bz-navy-border); }
.cart-header { font-size: 1rem; font-weight: 800; border-bottom: 2px solid var(--bz-navy-border); padding-bottom: 0.75rem; display: flex; justify-content: space-between; align-items: center; color: white; }

.cart-list { flex: 1; overflow-y: auto; margin: 1rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
.cart-empty { text-align: center; color: var(--text-muted); margin-top: 4rem; }
.cart-item {
    background: var(--bz-navy-dark); padding: 0.75rem; border-radius: 8px;
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    font-size: 0.9rem; border: 1px solid var(--bz-navy-border);
}
.cart-item-title { font-weight: 700; font-size: 0.88rem; max-width: 150px; }
.cart-item-controls { display: flex; align-items: center; gap: 0.5rem; }
.qty-btn { background: var(--bz-navy-border); border: none; color: white; width: 26px; height: 26px; border-radius: 4px; font-weight: bold; cursor: pointer; }
.cart-item-subtotal { font-weight: bold; color: #68d391; min-width: 70px; text-align: right; }
.badge-mayoreo { color: #63b3ed; font-size: 0.75rem; }

.cart-summary { background: var(--input-bg); padding: 1.25rem; border-radius: 10px; border: 1px solid var(--bz-navy-border); }
.coupon-row { margin-bottom: 10px; display: flex; gap: 5px; }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 0.4rem; font-size: 0.95rem; color: var(--text-muted); }
.total-row { font-size: 1.4rem; font-weight: 900; color: #68d391; border-top: 1px solid var(--bz-navy-border); padding-top: 0.6rem; margin-top: 0.4rem; }
.cart-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.cart-actions-secondary { display: flex; gap: 0.5rem; margin-top: 0.4rem; }

/* ── Botones ───────────────────────────────────────────────────────── */
.btn-primary  { background: var(--bz-accent);     color: white;  border: none; padding: 0.65rem 1.2rem; border-radius: 8px; font-weight: 700; cursor: pointer; }
.btn-primary:hover { background: var(--bz-accent-hover); }
.btn-secondary { background: var(--bz-navy-panel); border: 1px solid var(--bz-navy-border); color: #cbd5e0; padding: 0.65rem 1.2rem; border-radius: 8px; font-weight: 700; cursor: pointer; }
.btn-danger  { background: var(--bz-danger); color: white; border: none; padding: 0.55rem 0.9rem; border-radius: 8px; font-weight: 700; cursor: pointer; }
.btn-danger:hover { background: var(--bz-danger-hover); }
.btn-success { background: var(--bz-success); color: white; border: none; padding: 0.65rem 1.2rem; border-radius: 8px; font-weight: 700; cursor: pointer; }
.btn-success:hover { background: var(--bz-success-hover); }
.btn-act { background: var(--bz-navy-border); border: none; color: white; padding: 0.4rem 0.8rem; border-radius: 6px; cursor: pointer; font-size: 0.82rem; font-weight: 600; }
.btn-pay { background: var(--bz-success); color: white; border: none; padding: 0.85rem 1.2rem; border-radius: 8px; font-size: 1.1rem; font-weight: 900; cursor: pointer; flex: 2; }
.btn-pay:hover { background: var(--bz-success-hover); }

/* ── Formularios ───────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; text-align: left; }
.form-group label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.35rem; font-weight: 600; }
.form-control { width: 100%; background: var(--input-bg); border: 1px solid var(--bz-navy-border); color: var(--text-main); padding: 0.65rem 0.9rem; border-radius: 8px; font-size: 0.95rem; outline: none; }
.form-control:focus { border-color: var(--bz-accent); }
.form-check { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.form-check input { width: auto; }
.bill-buttons { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.text-success { color: #68d391; }
.text-gold    { color: var(--bz-gold); }
.text-accent  { color: #63b3ed; font-weight: bold; }
.text-profit  { color: #68d391; }

/* ── Inventario / Historial ────────────────────────────────────────── */
.inventory-toolbar { margin-bottom: 1rem; }
.inventory-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.9rem; }
.inventory-table th, .inventory-table td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--bz-navy-border); }
.inventory-table th { background: var(--bz-navy-header); color: #cbd5e0; font-weight: 700; }
.devolucion-card { margin-bottom: 1rem; padding: 1rem; background: var(--card-bg); border-radius: 8px; border: 1px solid var(--bz-navy-border); display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.devolucion-card h3 { margin-bottom: 0; font-size: 1rem; }
.muted { color: var(--text-muted); }

/* ── Toasts ────────────────────────────────────────────────────────── */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 0.5rem; }
.toast { background: var(--bz-navy-panel); color: white; padding: 0.8rem 1.4rem; border-radius: 8px; border-left: 5px solid var(--bz-accent); box-shadow: 0 4px 15px rgba(0,0,0,0.3); font-weight: 600; }

/* ── Modales ───────────────────────────────────────────────────────── */
.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; z-index: 999; }
.modal[hidden] { display: none; } /* prioridad sobre display:flex */
.modal-content { background: var(--bz-navy-panel); border-radius: 12px; padding: 2rem; width: 90%; max-width: 520px; border: 1px solid var(--bz-navy-border); color: white; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; }
.modal-actions--center { justify-content: center; }
.qr-wrap { background: white; padding: 1rem; display: inline-block; border-radius: 8px; margin: 1rem 0; }
.etiqueta-preview { border: 2px dashed var(--bz-navy-border); padding: 1.5rem; margin: 1rem 0; border-radius: 8px; background: rgba(0,0,0,0.2); }
.barcode-code { font-family: monospace; font-size: 1.8rem; letter-spacing: 4px; font-weight: bold; margin: 0.5rem 0; }

@media print {
    body { background: white; color: black; }
    .pos-header, .pos-tabs, .products-section, .cart-section, .modal-actions, .search-bar { display: none !important; }
    #modal-etiqueta, #modal-etiqueta .modal-content {
        display: block;
        position: static;
        width: 100%;
        background: white;
        color: black;
        box-shadow: none;
        border: none;
    }
}

/* ── Clases Utilitarias del POS ────────────────────────────────────── */
.badge-net-online { background: #22543d; color: #9ae6b4; padding: 0.25rem 0.6rem; border-radius: 4px; font-size: 0.78rem; font-weight: bold; }
.badge-net-offline { background: #742a2a; color: #feb2b2; padding: 0.25rem 0.6rem; border-radius: 4px; font-size: 0.78rem; font-weight: bold; }
.badge-plan-header { background: #2f855a; color: white; padding: 0.25rem 0.6rem; border-radius: 4px; font-size: 0.78rem; font-weight: bold; }
.btn-act-danger { background: #e53e3e; color: white; border-color: #e53e3e; font-weight: bold; }
.btn-act-info { background: #3182ce; color: white; border-color: #3182ce; font-weight: bold; }
.btn-act-shield { background: #234e52; color: #81e6d9; border-color: #319795; font-weight: bold; }
.btn-act-scanner { background: #805ad5; color: white; border-color: #805ad5; font-weight: bold; white-space: nowrap; }
.btn-act-pause { background: #d69e2e; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; cursor: pointer; font-weight: bold; }
.btn-act-held { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
.btn-act-success { background: #2f855a; border-color: #2f855a; font-weight: bold; }
.btn-act-purple { background: #805ad5; color: white; border-color: #805ad5; font-weight: bold; }
.btn-act-blue { background: #2b6cb0; color: white; border-color: #2b6cb0; font-weight: bold; }
.btn-act-dark { background: #4a5568; color: white; border-color: #4a5568; font-weight: bold; }
.btn-act-warning { background: #d69e2e; color: white; border-color: #d69e2e; font-weight: bold; }
.plan-indicator-box { font-size: 0.9rem; color: #cbd5e0; background: rgba(0,0,0,0.3); padding: 0.4rem 0.8rem; border-radius: 6px; border: 1px solid #2c4d75; }
.crm-stats-box { font-size: 0.9rem; color: #cbd5e0; background: rgba(0,0,0,0.3); padding: 0.4rem 0.8rem; border-radius: 6px; border: 1px solid #2c4d75; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.toolbar-btn-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cart-header-actions { display: flex; gap: 0.3rem; align-items: center; }
.pay-monedero-wrap { display: none; background: linear-gradient(135deg, #2a2046, #1e1a3a); border: 1px solid #805ad5; padding: 0.8rem; border-radius: 6px; margin-bottom: 0.8rem; }
.btn-csv-template { background: #2d3748; color: #68d391; text-decoration: none; display: inline-block; padding: 0.4rem 0.8rem; border-radius: 4px; font-size: 0.85rem; }
.btn-backup-download { background: #285e61; border-color: #319795; color: white; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 6px; font-weight: bold; font-size: 0.88rem; }
.modal-prov-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; }
.modal-content--md { max-width: 540px; }
.modal-content--lg { max-width: 640px; }
.upload-dropzone { background: #1a202c; padding: 1.2rem; border-radius: 6px; border: 2px dashed #4a5568; text-align: center; }
.monedero-info-title { color: #d6bcfa; font-weight: bold; font-size: 0.9rem; }
.monedero-toggle-label { cursor: pointer; color: #68d391; font-weight: bold; font-size: 0.85rem; }
.monedero-cashback-note { color: #a0aec0; display: block; margin-top: 0.3rem; font-size: 0.78rem; }