/* ============================================
   BIM Customer — Dashboard Wrapper & Sidebar
   ============================================
   Grid layout, sidebar cards, and stat
   components for dashboard-wrapper.php.

   Scoped under .bim-customer-dashboard-wrapper.
   ============================================ */

/* ============================================
   WRAPPER
   ============================================ */

.bim-customer-dashboard-wrapper {
    width: 100%;
    font-family: var(--bim-font);
    box-sizing: border-box;
}

/* ============================================
   ORDERS SECTION
   ============================================ */

.bim-orders-section {
    padding: var(--bim-space-8) 0;
}

.bim-orders-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--bim-space-5);
    box-sizing: border-box;
}

/* ── Orders Header ── */
.bim-orders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--bim-space-6);
    opacity: 0; /* GSAP reveals */
}

.bim-orders-title {
    font-family: var(--bim-font);
    font-size: var(--bim-text-2xl);
    font-weight: 900;
    color: var(--bim-text-primary);
    text-transform: capitalize;
    letter-spacing: -0.025em;
    margin: 0;
}

.bim-orders-title::after {
    content: '';
    display: block;
    width: 3.5rem;
    height: 3px;
    background: var(--bim-accent);
    border-radius: 2px;
    margin-top: var(--bim-space-3);
}

.bim-orders-live {
    display: flex;
    align-items: center;
    gap: var(--bim-space-2);
    font-family: var(--bim-font);
    font-size: var(--bim-text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--bim-success);
    text-transform: uppercase;
}

.bim-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bim-success);
    animation: bimPulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

/* ── Layout Grid ── */
.bim-orders-layout {
    display: grid;
    grid-template-columns: 1fr 272px;
    gap: var(--bim-space-5);
    align-items: start;
}

.bim-orders-main {
    min-width: 0;
}

/* ── Sidebar column ── */
.bim-dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--bim-space-4);
}

/* ============================================
   ORDERS TABLE
   HTML <table> with thead + tbody rows.
   All selectors scoped under .bim-orders-section
   to override WordPress theme rules.
   ============================================ */

/* ── Table card wrapper (white card, rounded, border) ── */
.bim-orders-section .bim-orders-tbl-wrap {
    background: var(--bim-surface);
    border: 1px solid var(--bim-border);
    border-radius: var(--bim-radius-sm);
    overflow: hidden;
    margin-top: var(--bim-space-3);
}

/* .bim-orders-table is now just a pass-through div for the JS filter selector */
.bim-orders-section .bim-orders-table {
    display: block;
}

/* ── Enterprise table ── */
.bim-orders-section .bim-orders-tbl {
    width: 100%;
    border-collapse: collapse !important;  /* theme sets border-collapse: separate */
    border-spacing: 0 !important;
    border: none !important;               /* theme's table, td, th { border } rule */
    margin: 0 !important;                  /* theme's table { margin: 0 0 1.5em } rule */
    font-family: var(--bim-font) !important;
}

/* thead */
.bim-orders-section .bim-orders-tbl thead {
    background: var(--bim-bg) !important;
    border-bottom: 1px solid var(--bim-border) !important;
}

.bim-orders-section .bim-orders-tbl thead th {
    padding: 12px 16px !important;
    text-align: left !important;
    font-size: var(--bim-text-2xs) !important;
    font-weight: 700 !important;
    color: var(--bim-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
    border: none !important;
    background: transparent !important;
    font-family: var(--bim-font) !important;
}

.bim-orders-section .bim-orders-tbl thead th.bim-tbl-th--actions {
    text-align: right !important;
}

/* tbody rows */
.bim-orders-section .bim-orders-tbl tbody tr.bim-order-row {
    /* Reset the subgrid rules that would break <tr> */
    display: table-row !important;
    grid-column: unset !important;
    grid-template-columns: unset !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--bim-border-light) !important;
    background: var(--bim-surface) !important;
    transition: background var(--bim-transition-fast) ease;
}

/* Hidden state set by JS filter — one extra class raises specificity above the
   display: table-row !important rule above so this wins */
.bim-orders-section .bim-orders-tbl tbody tr.bim-order-row.bim-row-hidden {
    display: none !important;
}

/* Last row — strip bottom border so it doesn't stack with the wrapper's border */
.bim-orders-section .bim-orders-tbl tbody tr.bim-order-row:last-child,
.bim-orders-section .bim-orders-tbl tbody tr:last-child {
    border-bottom: none !important;
}

.bim-orders-section .bim-orders-tbl tbody tr.bim-order-row:hover {
    background: var(--bim-bg) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* td base */
.bim-orders-section .bim-orders-tbl td {
    padding: 16px !important;
    font-size: var(--bim-text-base) !important;
    color: var(--bim-text-secondary) !important;
    vertical-align: middle !important;
    border: none !important;
    font-family: var(--bim-font) !important;
}

/* ── ID cell ── */
.bim-orders-section .bim-tbl-td-id {
    white-space: nowrap;
    position: relative;
    overflow: visible;
}

/* Desktop: show row badge, hide mobile badge */
.bim-orders-section .bim-tbl-chat-badge--mobile {
    display: none !important;
}

.bim-orders-section .bim-orders-tbl .bim-row-order-id {
    font-family: 'SF Mono', 'Monaco', 'Courier New', monospace !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--bim-text-primary) !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
}

/* ── Negotiation badge (below status dot in status cell) ── */
.bim-neg-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 6px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 4px;
    text-decoration: none !important;
    line-height: 1;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.bim-neg-badge:hover {
    opacity: 0.75;
    text-decoration: none !important;
}

.bim-neg-badge .material-symbols-outlined {
    font-size: 12px;
}

.bim-neg-badge--success {
    background: #ecfdf5;
    color: #065f46 !important;
}

.bim-neg-badge--warning {
    background: #fff7ed;
    color: #9a3412 !important;
}

/* ── Offer badge (order row) ── */
.bim-offer-badge-row {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 6px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 4px;
    text-decoration: none !important;
    line-height: 1;
    white-space: nowrap;
    transition: opacity 0.15s ease;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e !important;
    animation: bimPulse 2s ease-in-out infinite;
}

.bim-offer-badge-row:hover {
    opacity: 0.8;
    text-decoration: none !important;
}

.bim-offer-badge-row .material-symbols-outlined {
    font-size: 12px;
}

/* ── Offer timer badge (customer status column) ── */
.bim-offer-timer-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 8px;
    font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 5px;
    background: #1a1a1a;
    color: #fafafa;
    border: 1px solid rgba(249, 115, 22, 0.4);
    border-top: 2px solid #f97316;
    white-space: nowrap;
    text-decoration: none !important;
    line-height: 1;
}

.bim-offer-timer-badge .material-symbols-outlined {
    font-size: 13px;
    color: #f97316;
}

.bim-offer-timer-label {
    text-transform: uppercase;
    color: #f97316;
    font-family: var(--bim-font);
    font-size: 10px;
    letter-spacing: 0.03em;
}

.bim-offer-timer-sep {
    color: rgba(250, 250, 250, 0.25);
}

.bim-offer-timer-badge:hover {
    opacity: 0.85;
    text-decoration: none !important;
    color: #fafafa;
}

/* Urgent state: < 6 hours remaining */
.bim-offer-timer-badge--urgent {
    border-color: rgba(239, 68, 68, 0.5);
    border-top-color: #ef4444;
}

.bim-offer-timer-badge--urgent .bim-offer-countdown {
    color: #f87171;
}

/* ── Product cell ── */
.bim-orders-section .bim-tbl-td-product {
    max-width: 340px;
}

.bim-orders-section .bim-orders-tbl .bim-row-product-name {
    font-weight: 500 !important;
    color: var(--bim-text-primary) !important;
    font-size: var(--bim-text-base) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: unset !important;
    line-height: 1.4 !important;
    margin-bottom: 3px;
    text-transform: none !important;
}

.bim-orders-section .bim-tbl-product-meta {
    font-size: var(--bim-text-sm) !important;
    color: var(--bim-text-muted) !important;
    line-height: 1.4;
    text-transform: none !important;
}

/* ── Product thumbnail (image + text flex row) ── */

.bim-orders-section .bim-tbl-product-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bim-orders-section .bim-tbl-product-img-wrap {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.bim-orders-section .bim-tbl-product-img {
    width: 40px;
    height: 40px;
    border-radius: var(--bim-radius-sm);
    object-fit: contain;              /* show the whole product, no cropping */
    background: var(--bim-bg-input);  /* fill the empty space around the image */
    border: 1px solid var(--bim-border-light) !important;
    display: block;
}

.bim-orders-section .bim-tbl-product-placeholder {
    width: 40px;
    height: 40px;
    border-radius: var(--bim-radius-sm);
    background: var(--bim-bg-input);
    border: 1px solid var(--bim-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bim-text-faint);
}

.bim-orders-section .bim-tbl-product-placeholder .material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
}

/* +N badge — positioned at bottom-right of the img-wrap */
.bim-orders-section .bim-tbl-img-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: var(--bim-text-primary);
    color: #fff;
    font-family: var(--bim-font);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1.5px solid var(--bim-surface);
}

/* Chat unread badge — shared base styles */
.bim-orders-section .bim-tbl-chat-badge {
    display: flex;
    align-items: center;
    gap: 3px;
    background: var(--bim-accent);
    border-radius: 20px;
    padding: 5px 8px 5px 6px;
    line-height: 1;
    border: 1.5px solid var(--bim-surface);
    box-shadow: 0 2px 6px rgba(255, 0, 0, 0.35);
    animation: bimChatPulse 2.4s ease-in-out infinite;
    z-index: 3;
}

.bim-orders-section .bim-tbl-chat-badge .material-symbols-outlined {
    font-size: 15px;
    color: #fff;
    line-height: 1;
}

.bim-tbl-chat-count {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

@keyframes bimChatPulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.08); opacity: 0.8; }
}

/* Desktop: badge in ID cell, at top-left corner of row */
.bim-orders-section .bim-tbl-chat-badge--row {
    position: absolute;
    top: 8px;
    left: 8px;
}

/* Mobile: badge inside img-wrap (original position) */
.bim-orders-section .bim-tbl-chat-badge--mobile {
    position: absolute;
    top: -18px;
    left: -12px;
}


/* ── Unread chat alert strip (below "Mis Pedidos" header) ────────── */
.bim-chat-alert-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -4px 0 14px;
    padding: 10px 14px 10px 10px;
    background: #0f0505;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 10px;
    box-shadow: 0 0 16px rgba(220, 38, 38, 0.12), inset 0 0 20px rgba(220, 38, 38, 0.04);
    animation: bimFadeIn 0.4s ease both;
}

.bim-chat-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.25);
    font-size: 17px;
    color: #f87171;
    flex-shrink: 0;
}

.bim-chat-alert-text {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    flex: 1;
}

.bim-chat-alert-cta {
    font-size: 11px;
    font-weight: 600;
    color: #f87171;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.bim-orders-section .bim-tbl-product-text {
    flex: 1;
    min-width: 0;
}

/* ── Progress cell ── */
.bim-orders-section .bim-tbl-td-progress {
    min-width: 140px;
}

.bim-orders-section .bim-tbl-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bim-orders-section .bim-tbl-progress-track {
    flex: 1;
    height: 6px;
    background: var(--bim-border);
    border-radius: 999px;
    overflow: hidden;
    min-width: 80px;
}

/* .bim-progress-fill is targeted by GSAP — keep class name */
.bim-orders-section .bim-tbl-progress-track .bim-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--bim-bolivia-yellow), var(--bim-bolivia-green));
    border-radius: 999px;
}

.bim-orders-section .bim-tbl-progress-pct {
    font-size: 13px;
    font-weight: 600;
    color: var(--bim-text-muted);
    min-width: 35px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Date cell ── */
.bim-orders-section .bim-tbl-td-date {
    white-space: nowrap;
    font-size: var(--bim-text-sm) !important;
    color: var(--bim-text-muted) !important;
}

/* ── Actions cell ── */
.bim-orders-section .bim-tbl-td-actions {
    text-align: right;
    white-space: nowrap;
}

/* ── Table action button — sentence case override ──
   Rule 3 (CSS-ARCHITECTURE): scoped override of .bim-btn base
   text-transform: uppercase → none, to match mockup style */
.bim-orders-section .bim-tbl-td-actions a.bim-btn.bim-btn-outline,
.bim-orders-section .bim-tbl-td-actions button.bim-btn.bim-btn-outline {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    font-size: var(--bim-text-sm) !important;
    border-radius: var(--bim-radius-sm) !important;
    padding: 6px 12px !important;
}

/* ── No-results row (JS shows when filter+search yields 0 rows) ── */
.bim-orders-section .bim-no-results-row {
    border-bottom: none !important;
}

.bim-orders-section .bim-no-results-cell {
    text-align: center !important;
    padding: var(--bim-space-8) var(--bim-space-4) !important;
    border: none !important;
}

.bim-orders-section .bim-no-results-msg {
    display: inline-flex;
    align-items: center;
    gap: var(--bim-space-3);
    color: var(--bim-text-muted);
    font-size: var(--bim-text-base);
    font-weight: 500;
}

.bim-orders-section .bim-no-results-msg .material-symbols-outlined {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--bim-text-faint);
}

/* ── GSAP target — opacity starts at 0, animated to 1 ── */
.bim-order-card-new {
    opacity: 0;
}

/* ============================================
   ORDERS TOOLBAR
   ============================================ */

.bim-orders-toolbar {
    display: flex;
    align-items: center;
    gap: var(--bim-space-4);
    background: var(--bim-surface);
    border: 1px solid var(--bim-border);
    border-radius: var(--bim-radius-sm);
    padding: var(--bim-space-3) var(--bim-space-4);
    margin-bottom: 0;
}

.bim-orders-toolbar-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.bim-orders-toolbar-title {
    font-family: var(--bim-font);
    font-size: var(--bim-text-lg);
    font-weight: 800;
    color: var(--bim-text-primary);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.bim-orders-toolbar-count {
    font-family: var(--bim-font);
    font-size: var(--bim-text-xs);
    color: var(--bim-text-muted);
    font-weight: 500;
}

/* ── Search ── */
.bim-orders-toolbar-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--bim-space-2);
    background: var(--bim-surface);
    border: 1px solid var(--bim-border);
    border-radius: var(--bim-radius-sm);
    padding: 0 var(--bim-space-3);
    height: 36px;
    transition: border-color var(--bim-transition-fast) ease,
                box-shadow var(--bim-transition-fast) ease;
}

.bim-orders-toolbar-search:focus-within {
    border-color: var(--bim-accent) !important;
    box-shadow: 0 0 0 1px var(--bim-accent) !important;
}

.bim-orders-toolbar-search .material-symbols-outlined {
    font-size: 1.125rem;
    color: var(--bim-text-faint);
    line-height: 1;
    flex-shrink: 0;
}

.bim-list-search {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    font-family: var(--bim-font);
    font-size: var(--bim-text-sm);
    color: var(--bim-text-primary);
    min-width: 0;
}

.bim-list-search::placeholder {
    color: var(--bim-text-faint);
}

/* ── Filter pills group ── */
.bim-orders-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--bim-space-2);
    flex-shrink: 0;
}

/* ============================================
   SIDEBAR CARD — Quote Request CTA
   ============================================ */

.bim-quote-request-float {
    background: var(--bim-surface);
    border: 1px solid var(--bim-border);
    border-radius: var(--bim-radius-lg);
    box-shadow: var(--bim-shadow-sm);
    padding: var(--bim-space-5) var(--bim-space-4);
    text-align: center;
}

.bim-float-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: var(--bim-space-3);
    display: block;
}

.bim-quote-request-float h2 {
    font-family: var(--bim-font);
    font-size: var(--bim-text-base);
    font-weight: 700;
    color: var(--bim-text-primary);
    margin: 0 0 var(--bim-space-2) 0;
    line-height: 1.4;
}

.bim-quote-request-float p {
    font-family: var(--bim-font);
    font-size: var(--bim-text-sm);
    color: var(--bim-text-muted);
    margin: 0 0 var(--bim-space-4) 0;
    line-height: 1.5;
}

/* ============================================
   SIDEBAR CARD — Quick Stats
   ============================================ */

.bim-quick-stats {
    background: var(--bim-surface);
    border: 1px solid var(--bim-border);
    border-radius: var(--bim-radius-lg);
    box-shadow: var(--bim-shadow-sm);
    padding: var(--bim-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--bim-space-3);
}

/* ── Individual stat row ── */
.bim-stat-compact {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--bim-space-3);
}

.bim-stat-compact + .bim-stat-compact {
    border-top: 1px solid var(--bim-border-light);
    padding-top: var(--bim-space-3);
}

/* ── Stat icon circle ── */
.bim-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--bim-radius-sm);
    background: var(--bim-bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bim-text-muted);
}

.bim-stat-icon .material-symbols-outlined {
    font-size: 1.125rem;
    line-height: 1;
}

/* ── Stat text group ── */
.bim-stat-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.bim-stat-label {
    font-family: var(--bim-font);
    font-size: var(--bim-text-xs);
    font-weight: 600;
    color: var(--bim-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Number as visual anchor — system.md signature */
.bim-stat-number {
    font-family: var(--bim-font);
    font-size: var(--bim-text-xl);
    font-weight: 800;
    color: var(--bim-text-primary);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* ============================================
   SIDEBAR CARD — Exchange Rate
   ============================================ */

.bim-rate-compact {
    background: var(--bim-surface);
    border: 1px solid var(--bim-border);
    border-radius: var(--bim-radius-lg);
    box-shadow: var(--bim-shadow-sm);
    padding: var(--bim-space-3) var(--bim-space-4);
}

.bim-rate-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--bim-space-3);
}

.bim-rate-label {
    font-family: var(--bim-font);
    font-size: var(--bim-text-sm);
    color: var(--bim-text-muted);
    font-weight: 500;
}

.bim-rate-value {
    font-family: var(--bim-font);
    font-size: var(--bim-text-base);
    font-weight: 700;
    color: var(--bim-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* ── Tablet: stack to single column ── */
@media (max-width: 1024px) {
    .bim-orders-layout {
        grid-template-columns: 1fr;
    }

    .bim-dashboard-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--bim-space-4);
    }

    /* Rate card spans both columns for balance */
    .bim-rate-compact {
        grid-column: 1 / -1;
    }
}

/* ── Tablet (≤900px): hide date column ── */
@media (max-width: 900px) {
    .bim-orders-section .bim-tbl-th--date,
    .bim-orders-section .bim-tbl-td-date { display: none !important; }
}

/* ── Mobile (≤640px): horizontal scroll + hide progress column ── */
@media (max-width: 640px) {
    .bim-orders-layout {
        gap: var(--bim-space-4);
    }

    .bim-orders-container {
        padding: 0 var(--bim-space-4);
    }

    .bim-dashboard-sidebar {
        grid-template-columns: 1fr;
    }

    .bim-rate-compact {
        grid-column: auto;
    }

    /* Hide progress column — reduces table width ~140px */
    .bim-orders-section .bim-orders-tbl .bim-tbl-td-progress,
    .bim-orders-section .bim-orders-tbl thead .bim-tbl-th--progress {
        display: none !important;
    }

    /* Horizontal scroll — reduced min-width to match remaining columns */
    .bim-orders-section .bim-orders-tbl-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .bim-orders-section .bim-orders-tbl {
        min-width: 420px;
    }

    .bim-orders-section .bim-orders-tbl td,
    .bim-orders-section .bim-orders-tbl thead th {
        padding: 10px 12px !important;
    }

    .bim-orders-toolbar { flex-wrap: wrap; gap: var(--bim-space-3); }
    /* Search moves to second row, full width */
    .bim-orders-toolbar-search { order: 3; width: 100%; }
    /* Pills stay on the first row next to the title */
    .bim-orders-toolbar-right  { order: 2; flex-shrink: 0; }
}

/* ── Small mobile (≤480px): card transform ──
   Table rows become flex cards so the customer
   can read everything without horizontal scroll.
   Layout per card:
     Line 1: [thumbnail] [name + subtitle]  [Ver detalles btn]
     Line 2:             [status badge]  (indented 50px)
   ─────────────────────────────────────────── */
@media (max-width: 480px) {

    .bim-orders-container {
        padding: 0 var(--bim-space-3);
    }

    .bim-orders-toolbar {
        padding: var(--bim-space-3) !important;
        gap: var(--bim-space-2) !important;
    }

    /* No horizontal scroll — cards fill 100% width */
    .bim-orders-section .bim-orders-tbl-wrap {
        overflow-x: visible;
    }

    /* Table and tbody become block containers */
    .bim-orders-section .bim-orders-tbl,
    .bim-orders-section .bim-orders-tbl tbody {
        display: block !important;
        min-width: unset !important;
    }

    /* Hide header row — labels move into card context */
    .bim-orders-section .bim-orders-tbl thead {
        display: none !important;
    }

    /* Row → wrapping flex card */
    .bim-orders-section .bim-orders-tbl tbody tr.bim-order-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        padding: 12px 14px !important;
        gap: 0 !important;
        border-bottom: 1px solid var(--bim-border-light) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Reset all td padding */
    .bim-orders-section .bim-orders-tbl td {
        padding: 0 !important;
        border: none !important;
    }

    /* ── Hide: ID, Progress (Date already hidden at ≤900px) ── */
    .bim-orders-section .bim-orders-tbl .bim-tbl-td-id,
    .bim-orders-section .bim-orders-tbl .bim-tbl-td-progress {
        display: none !important;
    }

    /* ── Product: flex-grow, left side of line 1 ── */
    .bim-orders-section .bim-orders-tbl .bim-tbl-td-product {
        flex: 1 1 0%;
        min-width: 0;
        max-width: none;
        order: 1;
        padding-right: 10px !important;
    }

    /* ── Actions: flex-shrink, right side of line 1 ── */
    .bim-orders-section .bim-orders-tbl .bim-tbl-td-actions {
        flex-shrink: 0;
        order: 2;
        text-align: right;
        white-space: nowrap;
    }

    /* ── Status: own line below, indented to align with product text ──
       40px (thumbnail) + 10px (gap in .bim-tbl-product-cell) = 50px */
    .bim-orders-section .bim-orders-tbl .bim-tbl-td-status {
        flex-basis: 100%;
        order: 3;
        padding: 6px 0 0 50px !important;
    }

    /* Make the "Ver detalles" button smaller on card view */
    .bim-orders-section .bim-tbl-td-actions a.bim-btn.bim-btn-outline,
    .bim-orders-section .bim-tbl-td-actions button.bim-btn.bim-btn-outline {
        font-size: var(--bim-text-xs) !important;
        padding: 5px 10px !important;
    }

    /* Chat badge: show mobile variant (inside img-wrap), hide row variant */
    .bim-orders-section .bim-tbl-chat-badge--mobile {
        display: flex !important;
    }

    .bim-orders-section .bim-tbl-chat-badge--row {
        display: none !important;
    }

    /* Offer timer badge: compact on mobile cards */
    .bim-offer-timer-badge {
        font-size: 10px;
        padding: 3px 6px;
    }

}

/* ============================================
   ORDER LIST — Empty State
   Sits inside .bim-orders-tbl-wrap for the same
   card border + background as the orders table.
   ============================================ */

.bim-empty-state-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--bim-space-3);
    padding: var(--bim-space-10, 4rem) var(--bim-space-5);
}

.bim-empty-state-modern .bim-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bim-bg-input);
    border: 1px solid var(--bim-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bim-text-faint);
    flex-shrink: 0;
    margin-bottom: var(--bim-space-2);
}

.bim-empty-state-modern .bim-empty-icon .material-symbols-outlined {
    font-size: 1.75rem;
    line-height: 1;
}

.bim-empty-state-modern h3 {
    font-family: var(--bim-font);
    font-size: var(--bim-text-lg);
    font-weight: 700;
    color: var(--bim-text-primary);
    margin: 0;
    line-height: 1.3;
}

.bim-empty-state-modern p {
    font-family: var(--bim-font);
    font-size: var(--bim-text-sm);
    color: var(--bim-text-muted);
    margin: 0;
    max-width: 280px;
    line-height: 1.6;
}

.bim-empty-state-modern .bim-btn {
    margin-top: var(--bim-space-2);
}

/* ============================================
   ORDER LIST — Journey Cards Grid
   ============================================ */

.bim-journey-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--bim-space-4);
}

/* ============================================
   ORDER LIST — Journey Card
   ============================================ */

.bim-journey-card {
    background: var(--bim-surface);
    border: 1px solid var(--bim-border);
    border-radius: var(--bim-radius-lg);
    box-shadow: var(--bim-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--bim-transition-base) ease,
                border-color var(--bim-transition-base) ease;
}

.bim-journey-card:hover {
    box-shadow: var(--bim-shadow);
    border-color: var(--bim-border-focus);
}

/* ── Card Header ── */

.bim-card-header {
    display: flex;
    align-items: center;
    gap: var(--bim-space-3);
    padding: var(--bim-space-4);
}

/* Product image */
.bim-card-product-image {
    width: 52px;
    height: 52px;
    border-radius: var(--bim-radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--bim-border-light);
}

/* Product placeholder (no image) */
.bim-card-product-placeholder {
    width: 52px;
    height: 52px;
    border-radius: var(--bim-radius-sm);
    background: var(--bim-bg-input);
    border: 1px solid var(--bim-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bim-text-faint);
}

.bim-card-product-placeholder .material-symbols-outlined {
    font-size: var(--bim-icon-lg);
    line-height: 1;
}

/* Title + order code group */
.bim-card-title-group {
    display: flex;
    flex-direction: column;
    gap: var(--bim-space-1);
    flex: 1;
    min-width: 0; /* allows text-overflow: ellipsis to work */
}

.bim-card-title-group h3 {
    font-family: var(--bim-font);
    font-size: var(--bim-text-base);
    font-weight: 700;
    color: var(--bim-text-primary);
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bim-card-order-code {
    font-family: var(--bim-font);
    font-size: var(--bim-text-xs);
    color: var(--bim-text-faint);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Arrow action button */
.bim-card-actions {
    flex-shrink: 0;
    margin-left: auto;
}

.bim-card-actions .bim-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bim-bg-input);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bim-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--bim-transition-fast) ease,
                color var(--bim-transition-fast) ease;
}

.bim-card-actions .bim-btn-icon:hover {
    background: var(--bim-bg-hover) !important;
    color: var(--bim-text-primary);
}

.bim-card-actions .bim-btn-icon .material-symbols-outlined {
    font-size: var(--bim-icon-base);
    line-height: 1;
}

/* ── Mini Journey Path ── */

.bim-card-journey-mini {
    padding: var(--bim-space-3) var(--bim-space-4);
    border-top: 1px solid var(--bim-border-light);
    border-bottom: 1px solid var(--bim-border-light);
}

.bim-mini-path {
    display: flex;
    align-items: center;
}

/* Individual stage dot */
.bim-mini-stage {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    line-height: 1;
    flex-shrink: 0;
    border: 1.5px solid transparent;
    transition: all var(--bim-transition-base) ease;
}

/* Connecting line between stages */
.bim-mini-line {
    flex: 1;
    height: 2px;
    background: var(--bim-border);
    transition: background var(--bim-transition-base) ease;
}

/* Stage states */
.bim-mini-stage.upcoming {
    background: var(--bim-bg-hover);
    border-color: var(--bim-border);
}

.bim-mini-stage.active {
    background: var(--bim-info-light);
    border-color: var(--bim-info);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.bim-mini-stage.completed {
    background: var(--bim-success-light);
    border-color: var(--bim-success-border);
}

/* Line after a completed stage turns green — the path fills as cargo advances */
.bim-mini-stage.completed + .bim-mini-line {
    background: var(--bim-success);
}

/* ── Card Meta ── */

.bim-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bim-space-3);
    padding: var(--bim-space-4);
}

.bim-meta-item {
    display: flex;
    flex-direction: column;
    gap: var(--bim-space-1);
    flex: 1 1 80px;
    min-width: 72px;
}

.bim-meta-label {
    font-family: var(--bim-font);
    font-size: var(--bim-text-2xs);
    font-weight: 600;
    color: var(--bim-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.bim-meta-value {
    font-family: var(--bim-font);
    font-size: var(--bim-text-sm);
    font-weight: 600;
    color: var(--bim-text-primary);
    line-height: 1.4;
}

/* ── Items Preview Strip ── */

.bim-card-items-preview {
    padding: var(--bim-space-3) var(--bim-space-4);
    border-top: 1px solid var(--bim-border-light);
    font-family: var(--bim-font);
    font-size: var(--bim-text-sm);
    color: var(--bim-text-muted);
    text-align: center;
    line-height: 1.4;
}

/* ============================================
   EXPIRED QUOTE — Row highlight & actions
   ============================================ */

.bim-orders-section .bim-orders-tbl tbody tr.bim-order-row.bim-order-row--expired {
    background: var(--bim-accent-light) !important;
}

.bim-orders-section .bim-orders-tbl tbody tr.bim-order-row.bim-order-row--expired:hover {
    background: rgba(255, 0, 0, 0.06) !important;
}

.bim-tbl-actions-expired {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    width: 100%;
}

.bim-orders-section .bim-tbl-td-actions .bim-tbl-actions-expired .bim-btn.bim-btn-accent.bim-btn-sm,
.bim-orders-section .bim-tbl-td-actions .bim-tbl-actions-expired .bim-tbl-action-link {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.bim-tbl-action-link {
    display: inline-block;
    font-size: var(--bim-text-sm);
    font-weight: 500;
    color: var(--bim-text-secondary);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid var(--bim-border);
    border-radius: var(--bim-radius-sm);
    background: var(--bim-surface);
    line-height: 1.4;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.bim-tbl-action-link:hover {
    color: var(--bim-text-primary);
    border-color: var(--bim-text-faint);
    text-decoration: none;
}

.bim-orders-section .bim-tbl-td-actions a.bim-btn.bim-btn-accent {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
    font-size: var(--bim-text-sm) !important;
}

/* ============================================
   RESPONSIVE — Order Cards
   ============================================ */

@media (max-width: 640px) {
    .bim-journey-cards-grid {
        grid-template-columns: 1fr;
    }

    .bim-tbl-actions-expired {
        align-items: center;
    }
}

/* ── Negotiation Notices (Dashboard) ─────────────────────────── */

.bim-dashboard-notices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 24px 16px;
}

.bim-dashboard-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: var(--bim-text-sm, 13px);
    font-weight: 500;
}

.bim-dashboard-notice.bim-notice-success {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.bim-dashboard-notice.bim-notice-warning {
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
}

.bim-notice-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.bim-notice-text {
    flex: 1;
    line-height: 1.4;
}

.bim-notice-cta {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
    opacity: 0.8;
}

.bim-notice-cta:hover {
    opacity: 1;
}

.bim-notice-dismiss {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    line-height: 1;
    flex-shrink: 0;
}

.bim-notice-dismiss:hover {
    opacity: 1;
}

.bim-notice-dismiss .material-symbols-outlined {
    font-size: 16px;
    display: block;
}

/* ============================================
   SIDEBAR — PROFILE CARD
   ============================================ */
a.bim-sidebar-profile-card {
    display: flex;
    align-items: center;
    gap: var(--bim-space-3);
    padding: var(--bim-space-3) var(--bim-space-4);
    background: var(--bim-surface);
    border: 1px solid var(--bim-border);
    border-radius: var(--bim-radius-sm);
    box-shadow: var(--bim-shadow-sm);
    text-decoration: none !important;
    transition: box-shadow 0.2s, transform 0.15s;
    cursor: pointer;
    margin-top: var(--bim-space-3);
}

a.bim-sidebar-profile-card:hover {
    box-shadow: var(--bim-shadow) !important;
    transform: translateY(-1px);
}

.bim-sidebar-profile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bim-info-light);
    border-radius: var(--bim-radius-sm);
    flex-shrink: 0;
}

.bim-sidebar-profile-icon .material-symbols-outlined {
    font-size: 20px;
    color: var(--bim-info);
}

.bim-sidebar-profile-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.bim-sidebar-profile-title {
    font-size: var(--bim-text-sm);
    font-weight: 700;
    color: var(--bim-text-primary);
}

.bim-sidebar-profile-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--bim-text-muted);
}

.bim-sidebar-profile-arrow {
    font-size: 20px;
    color: var(--bim-text-faint);
    flex-shrink: 0;
}

/* ── NEW feature highlight ── */
a.bim-sidebar-profile-card.bim-sidebar-profile-card--new {
    position: relative;
    border-color: var(--bim-accent-border);
    background: var(--bim-accent-light);
}

a.bim-sidebar-profile-card.bim-sidebar-profile-card--new:hover {
    background: rgba(255, 0, 0, 0.06) !important;
}

.bim-sidebar-profile-new-badge {
    position: absolute;
    top: -8px;
    right: var(--bim-space-3);
    background: var(--bim-accent);
    color: var(--bim-surface);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 9999px;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(255, 0, 0, 0.3);
    animation: bimPulse 2s ease-in-out 3;
}

a.bim-sidebar-profile-card.bim-sidebar-profile-card--new .bim-sidebar-profile-icon {
    background: var(--bim-accent);
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.25);
}

a.bim-sidebar-profile-card.bim-sidebar-profile-card--new .bim-sidebar-profile-icon .material-symbols-outlined {
    color: var(--bim-surface);
}