/* /Components/purchasing/ProductPurchaseContextView.razor.rz.scp.css */
/* ============================================================
   ProductPurchaseContextView — Paso 2 CSS
   ============================================================ */

/* ── Alerts Area ── */
.ctx-alerts-area[b-oxwj0ew391] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.ctx-alert[b-oxwj0ew391] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid;
    font-size: 0.875rem;
    animation: ctx-fade-in-b-oxwj0ew391 0.3s ease;
}

.ctx-alert-warn[b-oxwj0ew391] {
    background-color: #fffbeb;
    border-color: #fcd34d;
    color: #78350f;
}

.ctx-alert-icon[b-oxwj0ew391] {
    flex-shrink: 0;
    font-size: 1.1rem;
    margin-top: 1px;
}

.ctx-alert-body[b-oxwj0ew391] {
    flex: 1;
    line-height: 1.5;
}

.ctx-alert-hint[b-oxwj0ew391] {
    display: block;
    font-size: 0.78rem;
    color: #92400e;
    margin-top: 3px;
    font-style: italic;
}

/* ── Main Card ── */
.ctx-card[b-oxwj0ew391] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-bottom: 0;
}

.ctx-card-shimmer[b-oxwj0ew391] {
    animation: ctx-shimmer-pulse-b-oxwj0ew391 1.5s ease-in-out infinite;
}

@keyframes ctx-shimmer-pulse-b-oxwj0ew391 {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.7; }
}

@keyframes ctx-fade-in-b-oxwj0ew391 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ── */
.ctx-header[b-oxwj0ew391] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(to right, #f8faff, #ffffff);
    border-bottom: 1px solid #f0f2f5;
}

.ctx-thumb[b-oxwj0ew391] {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.8rem;
    color: #3b82f6;
    overflow: hidden;
}

.ctx-thumb img[b-oxwj0ew391] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ctx-product-meta[b-oxwj0ew391] {
    flex: 1;
    min-width: 0;
}

.ctx-product-name[b-oxwj0ew391] {
    font-weight: 700;
    font-size: 1rem;
    color: #1a1e21;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ctx-product-tags[b-oxwj0ew391] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.ctx-tag[b-oxwj0ew391] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.ctx-tag-dark[b-oxwj0ew391] {
    background: #1e2a38;
    color: #ffffff;
}

.ctx-tag-muted[b-oxwj0ew391] {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.ctx-tag-cost[b-oxwj0ew391] {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.ctx-step-badge[b-oxwj0ew391] {
    margin-left: auto;
    flex-shrink: 0;
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* ── Loading ── */
.ctx-loading[b-oxwj0ew391] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

/* ── Sections ── */
.ctx-section[b-oxwj0ew391] {
    padding: 20px 24px;
    border-bottom: 1px solid #f0f2f5;
}

.ctx-section-label[b-oxwj0ew391] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
}

/* ── Inventory Channel Grid ── */
.ctx-channel-grid[b-oxwj0ew391] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.ctx-channel-card[b-oxwj0ew391] {
    border-radius: 10px;
    padding: 14px 12px;
    background: #fafafa;
    border: 1px solid #e8ecef;
    border-left: 3px solid transparent;
    text-align: center;
}

.ctx-channel-card.accent-blue[b-oxwj0ew391]   { border-left-color: #3b82f6; background: #eff6ff; }
.ctx-channel-card.accent-teal[b-oxwj0ew391]   { border-left-color: #0d9488; background: #f0fdfa; }
.ctx-channel-card.accent-purple[b-oxwj0ew391] { border-left-color: #8b5cf6; background: #faf5ff; }
.ctx-channel-card.accent-orange[b-oxwj0ew391] { border-left-color: #f59e0b; background: #fffbeb; }

.ch-name[b-oxwj0ew391] {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
    margin-bottom: 4px;
}

.ctx-channel-card.accent-blue   .ch-name[b-oxwj0ew391] { color: #1d4ed8; }
.ctx-channel-card.accent-teal   .ch-name[b-oxwj0ew391] { color: #0f766e; }
.ctx-channel-card.accent-purple .ch-name[b-oxwj0ew391] { color: #6d28d9; }
.ctx-channel-card.accent-orange .ch-name[b-oxwj0ew391] { color: #b45309; }

.ch-avail[b-oxwj0ew391] {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    color: #1a1e21;
}

.ch-avail-lbl[b-oxwj0ew391] {
    font-size: 0.65rem;
    color: #94a3b8;
    margin-top: 2px;
}

.ch-transit[b-oxwj0ew391] {
    margin-top: 6px;
    font-size: 0.68rem;
    color: #64748b;
    background: rgba(0,0,0,.04);
    border-radius: 4px;
    padding: 2px 6px;
}

/* ── Two-column layout ── */
.ctx-two-col[b-oxwj0ew391] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-bottom: 1px solid #f0f2f5;
}

.ctx-col-panel[b-oxwj0ew391] {
    padding: 20px 24px;
}

.ctx-col-panel:first-child[b-oxwj0ew391] {
    border-right: 1px solid #f0f2f5;
}

/* ── Table ── */
.ctx-table[b-oxwj0ew391] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.ctx-table thead tr[b-oxwj0ew391] {
    border-bottom: 1px solid #e8ecef;
}

.ctx-table th[b-oxwj0ew391] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    padding: 0 6px 8px 0;
    white-space: nowrap;
}

.ctx-table td[b-oxwj0ew391] {
    padding: 6px 6px 6px 0;
    border-bottom: 1px solid #f8fafc;
    vertical-align: middle;
}

.ctx-table tbody tr:last-child td[b-oxwj0ew391] {
    border-bottom: none;
}

.ctx-status-badge[b-oxwj0ew391] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    background: #fef3c7;
    color: #92400e;
}

/* ── Empty state ── */
.ctx-empty[b-oxwj0ew391] {
    padding: 20px 0;
    font-size: 0.82rem;
    color: #94a3b8;
}

/* ── Velocity ── */
.ctx-velocity-row[b-oxwj0ew391] {
    display: flex;
    align-items: center;
}

.ctx-vel-cell[b-oxwj0ew391] {
    flex: 1;
    text-align: center;
    padding: 8px 0;
}

.ctx-vel-divider[b-oxwj0ew391] {
    width: 1px;
    height: 50px;
    background: #e8ecef;
    flex-shrink: 0;
}

.vel-number[b-oxwj0ew391] {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.vel-label[b-oxwj0ew391] {
    font-size: 0.68rem;
    color: #94a3b8;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.vel-high[b-oxwj0ew391] { color: #16a34a; }
.vel-mid[b-oxwj0ew391]  { color: #d97706; }
.vel-low[b-oxwj0ew391]  { color: #dc2626; }

/* ── Profitability ── */
.ctx-profit-list[b-oxwj0ew391] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ctx-profit-row[b-oxwj0ew391] {
    display: grid;
    grid-template-columns: 80px 70px 1fr 50px;
    align-items: center;
    gap: 8px;
}

.profit-channel[b-oxwj0ew391] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1a1e21;
}

.profit-price[b-oxwj0ew391] {
    font-size: 0.75rem;
    text-align: right;
}

.profit-bar-wrap[b-oxwj0ew391] {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}

.profit-bar-fill[b-oxwj0ew391] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.profit-pct[b-oxwj0ew391] {
    font-size: 0.78rem;
    text-align: right;
}

/* ── Calculator ── */
.ctx-calc-form[b-oxwj0ew391] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ctx-calc-row[b-oxwj0ew391] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ctx-calc-field[b-oxwj0ew391] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ctx-calc-label[b-oxwj0ew391] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ctx-calc-hint[b-oxwj0ew391] {
    font-weight: 400;
    text-transform: none;
    color: #94a3b8;
    letter-spacing: 0;
}

.ctx-calc-input[b-oxwj0ew391] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #1a1e21;
    background: #f8fafc;
    outline: none;
    transition: border-color 0.15s;
}

.ctx-calc-input:focus[b-oxwj0ew391] {
    border-color: #3b82f6;
    background: #fff;
}

.ctx-calc-select[b-oxwj0ew391] {
    cursor: pointer;
}

.ctx-btn-calc[b-oxwj0ew391] {
    margin-top: 10px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 7px;
    font-weight: 700;
    font-size: 0.82rem;
    border: none;
    background: #1d4ed8;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.ctx-btn-calc:hover:not(:disabled)[b-oxwj0ew391] {
    background: #1e40af;
}

.ctx-btn-calc:disabled[b-oxwj0ew391] {
    opacity: 0.45;
    cursor: not-allowed;
}

.ctx-calc-footnote[b-oxwj0ew391] {
    margin-top: 8px;
    font-size: 0.67rem;
    color: #94a3b8;
    font-style: italic;
}

/* ── Unavailable ── */
.ctx-unavailable[b-oxwj0ew391] {
    display: flex;
    align-items: center;
    padding: 32px 24px;
}

/* ── Footer ── */
.ctx-footer[b-oxwj0ew391] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #f0f2f5;
    gap: 12px;
}

.ctx-btn-back[b-oxwj0ew391] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    border: 1px solid #e2e8f0;
    background: transparent;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

.ctx-btn-back:hover[b-oxwj0ew391] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}

.ctx-btn-continue[b-oxwj0ew391] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    border: none;
    background: #2e7d32;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(46, 125, 50, 0.2);
    transition: all 0.2s;
}

.ctx-btn-continue:hover[b-oxwj0ew391] {
    background: #1b5e20;
    transform: translateY(-1px);
    box-shadow: 0 6px 10px rgba(46, 125, 50, 0.3);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .ctx-channel-grid[b-oxwj0ew391] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ctx-two-col[b-oxwj0ew391] {
        grid-template-columns: 1fr;
    }

    .ctx-col-panel:first-child[b-oxwj0ew391] {
        border-right: none;
        border-bottom: 1px solid #f0f2f5;
    }

    .ctx-profit-row[b-oxwj0ew391] {
        grid-template-columns: 70px 60px 1fr 44px;
    }

    .ctx-step-badge[b-oxwj0ew391] {
        display: none;
    }
}

/* ── Dark mode ── */
[data-bs-theme="dark"] .ctx-card[b-oxwj0ew391] {
    background: #18181b !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .ctx-header[b-oxwj0ew391] {
    background: linear-gradient(to right, #0f172a, #18181b) !important;
    border-bottom-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .ctx-product-name[b-oxwj0ew391] {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .ctx-tag-muted[b-oxwj0ew391] {
    background: #27272a !important;
    border-color: #3f3f46 !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .ctx-tag-dark[b-oxwj0ew391] {
    background: #3f3f46 !important;
}

[data-bs-theme="dark"] .ctx-tag-cost[b-oxwj0ew391] {
    background: #1e3a5f !important;
    border-color: #1e40af !important;
    color: #93c5fd !important;
}

[data-bs-theme="dark"] .ctx-step-badge[b-oxwj0ew391] {
    background: #0c1a2e !important;
    border-color: #1e40af !important;
    color: #7dd3fc !important;
}

[data-bs-theme="dark"] .ctx-section[b-oxwj0ew391] {
    border-bottom-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .ctx-section-label[b-oxwj0ew391] {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .ctx-channel-card[b-oxwj0ew391] {
    background: #27272a !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .ctx-channel-card.accent-blue[b-oxwj0ew391]   { background: #0c1a2e !important; }
[data-bs-theme="dark"] .ctx-channel-card.accent-teal[b-oxwj0ew391]   { background: #042f2e !important; }
[data-bs-theme="dark"] .ctx-channel-card.accent-purple[b-oxwj0ew391] { background: #1e1030 !important; }
[data-bs-theme="dark"] .ctx-channel-card.accent-orange[b-oxwj0ew391] { background: #1c0a00 !important; }

[data-bs-theme="dark"] .ch-avail[b-oxwj0ew391] {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .ctx-two-col[b-oxwj0ew391] {
    border-bottom-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .ctx-col-panel:first-child[b-oxwj0ew391] {
    border-right-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .ctx-table th[b-oxwj0ew391] {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .ctx-table td[b-oxwj0ew391] {
    border-bottom-color: #27272a !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .ctx-table thead tr[b-oxwj0ew391] {
    border-bottom-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .ctx-vel-divider[b-oxwj0ew391] {
    background: #3f3f46 !important;
}

[data-bs-theme="dark"] .profit-channel[b-oxwj0ew391] {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .profit-bar-wrap[b-oxwj0ew391] {
    background: #27272a !important;
}

[data-bs-theme="dark"] .ctx-footer[b-oxwj0ew391] {
    background: #09090b !important;
    border-top-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .ctx-btn-back[b-oxwj0ew391] {
    border-color: #3f3f46 !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .ctx-btn-back:hover[b-oxwj0ew391] {
    background: #27272a !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .ctx-alert-warn[b-oxwj0ew391] {
    background-color: #292208 !important;
    border-color: #854d0e !important;
    color: #fde68a !important;
}

[data-bs-theme="dark"] .ctx-alert-hint[b-oxwj0ew391] {
    color: #fcd34d !important;
}
/* /Components/ui/ContextualSearch.razor.rz.scp.css */
.search-group[b-srpdr1pwaa] {
    position: relative;
    width: 600px;
    max-width: 100%;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 9999px;
    background-color: var(--surface-white, #ffffff);
    overflow: hidden;
    height: 44px; /* Un poco mas pequeño para el Topbar */
    transition: box-shadow 0.2s;
}

.search-group:focus-within[b-srpdr1pwaa] {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
    border-color: #818cf8;
}

.context-badge[b-srpdr1pwaa] {
    padding-left: 1.25rem;
    align-items: center;
    justify-content: center;
}

.small-dot[b-srpdr1pwaa] {
    font-size: 0.5rem;
}

.search-scope-select[b-srpdr1pwaa] {
    border: none;
    background-color: transparent;
    padding: 0 0.8rem 0 0.5rem;
    height: 100%;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark, #1f2937);
    border-right: 1px solid var(--border-subtle, #e5e7eb);
    outline: none;
    cursor: pointer;
    min-width: 100px;
    max-width: 170px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 10px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-input-wrapper[b-srpdr1pwaa] {
    position: relative;
    flex-grow: 1;
    height: 100%;
    display: flex;
    align-items: center;
}

.search-input-wrapper i[b-srpdr1pwaa] {
    position: absolute;
    left: 1rem;
    color: var(--text-gray, #6b7280);
    font-size: 1rem;
    pointer-events: none;
}

.input-modern[b-srpdr1pwaa] {
    width: 100%;
    height: 100%;
    padding: 0 1rem 0 2.5rem;
    color: var(--text-dark, #1f2937);
    outline: none;
    background: transparent;
    font-size: 0.9rem;
}

.input-modern[b-srpdr1pwaa]::placeholder {
    color: #9ca3af;
}

.btn-search-icon[b-srpdr1pwaa] {
    height: 100%;
    width: 50px;
    color: white;
    border: none;
    border-radius: 0 9999px 9999px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: opacity 0.2s;
}

.btn-search-icon:hover[b-srpdr1pwaa] {
    opacity: 0.9;
}

/* ========================================= */
/* --- DARK MODE OVERRIDES ---               */
/* ========================================= */

[data-bs-theme="dark"] .search-group[b-srpdr1pwaa] {
    background-color: #09090b !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .search-group:focus-within[b-srpdr1pwaa] {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

[data-bs-theme="dark"] .search-scope-select[b-srpdr1pwaa] {
    color: #f3f4f6 !important;
    border-right-color: #3f3f46 !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f3f4f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
}

[data-bs-theme="dark"] .search-scope-select option[b-srpdr1pwaa] {
    background-color: #18181b !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .input-modern[b-srpdr1pwaa] {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .input-modern[b-srpdr1pwaa]::placeholder {
    color: #6c757d !important;
}
/* /Components/ui/PeriodBreakdownModal.razor.rz.scp.css */
/* ==============================================
   PeriodBreakdownModal.razor.css
   Estilos del Modal "Desglose del período"
   ============================================== */

/* --- BACKDROP --- */
.pbd-backdrop[b-w16vocboik] {
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: pbd-fade-in-b-w16vocboik 0.18s ease;
}

@keyframes pbd-fade-in-b-w16vocboik {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- DIALOG SIZE & ANIMATION --- */
.pbd-dialog[b-w16vocboik] {
    animation: pbd-slide-up-b-w16vocboik 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pbd-slide-up-b-w16vocboik {
    from { transform: translateY(24px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* --- CONTENT SHELL --- */
.pbd-content[b-w16vocboik] {
    background-color: var(--surface-white, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

/* --- HEADER --- */
.pbd-header[b-w16vocboik] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    background-color: var(--surface-white, #ffffff);
}

.pbd-subtitle[b-w16vocboik] {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9ca3af;
    margin-bottom: 2px;
}

.pbd-title[b-w16vocboik] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1f2937;
    letter-spacing: -0.3px;
}

/* --- FLOATING SELECT (header) --- */
.pbd-floating-field[b-w16vocboik] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 200px;
}

.pbd-floating-label[b-w16vocboik] {
    position: absolute;
    top: -9px;
    left: 12px;
    background-color: var(--surface-white, #ffffff);
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #6b7280;
    z-index: 2;
}

.pbd-select[b-w16vocboik] {
    height: 42px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0 36px 0 14px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pbd-select:focus[b-w16vocboik] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* --- EXPORT BUTTON --- */
.pbd-btn-export[b-w16vocboik] {
    background-color: #1f2937;
    color: #f9fafb;
    border: none;
    border-radius: 8px;
    padding: 0.45rem 1.1rem;
    font-size: 0.85rem;
    transition: background-color 0.2s, transform 0.15s;
}

.pbd-btn-export:hover[b-w16vocboik] {
    background-color: #111827;
    color: #fff;
    transform: translateY(-1px);
}

/* --- CLOSE BUTTON --- */
.pbd-close[b-w16vocboik] {
    filter: none;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.pbd-close:hover[b-w16vocboik] {
    opacity: 1;
}

/* --- BODY & TABLE SCROLL --- */
.pbd-body[b-w16vocboik] {
    max-height: 55vh;
    overflow: hidden;
}

.pbd-table-wrapper[b-w16vocboik] {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 55vh;
}

/* Custom scrollbar */
.pbd-table-wrapper[b-w16vocboik]::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.pbd-table-wrapper[b-w16vocboik]::-webkit-scrollbar-track {
    background: transparent;
}

.pbd-table-wrapper[b-w16vocboik]::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 99px;
}

.pbd-table-wrapper[b-w16vocboik]::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af;
}

/* --- TABLE ITSELF --- */
.pbd-thead th[b-w16vocboik] {
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #6b7280;
    background-color: #f9fafb;
    padding: 0.9rem 1rem;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.pbd-table td[b-w16vocboik] {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
    font-size: 0.875rem;
    color: #374151;
}

.pbd-row:last-child td[b-w16vocboik] {
    border-bottom: none;
}

.pbd-cell-period[b-w16vocboik] {
    color: #1f2937 !important;
}

/* Highlighted rows */
.pbd-row.row-min[b-w16vocboik] {
    background-color: rgba(34, 197, 94, 0.06);
}

.pbd-row.row-max[b-w16vocboik] {
    background-color: rgba(239, 68, 68, 0.06);
}

/* Purchase count badge */
.pbd-badge[b-w16vocboik] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    background-color: #f3f4f6;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
}

/* --- FOOTER --- */
.pbd-footer[b-w16vocboik] {
    padding: 0.9rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

.pbd-legend-item[b-w16vocboik] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
}

.pbd-legend-dot[b-w16vocboik] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot-min[b-w16vocboik] { background-color: #22c55e; }
.dot-max[b-w16vocboik] { background-color: #ef4444; }

/* ==============================================
   DARK MODE
   ============================================== */
[data-bs-theme="dark"] .pbd-content[b-w16vocboik] {
    background-color: #18181b !important;
    border-color: #3f3f46 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
}

[data-bs-theme="dark"] .pbd-header[b-w16vocboik] {
    background-color: #18181b !important;
    border-bottom-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pbd-title[b-w16vocboik] {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .pbd-subtitle[b-w16vocboik] {
    color: #71717a !important;
}

[data-bs-theme="dark"] .pbd-floating-label[b-w16vocboik] {
    background-color: #18181b !important;
    color: #a1a1aa !important;
}

[data-bs-theme="dark"] .pbd-select[b-w16vocboik] {
    border-color: #52525b !important;
    color: #f3f4f6 !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f3f4f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
}

[data-bs-theme="dark"] .pbd-select:focus[b-w16vocboik] {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2) !important;
}

[data-bs-theme="dark"] .pbd-btn-export[b-w16vocboik] {
    background-color: #3f3f46 !important;
    color: #f3f4f6 !important;
    border-color: #52525b !important;
}

[data-bs-theme="dark"] .pbd-btn-export:hover[b-w16vocboik] {
    background-color: #52525b !important;
}

[data-bs-theme="dark"] .pbd-close[b-w16vocboik] {
    filter: invert(1) !important;
}

[data-bs-theme="dark"] .pbd-thead th[b-w16vocboik] {
    background-color: #09090b !important;
    color: #a1a1aa !important;
    border-bottom-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pbd-table td[b-w16vocboik] {
    color: #d4d4d8 !important;
    border-bottom-color: #27272a !important;
}

[data-bs-theme="dark"] .pbd-cell-period[b-w16vocboik] {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .pbd-row.row-min[b-w16vocboik] {
    background-color: rgba(34, 197, 94, 0.08) !important;
}

[data-bs-theme="dark"] .pbd-row.row-max[b-w16vocboik] {
    background-color: rgba(239, 68, 68, 0.08) !important;
}

[data-bs-theme="dark"] .pbd-badge[b-w16vocboik] {
    background-color: #27272a !important;
    color: #d4d4d8 !important;
}

[data-bs-theme="dark"] .pbd-footer[b-w16vocboik] {
    background-color: #09090b !important;
    border-top-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pbd-legend-item[b-w16vocboik] {
    color: #a1a1aa !important;
}

[data-bs-theme="dark"] .pbd-table-wrapper[b-w16vocboik]::-webkit-scrollbar-thumb {
    background-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pbd-table-wrapper[b-w16vocboik]::-webkit-scrollbar-thumb:hover {
    background-color: #52525b !important;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* MainLayout.razor.css */

:root[b-0b3e3e89yu] {
    --sidebar-width: 250px;
    --header-height: 70px;
}

.page[b-0b3e3e89yu] {
    position: relative;
    background-color: var(--bg-body);
    height: 100vh;
    width: 100vw;
}

.sidebar[b-0b3e3e89yu] {
    width: var(--sidebar-width);
    flex-shrink: 0;
    z-index: 10;
    /* Optional: Add a subtle border or shadow instead of gradient if preferring clean look, or use primary color */
    background-color: var(--bg-surface) !important;
    border-right: 1px solid var(--border-color);
    transition: width 0.3s ease;
}

.sidebar-collapsed[b-0b3e3e89yu] {
    width: 80px !important;
}

.main-content-area[b-0b3e3e89yu] {
    min-width: 0;
    background-color: var(--bg-body);
}

.header-bar[b-0b3e3e89yu] {
    height: var(--header-height);
    background-color: var(--bg-surface) !important;
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: var(--shadow-sm);
}

.search-container[b-0b3e3e89yu] {
    width: 400px;
}

/* --- ACTION BUTTONS --- */
.btn-icon-circle[b-0b3e3e89yu] {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-md);
    border: 1px solid transparent;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-icon-circle:hover[b-0b3e3e89yu] {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

.btn-icon-circle:hover svg[b-0b3e3e89yu] {
    stroke: var(--primary-color);
}

.notification-badge[b-0b3e3e89yu] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
    border-radius: 50%;
    border: 1px solid white;
}

/* --- AVATAR --- */
.avatar-circle[b-0b3e3e89yu] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-base);
}

.profile-section:hover .avatar-circle[b-0b3e3e89yu] {
    background-color: var(--primary-color);
    color: white;
}

/* --- RESPONSIVE --- */
@media (max-width: 991.98px) {
    .sidebar[b-0b3e3e89yu] {
        display: none;
        /* Controlled by bootstrap d-lg-block, but good to be explicit */
    }
}

@media (max-width: 640.98px) {
    .header-bar[b-0b3e3e89yu] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .content[b-0b3e3e89yu] {
        padding: 1rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
[b-dihmbytom9]::-webkit-scrollbar {
    width: 6px;
}

[b-dihmbytom9]::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.logout-container[b-dihmbytom9] {
    /* Ensure no extra padding disrupts alignment */
    padding-left: 0;
    padding-right: 0;
    margin-top: auto;
}

/* Premium Sidebar refinements */
nav.nav[b-dihmbytom9] {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.animate-fade-in[b-dihmbytom9] {
    animation: fadeIn-b-dihmbytom9 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn-b-dihmbytom9 {
    from { 
        opacity: 0; 
        transform: translateX(-12px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

/* =========================================
   ESTILOS PARA BOTONES DE NAVEGACIÓN
   ========================================= */

/* 1. Estado por defecto y transiciones suaves */
[b-dihmbytom9] .btn-formal-dark {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transición premium y fluida */
    border-radius: 6px; /* Ajusta según el diseño de tu app */
    color: #A0AEC0; /* Un gris claro para los inactivos */
    border: none !important;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    text-decoration: none;
    background-color: transparent;
}

/* 2. Efecto Hover creativo (cuando pasas el mouse pero no haces clic) */
[b-dihmbytom9] .btn-formal-dark:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.08) !important; /* Un brillo sutil */
    color: #ffffff !important;
    transform: translateX(4px); /* Pequeño desplazamiento hacia la derecha muy elegante */
}

/* 3. ESTADO ACTIVO (Tu solicitud principal) */
[b-dihmbytom9] .btn-formal-dark.active {
    background-color: #ffffff !important;
    color: #1A202C !important; /* El color de tu fondo oscuro para que haga contraste */
    font-weight: 700; /* Hacemos la fuente un poco más gruesa */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1); /* Sombra para que "resalte" del fondo */
}

/* 4. Forzar el color de los íconos y textos dentro del botón activo */
[b-dihmbytom9] .btn-formal-dark.active i,
[b-dihmbytom9] .btn-formal-dark.active span {
    color: #1A202C !important; /* Textos e íconos en oscuro puro */
}

/* /Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-azme04soz6],
.components-reconnect-repeated-attempt-visible[b-azme04soz6],
.components-reconnect-failed-visible[b-azme04soz6],
.components-pause-visible[b-azme04soz6],
.components-resume-failed-visible[b-azme04soz6],
.components-rejoining-animation[b-azme04soz6] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-azme04soz6],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-azme04soz6],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-azme04soz6],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-azme04soz6],
#components-reconnect-modal.components-reconnect-retrying[b-azme04soz6],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-azme04soz6],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-azme04soz6],
#components-reconnect-modal.components-reconnect-failed[b-azme04soz6],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-azme04soz6] {
    display: block;
}


#components-reconnect-modal[b-azme04soz6] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-azme04soz6 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-azme04soz6 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-azme04soz6 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-azme04soz6]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-azme04soz6 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-azme04soz6 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-azme04soz6 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-azme04soz6 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-azme04soz6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-azme04soz6] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-azme04soz6] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-azme04soz6] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-azme04soz6] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-azme04soz6] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-azme04soz6] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-azme04soz6 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-azme04soz6] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-azme04soz6 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Pages/Admin/Admin_module.razor.rz.scp.css */
/* ============================================================
   Admin Module  —  Bento Box Style
   ============================================================ */

.admin-dashboard[b-ygmtwqwyfd] {
    background-color: #f0f2f5;
    min-height: 100vh;
    padding: 24px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ---- Base de cada celda bento ---- */
.bento-cell[b-ygmtwqwyfd] {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* ============================================================
   BARRA DE ACCIONES RÁPIDAS
   ============================================================ */
.bento-cell.admin-actions-bar[b-ygmtwqwyfd] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 22px;
    background: linear-gradient(135deg, #1e2a38 0%, #2d3e52 100%);
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
    flex-wrap: wrap;
}

.qa-label[b-ygmtwqwyfd] {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.qa-divider[b-ygmtwqwyfd] {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.qa-buttons[b-ygmtwqwyfd] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.qa-btn[b-ygmtwqwyfd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.qa-btn:hover[b-ygmtwqwyfd]  { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); }
.qa-btn:active[b-ygmtwqwyfd] { transform: translateY(0); }

.qa-btn-red[b-ygmtwqwyfd]    { background: #ef4444; color: #fff; }
.qa-btn-amber[b-ygmtwqwyfd]  { background: #f59e0b; color: #fff; }
.qa-btn-blue[b-ygmtwqwyfd]   { background: #3B82F6; color: #fff; }
.qa-btn-slate[b-ygmtwqwyfd]  { background: #64748b; color: #fff; }

.qa-btn-icon[b-ygmtwqwyfd]  { font-size: 1.3rem; flex-shrink: 0; }
.qa-btn-text[b-ygmtwqwyfd]  { display: flex; flex-direction: column; line-height: 1.25; }
.qa-btn-title[b-ygmtwqwyfd] { font-weight: 700; font-size: 0.88rem; }
.qa-btn-sub[b-ygmtwqwyfd]   { font-size: 0.7rem; opacity: 0.82; }

/* ============================================================
   FILA DE KPIs
   ============================================================ */
.stats-row[b-ygmtwqwyfd] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-card[b-ygmtwqwyfd] {
    background: #fff;
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.stat-card[b-ygmtwqwyfd]::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px;
    height: 100%;
    border-radius: 4px 0 0 4px;
}

.accent-blue[b-ygmtwqwyfd]::before   { background: #3B82F6; }
.accent-green[b-ygmtwqwyfd]::before  { background: #10b981; }
.accent-red[b-ygmtwqwyfd]::before    { background: #ef4444; }
.accent-amber[b-ygmtwqwyfd]::before  { background: #f59e0b; }

.stat-icon[b-ygmtwqwyfd] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.accent-blue .stat-icon[b-ygmtwqwyfd]  { background: #eff6ff; color: #3B82F6; }
.accent-green .stat-icon[b-ygmtwqwyfd] { background: #f0fdf4; color: #10b981; }
.accent-red .stat-icon[b-ygmtwqwyfd]   { background: #fef2f2; color: #ef4444; }
.accent-amber .stat-icon[b-ygmtwqwyfd] { background: #fffbeb; color: #f59e0b; }

.stat-info[b-ygmtwqwyfd] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.stat-value[b-ygmtwqwyfd] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e2a38;
    line-height: 1.2;
}

.stat-label[b-ygmtwqwyfd] {
    font-size: 0.68rem;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-badge[b-ygmtwqwyfd] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    align-self: flex-start;
    white-space: nowrap;
}

.badge-ok[b-ygmtwqwyfd]   { background: #dcfce7; color: #15803d; }
.badge-warn[b-ygmtwqwyfd] { background: #fef3c7; color: #92400e; }
.badge-crit[b-ygmtwqwyfd] { background: #fee2e2; color: #dc2626; }

/* ============================================================
   CUADRÍCULA BENTO PRINCIPAL
   ============================================================ */
.bento-main[b-ygmtwqwyfd] {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    grid-template-rows: minmax(300px, auto) minmax(220px, auto);
    gap: 16px;
}

/*
 *  Composición:
 *  [ Avisos (tall) ][ Usuarios en Línea (tall) ][ Mantenimiento  ]
 *  [ Avisos (tall) ][ Usuarios en Línea (tall) ][ Mensajería     ]
 */
.cell-avisos[b-ygmtwqwyfd]        { grid-column: 1;     grid-row: 1 / 3; display: flex; flex-direction: column; }
.cell-usuarios[b-ygmtwqwyfd]      { grid-column: 2;     grid-row: 1 / 3; display: flex; flex-direction: column; }
.cell-mantenimiento[b-ygmtwqwyfd] { grid-column: 3;     grid-row: 1;     display: flex; flex-direction: column; }
.cell-mensajeria[b-ygmtwqwyfd]    { grid-column: 3;     grid-row: 2;     display: flex; flex-direction: column; }

/* ---- Cabecera de celda ---- */
.cell-header[b-ygmtwqwyfd] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.cell-header-icon[b-ygmtwqwyfd] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.icon-red[b-ygmtwqwyfd]    { background: #fef2f2; color: #ef4444; }
.icon-blue[b-ygmtwqwyfd]   { background: #eff6ff; color: #3B82F6; }
.icon-amber[b-ygmtwqwyfd]  { background: #fffbeb; color: #d97706; }
.icon-green[b-ygmtwqwyfd]  { background: #dcfce7; color: #15803d; }
.icon-purple[b-ygmtwqwyfd] { background: #f5f3ff; color: #7c3aed; }
.icon-slate[b-ygmtwqwyfd]  { background: #f1f5f9; color: #64748b; }

.cell-title[b-ygmtwqwyfd] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e2a38;
    margin: 0;
    flex: 1;
}

.cell-header-meta[b-ygmtwqwyfd] {
    font-size: 0.68rem;
    color: #bbb;
}

/* ---- Pie de celda ---- */
.cell-footer[b-ygmtwqwyfd] {
    margin-top: 14px;
    flex-shrink: 0;
}

.btn-cell-outline[b-ygmtwqwyfd] {
    background: transparent;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    width: 100%;
}

.btn-cell-outline:hover[b-ygmtwqwyfd] { background: #f8fafc; border-color: #94a3b8; color: #1e2a38; }

/* ---- Divisor ---- */
.cell-divider[b-ygmtwqwyfd] {
    height: 1px;
    background: #f0f2f5;
    margin: 12px 0;
    flex-shrink: 0;
}

/* ============================================================
   CELDA: AVISOS
   ============================================================ */
.notif-list[b-ygmtwqwyfd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
}

.notif-item[b-ygmtwqwyfd] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #f0f2f5;
    transition: box-shadow 0.15s;
}

.notif-item:hover[b-ygmtwqwyfd] { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07); }

.notif-dot[b-ygmtwqwyfd] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.dot-red[b-ygmtwqwyfd]    { background: #ef4444; }
.dot-amber[b-ygmtwqwyfd]  { background: #f59e0b; }
.dot-blue[b-ygmtwqwyfd]   { background: #3B82F6; }

.notif-body[b-ygmtwqwyfd] { flex: 1; min-width: 0; }

.notif-type[b-ygmtwqwyfd] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.type-critical[b-ygmtwqwyfd] { color: #dc2626; }
.type-warning[b-ygmtwqwyfd]  { color: #d97706; }
.type-info[b-ygmtwqwyfd]     { color: #2563eb; }

.notif-text[b-ygmtwqwyfd] {
    font-size: 0.82rem;
    color: #1e2a38;
    line-height: 1.4;
    font-weight: 500;
}

.notif-meta[b-ygmtwqwyfd] {
    font-size: 0.68rem;
    color: #9CA3AF;
    margin-top: 4px;
}

.notif-dismiss[b-ygmtwqwyfd] {
    font-size: 1.1rem;
    color: #cbd5e1;
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.15s;
    flex-shrink: 0;
    line-height: 1;
}

.notif-dismiss:hover[b-ygmtwqwyfd] { color: #64748b; }

/* ============================================================
   CELDA: USUARIOS EN LÍNEA
   ============================================================ */
.user-list[b-ygmtwqwyfd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    overflow-y: auto;
}

.user-row[b-ygmtwqwyfd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #f0f2f5;
    transition: box-shadow 0.15s, background 0.15s;
}

.user-row:hover[b-ygmtwqwyfd] { background: #f1f5f9; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); }

.avatar[b-ygmtwqwyfd] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: white;
    flex-shrink: 0;
}

.user-info[b-ygmtwqwyfd] { flex: 1; min-width: 0; }

.user-name[b-ygmtwqwyfd] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e2a38;
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-page[b-ygmtwqwyfd] {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-time[b-ygmtwqwyfd] {
    font-size: 0.68rem;
    color: #94a3b8;
    white-space: nowrap;
}

.dot-active[b-ygmtwqwyfd] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
}

.dot-offline[b-ygmtwqwyfd] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
}

/* ============================================================
   CELDA: MANTENIMIENTO
   ============================================================ */
.maintenance-body[b-ygmtwqwyfd] { flex: 1; }

.toggle-row[b-ygmtwqwyfd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #f0f2f5;
}

.toggle-track[b-ygmtwqwyfd] {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: #e2e8f0;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
}

.toggle-track.on[b-ygmtwqwyfd] { background: #ef4444; }

.toggle-knob[b-ygmtwqwyfd] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: left 0.25s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-track.on .toggle-knob[b-ygmtwqwyfd] { left: 23px; }

.toggle-label[b-ygmtwqwyfd] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e2a38;
    flex: 1;
}

.status-pill[b-ygmtwqwyfd] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}

.pill-ok[b-ygmtwqwyfd]   { background: #dcfce7; color: #15803d; }
.pill-warn[b-ygmtwqwyfd] { background: #fee2e2; color: #dc2626; }

.maintenance-info[b-ygmtwqwyfd] {
    margin-top: 12px;
    font-size: 0.78rem;
    color: #64748b;
    background: #f8fafc;
    padding: 10px 14px;
    border-radius: 10px;
    border-left: 3px solid #e2e8f0;
    line-height: 1.5;
}

/* ============================================================
   CELDA: MENSAJERÍA
   ============================================================ */
.recipients-label[b-ygmtwqwyfd] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.chip-row[b-ygmtwqwyfd] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.chip[b-ygmtwqwyfd] {
    padding: 4px 12px;
    border-radius: 20px;
    background: #f1f5f9;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
}

.chip:hover[b-ygmtwqwyfd] { background: #e0e7ff; color: #3730a3; }

.chip.active[b-ygmtwqwyfd] {
    background: #e0e7ff;
    color: #3730a3;
    border-color: #a5b4fc;
    font-weight: 600;
}

.msg-area[b-ygmtwqwyfd] {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.msg-input[b-ygmtwqwyfd] {
    flex: 1;
    padding: 9px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.82rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    background: #f8fafc;
}

.msg-input:focus[b-ygmtwqwyfd] {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    background: #fff;
}

.btn-send[b-ygmtwqwyfd] {
    padding: 9px 18px;
    background: #3B82F6;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.13s;
    white-space: nowrap;
}

.btn-send:hover[b-ygmtwqwyfd]  { background: #2563eb; transform: translateY(-1px); }
.btn-send:active[b-ygmtwqwyfd] { transform: translateY(0); }

/* ============================================================
   FORMULARIO NUEVO AVISO (inline)
   ============================================================ */
.new-aviso-form[b-ygmtwqwyfd] {
    background: #f0f9ff;
    border: 1.5px solid #bae6fd;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-row[b-ygmtwqwyfd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-ygmtwqwyfd] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.form-input[b-ygmtwqwyfd] {
    padding: 8px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s;
    background: #fff;
    font-family: inherit;
}

.form-input:focus[b-ygmtwqwyfd] {
    border-color: #7dd3fc;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
}

.form-select[b-ygmtwqwyfd] {
    padding: 8px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.82rem;
    outline: none;
    background: #fff;
    cursor: pointer;
    appearance: none;
}

.form-textarea[b-ygmtwqwyfd] {
    resize: vertical;
    min-height: 64px;
}

.form-actions[b-ygmtwqwyfd] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-form-cancel[b-ygmtwqwyfd] {
    padding: 7px 14px;
    background: transparent;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-form-cancel:hover[b-ygmtwqwyfd] { background: #f8fafc; }

.btn-form-submit[b-ygmtwqwyfd] {
    padding: 7px 16px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-form-submit:hover[b-ygmtwqwyfd]    { background: #dc2626; }
.btn-form-submit:disabled[b-ygmtwqwyfd] { opacity: 0.6; cursor: default; }

/* ---- Estado de carga ---- */
.loading-overlay[b-ygmtwqwyfd] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: #94a3b8;
    font-size: 0.82rem;
    gap: 8px;
    flex: 1;
}

.spinner[b-ygmtwqwyfd] {
    width: 18px;
    height: 18px;
    border: 2px solid #e2e8f0;
    border-top-color: #3B82F6;
    border-radius: 50%;
    animation: spin-b-ygmtwqwyfd 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-ygmtwqwyfd { to { transform: rotate(360deg); } }

/* ---- Error banner ---- */
.error-banner[b-ygmtwqwyfd] {
    font-size: 0.78rem;
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================
   FILTROS DE USUARIOS
   ============================================================ */
.user-filters[b-ygmtwqwyfd] {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.filter-search[b-ygmtwqwyfd] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.filter-search:focus-within[b-ygmtwqwyfd] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
    background: #fff;
}

.filter-search i[b-ygmtwqwyfd] {
    color: #94a3b8;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.filter-search input[b-ygmtwqwyfd] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.78rem;
    color: #1e2a38;
    width: 100%;
    font-family: inherit;
}

.filter-search input[b-ygmtwqwyfd]::placeholder { color: #cbd5e1; }

.filter-time[b-ygmtwqwyfd] {
    padding: 7px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.75rem;
    font-family: inherit;
    background: #f8fafc;
    color: #475569;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    white-space: nowrap;
}

.filter-time:focus[b-ygmtwqwyfd] { border-color: #93c5fd; background: #fff; }

.user-filter-meta[b-ygmtwqwyfd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.filter-count[b-ygmtwqwyfd] {
    font-size: 0.68rem;
    color: #94a3b8;
}

.filter-count strong[b-ygmtwqwyfd] { color: #475569; }

.filter-clear[b-ygmtwqwyfd] {
    font-size: 0.68rem;
    color: #3B82F6;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    transition: color 0.15s;
}

.filter-clear:hover[b-ygmtwqwyfd] { color: #1d4ed8; text-decoration: underline; }

/* ============================================================
   RESPONSIVIDAD
   ============================================================ */
@media (max-width: 1100px) {
    .bento-main[b-ygmtwqwyfd] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(260px, auto) minmax(260px, auto) minmax(200px, auto);
    }

    .cell-avisos[b-ygmtwqwyfd]        { grid-column: 1;     grid-row: 1; }
    .cell-usuarios[b-ygmtwqwyfd]      { grid-column: 2;     grid-row: 1; }
    .cell-mantenimiento[b-ygmtwqwyfd] { grid-column: 1;     grid-row: 2; }
    .cell-mensajeria[b-ygmtwqwyfd]    { grid-column: 2;     grid-row: 2; }
}

@media (max-width: 768px) {
    .admin-dashboard[b-ygmtwqwyfd] { padding: 14px; gap: 12px; }
    .stats-row[b-ygmtwqwyfd]        { grid-template-columns: repeat(2, 1fr); }
    .bento-main[b-ygmtwqwyfd]       { grid-template-columns: 1fr; grid-template-rows: auto; }

    .cell-avisos[b-ygmtwqwyfd], .cell-usuarios[b-ygmtwqwyfd],
    .cell-mantenimiento[b-ygmtwqwyfd], .cell-mensajeria[b-ygmtwqwyfd] { grid-column: 1; grid-row: auto; }
}

@media (max-width: 480px) {
    .stats-row[b-ygmtwqwyfd]   { grid-template-columns: 1fr; }
    .qa-buttons[b-ygmtwqwyfd]  { flex-direction: column; }
    .qa-btn[b-ygmtwqwyfd]      { width: 100%; }
}
/* /Pages/Admin/Users.razor.rz.scp.css */
/* --- Layout Principal --- */
.dashboard-container[b-u935s68rol] {
    background-color: #ffffff;
    min-height: 100vh;
    padding: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* RESTAURADO: Uso de variable o color oscuro de la referencia */
    color: var(--text-primary, #111827);

    display: grid;
    grid-template-columns: 1.2fr 3fr;
    gap: 25px;
}

.right-column[b-u935s68rol] {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* --- Estilos Generales de Tarjetas --- */
.card[b-u935s68rol] {
    border-radius: 16px;
    border: none;
    /* Quitamos bordes por defecto de bootstrap */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.white-card[b-u935s68rol] {
    background-color: #ffffff;
    color: var(--text-primary, #111827);
}

.dark-card[b-u935s68rol] {
    /* CORREGIDO: Vuelve al gris/azul oscuro original (#1F2937) en lugar de #1e2a38 */
    background-color: #1F2937;
    color: #ffffff;
    border: none;
}

.tall-card[b-u935s68rol] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* --- Tipografía --- */
.card-title-dark[b-u935s68rol] {
    margin-top: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
}

.section-header[b-u935s68rol] {
    /* RESTAURADO: Color secundario y peso de fuente */
    color: var(--text-secondary, #6B7280);
    font-size: 1rem;
    font-weight: 600;
    /* Restaurado a 600 */
    margin-bottom: 15px;
}

.x-small[b-u935s68rol] {
    font-size: 0.75rem;
}

/* --- Alertas --- */
.alert-placeholder[b-u935s68rol] {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #6B7280);
    font-weight: 500;
}

/* --- Grid de Estadísticas --- */
.stats-grid[b-u935s68rol] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stat-card[b-u935s68rol] {
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-label[b-u935s68rol] {
    font-size: 0.85rem;
    /* RESTAURADO: Color específico de la referencia (#9CA3AF) */
    color: #9CA3AF;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value[b-u935s68rol] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
}

/* --- Atajos (Shortcuts) --- */
.shortcuts-grid[b-u935s68rol] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.shortcut-btn[b-u935s68rol] {
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.shortcut-btn:hover[b-u935s68rol] {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.shortcut-btn span[b-u935s68rol] {
    font-weight: 600;
    margin-top: 15px;
    font-size: 0.95rem;
    color: var(--text-secondary, #6B7280);
}

/* Colores Iconos - Restaurados a la Paleta de Referencia */
.icon-container[b-u935s68rol] {
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blue-icon[b-u935s68rol] {
    color: #4a90e2;
}

.green-icon[b-u935s68rol] {
    color: #50e3c2;
}

.purple-icon[b-u935s68rol] {
    color: #9013fe;
}

.orange-icon[b-u935s68rol] {
    color: #f5a623;
}

/* --- Tabla --- */
.table th[b-u935s68rol] {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #9CA3AF);
    /* Restaurado estilo sutil */
}

[b-u935s68rol] .table-hover tbody tr:hover {
    background-color: #f8f9fa;
}

/* --- Responsividad --- */
@media (max-width: 992px) {
    .dashboard-container[b-u935s68rol] {
        grid-template-columns: 1fr;
        padding: 15px;
        height: auto;
    }

    .left-column[b-u935s68rol] {
        height: auto;
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {

    .stats-grid[b-u935s68rol],
    .shortcuts-grid[b-u935s68rol] {
        /* RESTAURADO: El diseño original usaba 2 columnas en móvil, no 1 */
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Nuevos Estilos para Tabla de Usuarios --- */

.search-container[b-u935s68rol] {
    width: 320px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.search-container input:focus[b-u935s68rol] {
    box-shadow: none;
    border-color: #e5e7eb;
}

/* Modificación para layout fijo */
.custom-table[b-u935s68rol] {
    table-layout: fixed;
    width: 100%;
}

.custom-table th[b-u935s68rol] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: #f9fafb !important;
    white-space: nowrap;
}

/* Definición de anchos de columna */
.custom-table th:nth-child(1)[b-u935s68rol] {
    width: 30%;
}

/* Nombre */
.custom-table th:nth-child(2)[b-u935s68rol] {
    width: 30%;
}

/* Email */
.custom-table th:nth-child(3)[b-u935s68rol] {
    width: 15%;
}

/* Rol */
.custom-table th:nth-child(4)[b-u935s68rol] {
    width: 15%;
}

/* Estado */
.custom-table th:nth-child(5)[b-u935s68rol] {
    width: 10%;
}

/* Acciones */

.custom-table td[b-u935s68rol] {
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avatar-circle[b-u935s68rol] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background-color: #e0e7ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid #c7d2fe;
}

.role-select[b-u935s68rol] {
    border-color: #e5e7eb;
    background-color: #f9fafb;
    color: #374151;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.role-select:hover[b-u935s68rol] {
    border-color: #d1d5db;
    background-color: #fff;
}

.status-badge[b-u935s68rol] {
    font-size: 0.75rem;
    font-weight: 600;
}

/* Modal personalizado */
.modal-content[b-u935s68rol] {
    border-radius: 12px;
}

.modal-backdrop.show[b-u935s68rol] {
    opacity: 0.5;
}
/* /Pages/Catalogs/CatalogEditorView.razor.rz.scp.css */
    body[b-tkumumo7du] {
        background-color: var(--bs-tertiary-bg, #f4f6f8);
    }

    /* --- Header de la página --- */
    .page-header[b-tkumumo7du] {
        background-color: var(--bs-body-bg);
        padding: 15px 25px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
        margin-bottom: 20px;
        border: 1px solid var(--bs-border-color, #e9ecef);
    }

    /* --- Tarjetas (Paneles) --- */
    .editor-card[b-tkumumo7du] {
        background-color: var(--bs-body-bg);
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        padding: 20px;
        height: 100%;
        border: 1px solid var(--bs-border-color, #e9ecef);
        display: flex;
        flex-direction: column;
    }

    /* Simulación del borde azul del panel derecho */
    .editor-card.active-section[b-tkumumo7du] {
        border: 2px solid #4a90e2;
        position: relative;
    }

    /* --- Panel Izquierdo --- */
    .search-input-container[b-tkumumo7du] {
        position: relative;
        margin-bottom: 15px;
    }

    .search-input-container i[b-tkumumo7du] {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--bs-secondary-color, #adb5bd);
    }

    .search-input[b-tkumumo7du] {
        padding-left: 40px;
        background-color: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color, #ced4da);
        border-radius: 4px;
        color: var(--bs-body-color);
    }

    .list-view-area[b-tkumumo7du] {
        flex-grow: 1;
        /* Ocupa el espacio disponible */
        min-height: 400px;
        border: 1px solid var(--bs-border-color, #e9ecef);
        background-color: var(--bs-body-bg);
        border-radius: 4px;
        position: relative;
        margin-bottom: 15px;
        color: var(--bs-body-color);
    }

    /* Botones de acción inferiores (Izquierda) */
    .btn-action-group .btn[b-tkumumo7du] {
        font-weight: 500;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 10px;
        font-size: 0.9rem;
        color: white;
        border: none;
    }

    .btn-blue[b-tkumumo7du] {
        background-color: #007bff;
    }

    .btn-red[b-tkumumo7du] {
        background-color: #dc3545;
    }

    .btn-green[b-tkumumo7du] {
        background-color: #28a745;
    }

    /* --- Panel Derecho (Formulario) --- */
    .form-scroll-area[b-tkumumo7du] {
        height: 550px;
        /* Altura fija con scroll */
        overflow-y: auto;
        padding-right: 15px;
    }

    .form-label-custom[b-tkumumo7du] {
        font-weight: 700;
        font-size: 0.85rem;
        color: var(--bs-body-color, #212529);
        margin-bottom: 6px;
    }

    /* Botones "+ Agregar" del lado derecho */
    .btn-add-inline[b-tkumumo7du] {
        background-color: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color, #ced4da);
        color: var(--bs-body-color, #212529);
        font-weight: 600;
        font-size: 0.85rem;
        white-space: nowrap;
        padding: 6px 15px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .btn-add-inline:hover[b-tkumumo7du] {
        background-color: var(--bs-tertiary-bg, #f8f9fa);
        border-color: var(--bs-border-color, #adb5bd);
    }

    /* Inputs y Selects */
    .form-control[b-tkumumo7du],
    .form-select[b-tkumumo7du] {
        border-radius: 4px;
        border: 1px solid var(--bs-border-color, #ced4da);
        padding: 8px 12px;
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);
    }

    .form-control:focus[b-tkumumo7du],
    .form-select:focus[b-tkumumo7du] {
        background-color: var(--bs-tertiary-bg);
        color: var(--bs-body-color);
    }

    /* Scrollbar personalizado */
    .form-scroll-area[b-tkumumo7du]::-webkit-scrollbar {
        width: 8px;
    }

    .form-scroll-area[b-tkumumo7du]::-webkit-scrollbar-track {
        background: var(--bs-tertiary-bg, #f1f1f1);
        border-radius: 4px;
    }

    .form-scroll-area[b-tkumumo7du]::-webkit-scrollbar-thumb {
        background: var(--bs-secondary-bg, #ccc);
        border-radius: 4px;
    }

    .form-scroll-area[b-tkumumo7du]::-webkit-scrollbar-thumb:hover {
        background: var(--bs-secondary-color, #adb5bd);
    }

/* Paneles Bootstrap .card que no usan .editor-card */
.card[b-tkumumo7du] {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color);
}

.card-body[b-tkumumo7du] {
    background-color: transparent;
    color: var(--bs-body-color);
}

/* bg-light con opacidad Bootstrap (bg-opacity-*) */
.bg-light.bg-opacity-10[b-tkumumo7du] {
    background-color: var(--bs-tertiary-bg) !important;
}

/* Scrollbar global adaptativo */
.form-scroll-area[b-tkumumo7du]::-webkit-scrollbar-track,
.overflow-auto[b-tkumumo7du]::-webkit-scrollbar-track {
    background: var(--bs-tertiary-bg);
}

.form-scroll-area[b-tkumumo7du]::-webkit-scrollbar-thumb,
.overflow-auto[b-tkumumo7du]::-webkit-scrollbar-thumb {
    background: var(--bs-secondary-color);
}

.form-scroll-area[b-tkumumo7du]::-webkit-scrollbar-thumb:hover,
.overflow-auto[b-tkumumo7du]::-webkit-scrollbar-thumb:hover {
    background: var(--bs-primary);
}
/* /Pages/Catalogs/CatalogView.razor.rz.scp.css */
/* CatalogView.razor.css - ESTILO UNIFICADO */

/* --- 1. Variables Globales (Mapeo de Estilos) --- */
.catalog-container[b-qwkwrjdegk] {
    /* Paleta de Colores (Base) */
    --primary-soft: #eef2ff;
    --primary-strong: #4f46e5;
    --primary-hover: #4338ca;
    --text-dark: #1f2937;
    --text-gray: #6b7280;
    --border-subtle: #e5e7eb;
    --surface-white: #ffffff;
    --bg-body: #f9fafb;

    /* Mapeo para compatibilidad con código antiguo */
    --primary-color: var(--primary-strong);
    --primary-light: var(--primary-soft);
    --text-primary: var(--text-dark);
    --text-secondary: var(--text-gray);
    --bg-surface: var(--surface-white);
    --border-color: var(--border-subtle);

    /* Bordes y Sombras */
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 16px;
    --border-radius-pill: 9999px;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --transition-fast: all 0.2s ease;
}

/* --- 2. Layout General --- */
.catalog-container[b-qwkwrjdegk],
.page-container[b-qwkwrjdegk] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem !important;
    /* Forzado según tu petición */
    background-color: var(--bg-body);
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- 3. Header y Títulos --- */
.header-section[b-qwkwrjdegk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.header-title-group h2[b-qwkwrjdegk],
.section-title[b-qwkwrjdegk] {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.025em;
    margin: 0 0 0.5rem 0;
}

.header-subtitle[b-qwkwrjdegk] {
    color: var(--text-gray);
    font-size: 0.95rem;
    margin: 0;
}

/* --- 4. Barras de Acción y Herramientas --- */
.header-actions[b-qwkwrjdegk],
.actions-toolbar[b-qwkwrjdegk] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    background: var(--surface-white);
    padding: 0.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

.divider-vertical[b-qwkwrjdegk],
.profile-divider[b-qwkwrjdegk] {
    width: 1px;
    height: 24px;
    background-color: var(--border-subtle);
    margin: 0 0.25rem;
}

/* --- 5. Inputs y Buscadores (Fusión de Estilos) --- */
.control-bar[b-qwkwrjdegk] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--surface-white);
    gap: 1rem;
}

.search-wrapper[b-qwkwrjdegk],
.search-group[b-qwkwrjdegk] {
    position: relative;
    width: 450px;
    max-width: 100%;
    flex: 0 0 450px;
}

.search-icon[b-qwkwrjdegk],
.search-group i[b-qwkwrjdegk] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
    font-size: 1rem;
}

/* Estilo unificado para inputs */
.search-pill-input[b-qwkwrjdegk],
.input-modern[b-qwkwrjdegk] {
    width: 100%;
    height: 42px;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    /* Espacio para icono */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: 0.95rem;
    background-color: #f9fafb;
    transition: var(--transition-fast);
    color: var(--text-dark);
}

.search-pill-input:focus[b-qwkwrjdegk],
.input-modern:focus[b-qwkwrjdegk] {
    background-color: white;
    outline: none;
    border-color: var(--primary-strong);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* --- 6. Botones (Fusión de Estilos) --- */
/* Base común */
.btn-icon-text[b-qwkwrjdegk],
.btn-action-outline[b-qwkwrjdegk],
.btn-action-dark[b-qwkwrjdegk],
.btn-registar[b-qwkwrjdegk],
.btn-filter[b-qwkwrjdegk],
.btn-ver-detalles[b-qwkwrjdegk],
.btn-details[b-qwkwrjdegk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    transition: var(--transition-fast);
    cursor: pointer;
    line-height: 1;
}

/* Estilo Ghost / Outline */
.btn-secondary-ghost[b-qwkwrjdegk],
.btn-action-outline[b-qwkwrjdegk] {
    background-color: transparent;
    border: 1px solid var(--border-color);
    /* Agregado borde sutil */
    color: var(--text-gray);
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
}

.btn-secondary-ghost:hover[b-qwkwrjdegk],
.btn-action-outline:hover[b-qwkwrjdegk] {
    background-color: var(--bg-body);
    color: var(--text-dark);
    border-color: var(--text-gray);
}

/* Estilo Primary / Registrar */
.btn-primary-solid[b-qwkwrjdegk],
.btn-registar[b-qwkwrjdegk] {
    background-color: var(--primary-strong);
    color: white;
    border: none;
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
}

.btn-primary-solid:hover[b-qwkwrjdegk],
.btn-registar:hover[b-qwkwrjdegk] {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(79, 70, 229, 0.3);
}

/* Estilo Oscuro / Carga Masiva */
.btn-action-dark[b-qwkwrjdegk] {
    background: var(--text-dark);
    color: white;
    border: none;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
}

/* Estilo Filtro */
.btn-filter[b-qwkwrjdegk],
.btn-filter-toggle[b-qwkwrjdegk] {
    background: var(--surface-white);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    border-radius: 10px;
}

.btn-filter:hover[b-qwkwrjdegk],
.btn-filter-toggle:hover[b-qwkwrjdegk] {
    border-color: var(--text-gray);
    background-color: #f9fafb;
}

/* Estilo Ver Detalles */
.btn-ver-detalles[b-qwkwrjdegk],
.btn-details[b-qwkwrjdegk] {
    color: var(--primary-strong);
    font-size: 0.85rem;
    background: transparent;
    border: 1px solid transparent;
    padding: 0.4rem 0.8rem;
}

.btn-ver-detalles:hover[b-qwkwrjdegk],
.btn-details:hover[b-qwkwrjdegk] {
    background-color: var(--primary-soft);
    border-color: var(--primary-soft);
    /* Ajustado para mejor visual */
    color: var(--primary-strong);
}

/* --- 7. Tarjetas y Tablas --- */
.main-card[b-qwkwrjdegk],
.catalog-card[b-qwkwrjdegk] {
    background: var(--surface-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.table-wrapper[b-qwkwrjdegk] {
    width: 100%;
    overflow-x: auto;
}

/* Overrides para MbTable / HTML Table standar */
[b-qwkwrjdegk] table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}

[b-qwkwrjdegk] thead th {
    background-color: #f9fafb;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

[b-qwkwrjdegk] tbody tr {
    transition: background-color 0.15s;
}

[b-qwkwrjdegk] tbody tr:hover {
    background-color: #f8fafc;
}

[b-qwkwrjdegk] tbody td {
    padding: 1rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-dark);
    font-size: 0.9rem;
    vertical-align: middle;
}

/* Columnas Específicas */
.col-product-name[b-qwkwrjdegk] {
    font-weight: 600;
    color: var(--text-dark);
}

.col-asin[b-qwkwrjdegk] {
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.85rem;
    color: var(--primary-strong);
    background: var(--primary-soft);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.col-price[b-qwkwrjdegk] {
    font-feature-settings: "tnum";
    font-weight: 600;
}

/* --- 8. Badges y Pills --- */
.badge-status[b-qwkwrjdegk],
.status-pill[b-qwkwrjdegk] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: capitalize;
    min-width: 90px;
    justify-content: center;
}

.status-borrador[b-qwkwrjdegk] {
    background-color: #fef3c7;
    color: #d97706;
}

.status-completado[b-qwkwrjdegk],
.status-completed[b-qwkwrjdegk] {
    background-color: #d1fae5;
    color: #059669;
}

.status-pendiente[b-qwkwrjdegk],
.status-pending[b-qwkwrjdegk] {
    background-color: #f3f4f6;
    color: #4b5563;
}

/* --- 9. Footer y Paginación --- */
.table-footer[b-qwkwrjdegk] {
    padding: 1.25rem 1.5rem;
    background-color: #f9fafb;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.results-count[b-qwkwrjdegk] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.pagination-controls[b-qwkwrjdegk],
.pagination-simple[b-qwkwrjdegk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-page[b-qwkwrjdegk],
.pagination-simple button[b-qwkwrjdegk] {
    background: var(--surface-white);
    border: 1px solid var(--border-color);
    padding: 0.4rem 0.8rem;
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    transition: 0.2s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-page:not(.disabled):hover[b-qwkwrjdegk],
.pagination-simple button:not(:disabled):hover[b-qwkwrjdegk] {
    border-color: var(--primary-strong);
    color: var(--primary-strong);
    background-color: white;
}

.btn-page.disabled[b-qwkwrjdegk],
.pagination-simple button:disabled[b-qwkwrjdegk] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f3f4f6;
}

.page-indicator[b-qwkwrjdegk] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin: 0 0.5rem;
}

/* ========================================= */
/* --- EXTENSIÓN: DARK MODE OVERRIDES ---    */
/* ========================================= */

[data-bs-theme="dark"] .catalog-container[b-qwkwrjdegk] {
    --primary-soft: #1e1b4b;
    --primary-strong: #818cf8;
    --primary-hover: #a5b4fc;
    --text-dark: #f3f4f6;
    --text-gray: #9ca3af;
    --border-subtle: #3f3f46;
    --surface-white: #18181b;
    --bg-body: #09090b;
}

[data-bs-theme="dark"][b-qwkwrjdegk]  thead th {
    background-color: #09090b !important;
    color: #f3f4f6 !important; /* Made headers clearer/whiter */
    border-bottom-color: #3f3f46 !important;
}

[data-bs-theme="dark"][b-qwkwrjdegk]  tbody tr {
    background-color: transparent !important;
}
[data-bs-theme="dark"][b-qwkwrjdegk]  tbody tr:hover {
    background-color: #27272a !important;
}

[data-bs-theme="dark"][b-qwkwrjdegk]  tbody td {
    color: #f3f4f6 !important;
    border-bottom-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .search-pill-input[b-qwkwrjdegk],
[data-bs-theme="dark"] .input-modern[b-qwkwrjdegk] {
    background-color: #09090b !important;
    color: #f3f4f6 !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .search-pill-input:focus[b-qwkwrjdegk],
[data-bs-theme="dark"] .input-modern:focus[b-qwkwrjdegk] {
    background-color: #18181b !important;
    border-color: #6366f1 !important;
}

[data-bs-theme="dark"] .btn-page[b-qwkwrjdegk],
[data-bs-theme="dark"] .pagination-simple button[b-qwkwrjdegk] {
    background-color: #18181b !important;
    border-color: #3f3f46 !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .btn-page:not(.disabled):hover[b-qwkwrjdegk],
[data-bs-theme="dark"] .pagination-simple button:not(:disabled):hover[b-qwkwrjdegk] {
    background-color: #27272a !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .btn-page.disabled[b-qwkwrjdegk],
[data-bs-theme="dark"] .pagination-simple button:disabled[b-qwkwrjdegk] {
    background-color: #18181b !important;
    opacity: 0.4;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .table-footer[b-qwkwrjdegk] {
    background-color: #09090b !important;
    border-top-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .control-bar[b-qwkwrjdegk],
[data-bs-theme="dark"] .main-card[b-qwkwrjdegk],
[data-bs-theme="dark"] .header-actions[b-qwkwrjdegk],
[data-bs-theme="dark"] .actions-toolbar[b-qwkwrjdegk] {
    background-color: #18181b !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .search-wrapper[b-qwkwrjdegk],
[data-bs-theme="dark"] .search-group[b-qwkwrjdegk] {
    background-color: #18181b !important;
    border-color: #3f3f46 !important;
}

/* --- 10. Responsividad (Media Queries) --- */
@media (max-width: 991.98px) {

    .page-container[b-qwkwrjdegk],
    .catalog-container[b-qwkwrjdegk] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .header-section[b-qwkwrjdegk] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions[b-qwkwrjdegk],
    .actions-toolbar[b-qwkwrjdegk] {
        width: 100%;
        justify-content: flex-start;
        margin-top: 1rem;
    }

    .search-wrapper[b-qwkwrjdegk],
    .search-group[b-qwkwrjdegk] {
        flex: 1;
        margin-right: 1rem;
        width: auto;
    }
}

@media (max-width: 767.98px) {
    .catalog-container[b-qwkwrjdegk] {
        padding: 1rem;
    }

    .control-bar[b-qwkwrjdegk],
    .d-flex.justify-content-between.align-items-center.mb-4[b-qwkwrjdegk] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch !important;
    }

    .search-wrapper[b-qwkwrjdegk],
    .search-group[b-qwkwrjdegk] {
        width: 100%;
        margin-right: 0;
        flex: auto;
    }

    .filter-wrapper[b-qwkwrjdegk] {
        width: 100%;
    }

    .btn-filter[b-qwkwrjdegk],
    .btn-filter-toggle[b-qwkwrjdegk] {
        width: 100%;
        justify-content: center;
        display: flex;
    }

    .table-footer[b-qwkwrjdegk] {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
}

/* ========================================= */
/* --- LOCAL SEARCH BAR OVERRIDES ---        */
/* ========================================= */

.search-group-local[b-qwkwrjdegk] {
    position: relative;
    width: 450px;
    max-width: 100%;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background-color: #f9fafb;
    overflow: hidden;
    height: 42px;
    transition: var(--transition-fast);
}

.search-group-local:focus-within[b-qwkwrjdegk] {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    border-color: var(--primary-strong);
    background-color: white;
}

.search-scope-select-local[b-qwkwrjdegk] {
    border: none;
    background-color: transparent;
    padding: 0 1rem 0 1rem;
    height: 100%;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    border-right: 1px solid var(--border-color);
    outline: none;
    cursor: pointer;
    min-width: 110px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 10px 10px;
}

.search-scope-select-local:hover[b-qwkwrjdegk] {
    background-color: rgba(0,0,0,0.05);
}

.search-input-wrapper-local[b-qwkwrjdegk] {
    position: relative;
    flex-grow: 1;
    height: 100%;
    display: flex;
    align-items: center;
}

.search-input-wrapper-local i[b-qwkwrjdegk] {
    position: absolute;
    left: 1rem;
    color: var(--text-secondary);
    font-size: 1rem;
    pointer-events: none;
}

.search-group-local .input-modern[b-qwkwrjdegk] {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0 1rem 0 2.5rem;
    box-shadow: none;
    color: var(--text-dark);
}

.search-group-local .input-modern:focus[b-qwkwrjdegk] {
    box-shadow: none;
    background: transparent;
}

[data-bs-theme="dark"] .search-group-local[b-qwkwrjdegk] {
    background-color: #18181b !important;
    border-color: #3f3f46 !important;
}
[data-bs-theme="dark"] .search-group-local:focus-within[b-qwkwrjdegk] {
    background-color: #09090b !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}
[data-bs-theme="dark"] .search-scope-select-local[b-qwkwrjdegk] {
    color: #f3f4f6 !important;
    border-right-color: #3f3f46 !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f3f4f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
}
[data-bs-theme="dark"] .search-scope-select-local:hover[b-qwkwrjdegk] {
    background-color: #27272a !important;
}
[data-bs-theme="dark"] .search-scope-select-local option[b-qwkwrjdegk] {
    background-color: #18181b !important;
    color: #f3f4f6 !important;
}
[data-bs-theme="dark"] .search-group-local .input-modern[b-qwkwrjdegk] {
    color: #f3f4f6 !important;
}
/* /Pages/Home/Home.razor.rz.scp.css */
/* --- Contenedores Generales --- */
.dashboard-container[b-rpas4q1ehi] {
    background-color: #ffffff;
    min-height: 100vh;
    padding: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-primary);
}

.white-card[b-rpas4q1ehi] {
    background-color: #ffffff;
    color: var(--text-primary);
    border-radius: var(--border-radius-lg);
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow var(--transition-fast);
}

.x-small[b-rpas4q1ehi] {
    font-size: 0.75rem;
}

/* --- Botones de Pestañas (Tabs) --- */
.btn-tab[b-rpas4q1ehi] {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 6px;
    border: none;
}

.tab-red[b-rpas4q1ehi] {
    background-color: #ffcccc;
    color: #cc0000;
}

.tab-red.active[b-rpas4q1ehi] {
    background-color: #ff9999;
    border: 1px solid #cc0000;
}

.tab-yellow[b-rpas4q1ehi] {
    background-color: #fff3cd;
    color: #856404;
}

.tab-green[b-rpas4q1ehi] {
    background-color: #d4edda;
    color: #155724;
}

/* --- Lista de Tareas --- */
.task-item[b-rpas4q1ehi] {
    cursor: pointer;
    transition: background-color 0.2s;
    border-left: 3px solid transparent;
}

.task-item:hover[b-rpas4q1ehi] {
    background-color: #f8f9fa;
}

.task-item.active-task[b-rpas4q1ehi] {
    background-color: #f0f7ff;
    border-left: 3px solid #0d6efd;
}

/* --- Chat y Avatares --- */
.chat-area[b-rpas4q1ehi] {
    background-color: #ffffff !important;
    /* Forzar blanco en el área de chat */
}

.avatar[b-rpas4q1ehi] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.avatar-small[b-rpas4q1ehi] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
}

/* --- Placeholders de Imágenes (Gradientes) --- */
.img-placeholder[b-rpas4q1ehi] {
    width: 100%;
    height: 100px;
    border-radius: 12px;
    position: relative;
}

/* Icono de descarga simulado */
.img-placeholder[b-rpas4q1ehi]::after {
    content: '\F325';
    /* Bootstrap Icon Download */
    font-family: 'bootstrap-icons';
    position: absolute;
    bottom: 8px;
    right: 8px;
    color: white;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 2px;
    font-size: 0.8rem;
}

.gradient-1[b-rpas4q1ehi] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-2[b-rpas4q1ehi] {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}

.gradient-3[b-rpas4q1ehi] {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}

.gradient-4[b-rpas4q1ehi] {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}
/* /Pages/Home/TaskCenter.razor.rz.scp.css */
/* ══════════════════════════════════════════════
   TASK CENTER – Estilos
   Layout: Panel izquierdo (lista) + Panel derecho (discusión)
   ══════════════════════════════════════════════ */

/* ─── Layout principal ─── */
.tc-layout[b-gl04z8iegk] {
    display: flex;
    gap: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    overflow: hidden;
    background: white;
    min-height: calc(100vh - 180px);
}

/* ─── Panel Izquierdo: Lista ─── */
.tc-panel-list[b-gl04z8iegk] {
    flex: 0 0 380px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    background: #fafbfc;
}

/* ─── Tabs ─── */
.tc-tabs[b-gl04z8iegk] {
    display: flex;
    gap: 8px;
    padding: 16px 16px 0;
}

.tc-tab[b-gl04z8iegk] {
    flex: 1;
    padding: 8px 6px;
    border-radius: 20px;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    background: white;
    font-size: 0.78rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.tc-tab:hover[b-gl04z8iegk] {
    border-color: rgba(0, 0, 0, 0.15);
    background: #f5f5f5;
}

.tc-tab-active[b-gl04z8iegk] {
    color: white !important;
    border-color: transparent !important;
}

.tc-tab-pending.tc-tab-active[b-gl04z8iegk] {
    background: #e74c3c;
}

.tc-tab-mine.tc-tab-active[b-gl04z8iegk] {
    background: #2c3e50;
}

.tc-tab-resolved.tc-tab-active[b-gl04z8iegk] {
    background: #27ae60;
}

.tc-tab-count[b-gl04z8iegk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.3);
    font-size: 0.7rem;
    font-weight: 700;
}

/* ─── Encabezado de lista ─── */
.tc-list-header[b-gl04z8iegk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 8px;
    font-size: 0.8rem;
    color: #999;
    font-weight: 500;
}

.tc-filter-btn[b-gl04z8iegk] {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
    transition: color 0.2s;
}

.tc-filter-btn:hover[b-gl04z8iegk] {
    color: #333;
}

/* ─── Items de tarea ─── */
.tc-task-list[b-gl04z8iegk] {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 8px;
}

.tc-task-item[b-gl04z8iegk] {
    position: relative;
    padding: 14px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 2px;
    border: 1.5px solid transparent;
}

.tc-task-item:hover[b-gl04z8iegk] {
    background: rgba(0, 0, 0, 0.03);
}

.tc-task-selected[b-gl04z8iegk] {
    background: rgba(52, 152, 219, 0.06) !important;
    border-color: rgba(52, 152, 219, 0.2) !important;
}

.tc-task-item-top[b-gl04z8iegk] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.tc-task-item-who[b-gl04z8iegk] {
    font-size: 0.85rem;
    color: #333;
}

.tc-task-item-date[b-gl04z8iegk] {
    font-size: 0.72rem;
    color: #bbb;
    white-space: nowrap;
}

.tc-task-item-bottom[b-gl04z8iegk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.tc-task-inv[b-gl04z8iegk] {
    font-family: 'SFMono-Regular', 'Consolas', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #3498db;
    flex-shrink: 0;
}

.tc-task-ago[b-gl04z8iegk] {
    font-size: 0.7rem;
    color: #bbb;
    white-space: nowrap;
    flex-shrink: 0;
}

.tc-task-urgent-dot[b-gl04z8iegk] {
    position: absolute;
    top: 16px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}

/* ─── Panel Derecho: Discusión ─── */
.tc-panel-discussion[b-gl04z8iegk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: white;
}

/* ─── Header de discusión ─── */
.tc-disc-header[b-gl04z8iegk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    gap: 20px;
    flex-shrink: 0;
}

.tc-disc-header-left[b-gl04z8iegk] {
    flex: 1;
    min-width: 0;
}

.tc-disc-header-left h5[b-gl04z8iegk] {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.4;
}

.tc-disc-inv[b-gl04z8iegk] {
    font-family: 'SFMono-Regular', 'Consolas', monospace;
    color: #3498db;
    font-weight: 700;
}

.tc-disc-meta[b-gl04z8iegk] {
    font-size: 0.8rem;
    color: #888;
    line-height: 1.4;
}

.tc-disc-header-right[b-gl04z8iegk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.tc-disc-badge-row[b-gl04z8iegk] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.tc-disc-label[b-gl04z8iegk] {
    font-size: 0.75rem;
    color: #999;
}

.tc-disc-badge[b-gl04z8iegk] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
}

.tc-badge-open[b-gl04z8iegk] {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.08);
}

.tc-badge-progress[b-gl04z8iegk] {
    color: #f39c12;
    background: rgba(243, 156, 18, 0.08);
}

.tc-badge-resolved[b-gl04z8iegk] {
    color: #27ae60;
    background: rgba(39, 174, 96, 0.08);
}

.tc-badge-normal[b-gl04z8iegk] {
    color: #27ae60;
    background: rgba(39, 174, 96, 0.08);
}

.tc-badge-urgent[b-gl04z8iegk] {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.08);
}

/* ─── Mensajes ─── */
.tc-disc-messages[b-gl04z8iegk] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tc-msg[b-gl04z8iegk] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.tc-msg-avatar[b-gl04z8iegk] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: white;
    flex-shrink: 0;
}

.avatar-almacen[b-gl04z8iegk] {
    background: linear-gradient(135deg, #56ab91, #2d8f6f);
}

.avatar-compras[b-gl04z8iegk] {
    background: linear-gradient(135deg, #a18cd1, #7c5cbf);
}

.avatar-logistica[b-gl04z8iegk] {
    background: linear-gradient(135deg, #667eea, #4a5cc5);
}

.avatar-calidad[b-gl04z8iegk] {
    background: linear-gradient(135deg, #f093fb, #d35db2);
}

.avatar-sistema[b-gl04z8iegk] {
    background: linear-gradient(135deg, #ccc, #999);
}

.avatar-default[b-gl04z8iegk] {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.tc-msg-body[b-gl04z8iegk] {
    flex: 1;
    min-width: 0;
}

.tc-msg-header[b-gl04z8iegk] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
    gap: 10px;
}

.tc-msg-who[b-gl04z8iegk] {
    font-size: 0.85rem;
    color: #333;
}

.tc-msg-time[b-gl04z8iegk] {
    font-size: 0.7rem;
    color: #bbb;
    white-space: nowrap;
    flex-shrink: 0;
}

.tc-msg-text[b-gl04z8iegk] {
    font-size: 0.88rem;
    color: #555;
    line-height: 1.5;
}

/* ─── Adjuntos (imágenes placeholder) ─── */
.tc-msg-attachments[b-gl04z8iegk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 10px;
    max-width: 500px;
}

.tc-attachment[b-gl04z8iegk] {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.tc-attachment-preview[b-gl04z8iegk] {
    width: 100%;
    height: 100%;
    transition: filter 0.2s;
}

.tc-attachment:hover .tc-attachment-preview[b-gl04z8iegk] {
    filter: brightness(0.85);
}

.tc-attachment-download[b-gl04z8iegk] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.7;
    transition: all 0.2s;
}

.tc-attachment-download:hover[b-gl04z8iegk] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

/* ─── Hint de resolver ─── */
.tc-resolve-hint[b-gl04z8iegk] {
    padding: 0 24px;
    flex-shrink: 0;
}

.tc-resolve-hint-content[b-gl04z8iegk] {
    display: flex;
    flex-direction: column;
    padding: 10px 16px;
    border-radius: 10px;
    background: rgba(39, 174, 96, 0.05);
    border: 1px solid rgba(39, 174, 96, 0.15);
    font-size: 0.8rem;
    color: #555;
    text-align: right;
}

.tc-resolve-hint-content strong[b-gl04z8iegk] {
    color: #27ae60;
    font-size: 0.85rem;
}

.tc-resolve-hint-content span[b-gl04z8iegk] {
    color: #999;
    font-size: 0.75rem;
}

/* ─── Barra de input ─── */
.tc-disc-input-bar[b-gl04z8iegk] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
    flex-shrink: 0;
}

.tc-disc-input-avatar[b-gl04z8iegk] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: white;
    flex-shrink: 0;
}

.tc-attach-btn[b-gl04z8iegk] {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 4px;
    transition: color 0.2s;
    flex-shrink: 0;
}

.tc-attach-btn:hover[b-gl04z8iegk] {
    color: #333;
}

.tc-disc-input[b-gl04z8iegk] {
    flex: 1;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    padding: 10px 18px;
    font-size: 0.85rem;
    background: white;
    outline: none;
    transition: border-color 0.2s;
}

.tc-disc-input:focus[b-gl04z8iegk] {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.08);
}

.tc-disc-input[b-gl04z8iegk]::placeholder {
    color: #ccc;
}

.tc-send-btn[b-gl04z8iegk] {
    padding: 8px 20px;
    border-radius: 24px;
    border: none;
    background: linear-gradient(135deg, #f6d365, #fda085);
    color: #333;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.tc-send-btn:hover:not(:disabled)[b-gl04z8iegk] {
    transform: scale(1.03);
    box-shadow: 0 3px 10px rgba(253, 160, 133, 0.3);
}

.tc-send-btn:disabled[b-gl04z8iegk] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tc-resolve-btn[b-gl04z8iegk] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #56ab91, #27ae60);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.tc-resolve-btn:hover[b-gl04z8iegk] {
    transform: scale(1.1);
    box-shadow: 0 3px 12px rgba(39, 174, 96, 0.3);
}

/* ─── Empty states ─── */
.tc-empty[b-gl04z8iegk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #999;
    font-size: 0.85rem;
    text-align: center;
}

.tc-disc-empty[b-gl04z8iegk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
}

/* ─── Responsive ─── */
@media (max-width: 992px) {
    .tc-layout[b-gl04z8iegk] {
        flex-direction: column;
        min-height: auto;
    }

    .tc-panel-list[b-gl04z8iegk] {
        flex: none;
        max-height: 350px;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .tc-panel-discussion[b-gl04z8iegk] {
        min-height: 500px;
    }
}

@media (max-width: 767px) {
    .tc-tabs[b-gl04z8iegk] {
        gap: 4px;
        padding: 12px 10px 0;
    }

    .tc-tab[b-gl04z8iegk] {
        font-size: 0.72rem;
        padding: 6px 4px;
    }

    .tc-disc-header[b-gl04z8iegk] {
        flex-direction: column;
        gap: 10px;
    }

    .tc-disc-header-right[b-gl04z8iegk] {
        flex-direction: row;
        gap: 12px;
    }

    .tc-msg-attachments[b-gl04z8iegk] {
        grid-template-columns: 1fr;
    }

    .tc-disc-input-bar[b-gl04z8iegk] {
        flex-wrap: wrap;
    }

    .tc-disc-input[b-gl04z8iegk] {
        order: 1;
        flex: 1 1 100%;
    }

    .tc-send-btn[b-gl04z8iegk] {
        order: 2;
    }

    .tc-resolve-btn[b-gl04z8iegk] {
        order: 3;
    }
}

/* ══════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════ */
[data-bs-theme="dark"] .tc-layout[b-gl04z8iegk] {
    background: #1e1e24;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .tc-panel-list[b-gl04z8iegk] {
    background: #16161a;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .tc-tab[b-gl04z8iegk] {
    background: #25252b;
    border-color: rgba(255, 255, 255, 0.1);
    color: #aaa;
}

[data-bs-theme="dark"] .tc-tab:hover[b-gl04z8iegk] {
    background: #2d2d34;
    border-color: rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] .tc-list-header[b-gl04z8iegk] {
    color: #888;
}

[data-bs-theme="dark"] .tc-filter-btn[b-gl04z8iegk] {
    color: #888;
}

[data-bs-theme="dark"] .tc-filter-btn:hover[b-gl04z8iegk] {
    color: #e0e0e0;
}

[data-bs-theme="dark"] .tc-task-item:hover[b-gl04z8iegk] {
    background: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .tc-task-item-who[b-gl04z8iegk] {
    color: #e0e0e0;
}

[data-bs-theme="dark"] .tc-task-item-date[b-gl04z8iegk],
[data-bs-theme="dark"] .tc-task-ago[b-gl04z8iegk] {
    color: #888;
}

[data-bs-theme="dark"] .tc-task-inv[b-gl04z8iegk] {
    color: #5dade2;
}

[data-bs-theme="dark"] .tc-panel-discussion[b-gl04z8iegk] {
    background: #1e1e24;
}

[data-bs-theme="dark"] .tc-disc-header[b-gl04z8iegk],
[data-bs-theme="dark"] .tc-disc-input-bar[b-gl04z8iegk] {
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .tc-disc-header-left h5[b-gl04z8iegk] {
    color: #e0e0e0;
}

[data-bs-theme="dark"] .tc-disc-inv[b-gl04z8iegk] {
    color: #5dade2;
}

[data-bs-theme="dark"] .tc-disc-meta[b-gl04z8iegk] {
    color: #aaa;
}

[data-bs-theme="dark"] .tc-disc-label[b-gl04z8iegk] {
    color: #777;
}

[data-bs-theme="dark"] .tc-badge-open[b-gl04z8iegk] {
    color: #ff6b6b;
    background: rgba(231, 76, 60, 0.15);
}

[data-bs-theme="dark"] .tc-badge-progress[b-gl04z8iegk] {
    color: #fbd38d;
    background: rgba(243, 156, 18, 0.15);
}

[data-bs-theme="dark"] .tc-badge-resolved[b-gl04z8iegk],
[data-bs-theme="dark"] .tc-badge-normal[b-gl04z8iegk] {
    color: #69db7c;
    background: rgba(39, 174, 96, 0.15);
}

[data-bs-theme="dark"] .tc-badge-urgent[b-gl04z8iegk] {
    color: #ff6b6b;
    background: rgba(231, 76, 60, 0.15);
}

[data-bs-theme="dark"] .tc-msg-who[b-gl04z8iegk] {
    color: #e0e0e0;
}

[data-bs-theme="dark"] .tc-msg-time[b-gl04z8iegk] {
    color: #888;
}

[data-bs-theme="dark"] .tc-msg-text[b-gl04z8iegk] {
    color: #bbb;
}

[data-bs-theme="dark"] .tc-resolve-hint-content[b-gl04z8iegk] {
    background: rgba(39, 174, 96, 0.1);
    border-color: rgba(39, 174, 96, 0.2);
    color: #bbb;
}

[data-bs-theme="dark"] .tc-resolve-hint-content strong[b-gl04z8iegk] {
    color: #69db7c;
}

[data-bs-theme="dark"] .tc-disc-input-bar[b-gl04z8iegk] {
    background: linear-gradient(180deg, #1e1e24 0%, #16161a 100%);
}

[data-bs-theme="dark"] .tc-attach-btn[b-gl04z8iegk] {
    color: #888;
}

[data-bs-theme="dark"] .tc-attach-btn:hover[b-gl04z8iegk] {
    color: #e0e0e0;
}

[data-bs-theme="dark"] .tc-disc-input[b-gl04z8iegk] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

[data-bs-theme="dark"] .tc-disc-input:focus[b-gl04z8iegk] {
    background: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .tc-empty[b-gl04z8iegk],
[data-bs-theme="dark"] .tc-disc-empty[b-gl04z8iegk] {
    color: #777;
}

[data-bs-theme="dark"] .tc-disc-empty .text-dark[b-gl04z8iegk] {
    color: #e0e0e0 !important;
}

/* Ensure mobile layout dividers follow dark mode */
@media (max-width: 992px) {
    [data-bs-theme="dark"] .tc-panel-list[b-gl04z8iegk] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* --- Sección Izquierda (Branding) --- */
.branding-section[b-lrheja9vx5] {
    background-color: #1a1a27;
    /* Tu color corporativo oscuro */
    position: relative;
    overflow: hidden;
}

.logo-circle[b-lrheja9vx5] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

/* Decoración de fondo (Efecto moderno) */
.circle-decor[b-lrheja9vx5] {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.15;
}

.circle-1[b-lrheja9vx5] {
    width: 300px;
    height: 300px;
    background-color: #4a90e2;
    /* Azul */
    top: -50px;
    left: -50px;
}

.circle-2[b-lrheja9vx5] {
    width: 400px;
    height: 400px;
    background-color: #50e3c2;
    /* Verde */
    bottom: -100px;
    right: -100px;
}

/* --- Sección Derecha (Formulario) --- */
.login-form-container[b-lrheja9vx5] {
    width: 100%;
    max-width: 450px;
}

/* Estilos de Inputs Modernos */
.form-control[b-lrheja9vx5],
.input-group-text[b-lrheja9vx5] {
    border-color: #eef1f5;
    /* Borde muy sutil */
}

.form-control:focus[b-lrheja9vx5] {
    box-shadow: none;
    border-color: #1a1a27;
    /* Color oscuro al enfocar */
    background-color: #fff !important;
}

.input-group-text[b-lrheja9vx5] {
    background-color: #f8f9fa;
}

.form-control[b-lrheja9vx5]::placeholder {
    color: #adb5bd;
    font-size: 0.9rem;
}

/* Animación de entrada */
.animate-fade-in[b-lrheja9vx5] {
    animation: fadeIn-b-lrheja9vx5 0.8s ease-out;
}

@keyframes fadeIn-b-lrheja9vx5 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 576px) {
    .login-form-container[b-lrheja9vx5] {
        padding: 30px !important;
        /* En pantallas muy pequeñas, reducimos aún más el padding si es necesario, 
           aunque p-4 de bootstrap suele ser suficiente (1.5rem = ~24px). 
           Aquí forzamos un poco más de espacio si se requiere, o lo dejamos en default.
        */
    }
}
/* /Pages/Problems/Problemas.razor.rz.scp.css */
/* Layout Principal */
.dashboard-container[b-zvqlws2q05] {
    background-color: #ffffff;
    min-height: 100vh;
    padding: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-primary);
}

.white-card[b-zvqlws2q05] {
    background-color: #ffffff;
    color: var(--text-primary);
    border-radius: var(--border-radius-lg);
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow var(--transition-fast);
}

.hover-link:hover[b-zvqlws2q05] {
    color: #0d6efd !important;
    /* Azul Bootstrap al pasar el mouse */
    text-decoration: underline !important;
    transition: color 0.2s ease;
}

.tracking-wide[b-zvqlws2q05] {
    letter-spacing: 1.5px;
}
/* /Pages/Products/Components/ProductNotesPanel.razor.rz.scp.css */
.offcanvas-notes[b-qclo29j4x9] {
    width: 400px;
    border-left: 1px solid #e0e0e0;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.05);
}

.notes-header[b-qclo29j4x9] {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 1rem;
}

.notes-body[b-qclo29j4x9] {
    background-color: #fdfdfd;
    padding: 1rem;
    overflow-y: auto;
    flex-grow: 1;
}

.note-bubble[b-qclo29j4x9] {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.note-info[b-qclo29j4x9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    color: #6c757d;
}

.note-tag[b-qclo29j4x9] {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    background-color: #e9ecef;
    color: #495057;
}

.note-tag.general[b-qclo29j4x9] {
    background-color: #cce5ff;
    color: #004085;
}

.note-content[b-qclo29j4x9] {
    font-size: 0.9rem;
    color: #333;
    white-space: pre-wrap;
}

.notes-footer[b-qclo29j4x9] {
    background-color: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    padding: 1rem;
}

.form-check-input:checked[b-qclo29j4x9] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.filters-btn-group .btn[b-qclo29j4x9] {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

/* /Pages/Products/Components/ProductPreviewModal.razor.rz.scp.css */
/* Estilos existentes */
.modal-backdrop[b-xv2108bnoi] {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.bg-light-gray[b-xv2108bnoi] {
    background-color: #F3F4F6;
    min-height: 38px;
    display: flex;
    align-items: center;
}

.financials-container[b-xv2108bnoi] {
    border-color: #E5E7EB !important;
    background-color: white;
}

.btn-dark-blue[b-xv2108bnoi] {
    background-color: #1F2937;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s;
}

.btn-dark-blue:hover[b-xv2108bnoi] {
    background-color: #111827;
    color: white;
    transform: translateY(-1px);
}

/* --- NUEVO ESTILO: Botón Editar --- */
/* Mantiene la armonía con tu botón azul oscuro pero en versión outline */
.btn-outline-custom[b-xv2108bnoi] {
    background-color: transparent;
    border: 2px solid #E5E7EB;
    /* Gris suave para no ensuciar */
    color: #1F2937;
    /* Mismo color de texto que el fondo del btn principal */
    transition: all 0.2s ease;
}

.btn-outline-custom:hover[b-xv2108bnoi] {
    border-color: #1F2937;
    background-color: #F9FAFB;
    color: #000;
    transform: translateY(-1px);
}

.badge[b-xv2108bnoi] {
    letter-spacing: 0.5px;
}
/* /Pages/Products/FormTabs/FormTab1.razor.rz.scp.css */
/* FormTab1.razor.css */

/* --- LAYOUT GLOBAL & RESPONSIVO --- */
.content-body[b-3yh67kiit8] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.form-card[b-3yh67kiit8] {
    border-radius: 12px;
    min-height: 600px;
}

/* Estilos copiados de FormTab2 */
[b-3yh67kiit8] .bg-gray-input {
    background-color: var(--bg-elevated, #f0f2f5);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-color, transparent);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.875rem;
}

.bg-gray-input:focus[b-3yh67kiit8] {
    background-color: var(--bg-surface, #ffffff);
    border-color: var(--primary-color, #dee2e6);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 0, 0, 0), 0.25);
}

/* Navigation styles removed - using FormSideNav component */

@media (max-width: 576px) {
    .responsive-padding[b-3yh67kiit8] {
        padding: 1rem !important;
    }
}



/* ========= Responsive FormTab Card ========= */
.formtab-card[b-3yh67kiit8] {
    height: calc(100vh - 200px);
    min-height: 500px;
    border-radius: 12px;
}

@media (max-width: 991.98px) {
    .formtab-card[b-3yh67kiit8] {
        height: auto;
        min-height: 0;
        border-radius: 12px;
    }
}
/* /Pages/Products/FormTabs/FormTab10.razor.rz.scp.css */
.form-section-title[b-nm1jimmzf3] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #2c3e50);
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border-color, #e9ecef);
    padding-bottom: 0.5rem;
}

.form-label-custom[b-nm1jimmzf3] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-secondary, #495057);
    margin-bottom: 0.25rem;
}

[b-nm1jimmzf3] .bg-gray-input {
    background-color: var(--bg-elevated, #f8f9fa);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
}

.bg-gray-input:focus[b-nm1jimmzf3] {
    background-color: var(--bg-surface, #ffffff);
    border-color: var(--primary-color, #0d6efd);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 13, 110, 253), 0.15);
    outline: none;
}

.box-item-container[b-nm1jimmzf3] {
    background-color: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    color: var(--text-primary, #212529);
}

.box-item-header[b-nm1jimmzf3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.box-item-title[b-nm1jimmzf3] {
    font-weight: 600;
    color: var(--text-primary, #495057);
    margin: 0;
}

.btn-add-box[b-nm1jimmzf3] {
    background-color: #0071ce;
    color: white;
    font-weight: 600;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.btn-add-box:hover[b-nm1jimmzf3] {
    background-color: #005a9e;
    color: white;
}

.btn-remove-box[b-nm1jimmzf3] {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.btn-remove-box:hover[b-nm1jimmzf3] {
    background-color: #bb2d3b;
    color: white;
}



/* ========= Responsive FormTab Card ========= */
.formtab-card[b-nm1jimmzf3] {
    height: calc(100vh - 200px);
    min-height: 500px;
    border-radius: 12px;
}

@media (max-width: 991.98px) {
    .formtab-card[b-nm1jimmzf3] {
        height: auto;
        min-height: 0;
        border-radius: 12px;
    }
}
/* /Pages/Products/FormTabs/FormTab11.razor.rz.scp.css */
.custom-layout-container[b-rkcztfw9gh] {
    min-height: 400px;
}

/* --- LISTA DE CAJAS (panel izquierdo) --- */
.box-list-item[b-rkcztfw9gh] {
    padding: 0.85rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s;
    margin-bottom: 0.4rem;
    border: 1px solid transparent;
    color: var(--text-primary, #343a40);
}

.box-list-item:hover[b-rkcztfw9gh] {
    background-color: var(--bg-elevated, #f8f9fa);
}

.box-list-item.active[b-rkcztfw9gh] {
    background-color: rgba(13, 110, 253, 0.12);
    border-color: #0d6efd;
    box-shadow: inset 4px 0 0 0 #0d6efd;
}

.box-list-item.active .box-title[b-rkcztfw9gh] {
    color: #0d6efd;
    font-weight: 700;
}

.box-title[b-rkcztfw9gh] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary, #343a40);
    margin-bottom: 0.15rem;
}

.box-dimensions[b-rkcztfw9gh] {
    font-size: 0.75rem;
    color: var(--text-secondary, #6c757d);
}

.box-photo-count[b-rkcztfw9gh] {
    font-size: 0.7rem;
    background: var(--bg-elevated, #e9ecef);
    color: var(--text-secondary, #495057);
    border-radius: 20px;
    padding: 0.1rem 0.5rem;
    font-weight: 600;
    white-space: nowrap;
}

.box-list-item.active .box-photo-count[b-rkcztfw9gh] {
    background: rgba(13, 110, 253, 0.18);
    color: #0d6efd;
}

/* --- TARJETAS DE CATEGORÍA --- */
.category-card[b-rkcztfw9gh] {
    border: 2px solid var(--border-color, #dee2e6);
    border-radius: 12px;
    padding: 1rem 0.75rem;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
    background: var(--bg-surface, #ffffff);
    color: var(--text-primary, #212529);
    -webkit-user-select: none;
    user-select: none;
}

.category-card:hover[b-rkcztfw9gh] {
    border-color: var(--primary-color, #adb5bd);
    background: var(--bg-elevated, #f8f9fa);
    transform: translateY(-1px);
}

.category-card.active-promo[b-rkcztfw9gh] {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, 0.1);
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15);
}

.category-card.active-uso[b-rkcztfw9gh] {
    border-color: #6f42c1;
    background: rgba(111, 66, 193, 0.1);
    box-shadow: 0 2px 8px rgba(111, 66, 193, 0.15);
}

.cat-icon[b-rkcztfw9gh] {
    font-size: 1.75rem;
    margin-bottom: 0.4rem;
    display: block;
}

.active-promo .cat-icon[b-rkcztfw9gh] { color: #0d6efd; }
.active-uso  .cat-icon[b-rkcztfw9gh] { color: #6f42c1; }

.cat-title[b-rkcztfw9gh] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary, #343a40);
    display: block;
    margin-bottom: 0.2rem;
}

/* --- ZONA DE SUBIDA --- */
.upload-area-logistica[b-rkcztfw9gh] {
    border: 2px dashed var(--border-color, #dee2e6);
    border-radius: 12px;
    background: var(--bg-elevated, #fafbfc);
    cursor: pointer;
    transition: all 0.18s;
    min-height: 130px;
    color: var(--text-primary, #212529);
}

.upload-area-logistica:hover[b-rkcztfw9gh] {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, 0.06);
}

.upload-area-logistica .text-dark[b-rkcztfw9gh],
.upload-area-logistica .fw-bold[b-rkcztfw9gh] {
    color: var(--text-primary, #212529) !important;
}

.upload-area-logistica .text-muted[b-rkcztfw9gh] {
    color: var(--text-secondary, #6c757d) !important;
}

/* --- GRID DE IMÁGENES --- */
.img-grid-item[b-rkcztfw9gh] {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color, #dee2e6);
    aspect-ratio: 1;
    background: var(--bg-elevated, #f8f9fa);
}

.img-grid-item img[b-rkcztfw9gh] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.img-grid-item .btn-remove-image[b-rkcztfw9gh] {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1;
}

.img-grid-item .btn-remove-image:hover[b-rkcztfw9gh] {
    background: rgba(187, 45, 59, 1);
}

/* --- INFO PANEL (descripción contextual) --- */
.context-info-box[b-rkcztfw9gh] {
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    font-size: 0.8rem;
    color: var(--text-primary, #7a5c00);
}

/* ========= Responsive FormTab Card ========= */
.formtab-card[b-rkcztfw9gh] {
    height: calc(100vh - 200px);
    min-height: 500px;
    border-radius: 12px;
}

@media (max-width: 991.98px) {
    .formtab-card[b-rkcztfw9gh] {
        height: auto;
        min-height: 0;
        border-radius: 12px;
    }
}
/* /Pages/Products/FormTabs/FormTab12.razor.rz.scp.css */
/* FormTab12.razor.css */

/* --- LAYOUT GLOBAL & RESPONSIVO --- */
.content-body[b-cdbpnui2nn] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.form-card[b-cdbpnui2nn] {
    border-radius: 12px;
    min-height: 600px;
}

/* Estilos de Inputs (Standard) */
[b-cdbpnui2nn] .bg-gray-input {
    background-color: var(--bg-elevated, #f0f2f5);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-color, transparent);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.875rem;
    width: 100%;
}

.bg-gray-input:focus[b-cdbpnui2nn] {
    background-color: var(--bg-surface, #ffffff);
    border-color: var(--primary-color, #dee2e6);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 0, 0, 0), 0.25);
    outline: none;
}

/* Sidebar Nav (Standard) */
/* Navigation styles removed - using FormSideNav component */

@media (max-width: 576px) {
    .responsive-padding[b-cdbpnui2nn] {
        padding: 1rem !important;
    }

    .import-card[b-cdbpnui2nn] {
        padding: 1.25rem !important;
    }

    .label-fixed[b-cdbpnui2nn],
    .label-fixed-lg[b-cdbpnui2nn] {
        min-width: auto;
        text-align: left;
        margin-bottom: 4px;
        display: block;
    }
}

/* --- ESTILOS ESPECÍFICOS FORMTAB12 --- */
.import-card[b-cdbpnui2nn] {
    background-color: var(--bg-surface, #fff);
    border: 1px solid var(--border-color, transparent);
    color: var(--text-primary, #212529);
    transition: all 0.2s;
}

.import-card:hover[b-cdbpnui2nn] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    border-color: var(--primary-color, transparent);
}

.label-fixed[b-cdbpnui2nn] {
    min-width: 80px;
    text-align: right;
}

.label-fixed-lg[b-cdbpnui2nn] {
    min-width: 90px;
    text-align: right;
}

.x-small[b-cdbpnui2nn] {
    font-size: 0.7rem;
}



/* ========= Responsive FormTab Card ========= */
.formtab-card[b-cdbpnui2nn] {
    height: calc(100vh - 200px);
    min-height: 500px;
    border-radius: 12px;
}

@media (max-width: 991.98px) {
    .formtab-card[b-cdbpnui2nn] {
        height: auto;
        min-height: 0;
        border-radius: 12px;
    }
}
/* /Pages/Products/FormTabs/FormTab2.razor.rz.scp.css */
/* FormTab2.razor.css */

/* --- LAYOUT GLOBAL & RESPONSIVO --- */
.content-body[b-cm2ridtz2m] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.form-card[b-cm2ridtz2m] {
    border-radius: 12px;
    min-height: 600px;
}

/* Estilos de Inputs (Standard) */
[b-cm2ridtz2m] .bg-gray-input {
    background-color: var(--bg-elevated, #f0f2f5);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-color, transparent);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.875rem;
    width: 100%;
}

.bg-gray-input:focus[b-cm2ridtz2m] {
    background-color: var(--bg-surface, #ffffff);
    border-color: var(--primary-color, #dee2e6);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 0, 0, 0), 0.25);
    outline: none;
}

/* Sidebar Nav (Standard with ::deep) */
/* Navigation styles removed - using FormSideNav component */

@media (max-width: 576px) {
    .responsive-padding[b-cm2ridtz2m] {
        padding: 1rem !important;
    }
}

/* --- ESTILOS ESPECÍFICOS DE FORMTAB2 --- */
.checkbox-card[b-cm2ridtz2m] {
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: 8px;
    padding: 20px;
    height: auto;
    background-color: var(--bg-surface, #fff);
    color: var(--text-primary, #212529);
    transition: all 0.2s;
}

.checkbox-card:hover[b-cm2ridtz2m] {
    border-color: var(--primary-color, #ced4da);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}



/* ========= Responsive FormTab Card ========= */
.formtab-card[b-cm2ridtz2m] {
    height: calc(100vh - 200px);
    min-height: 500px;
    border-radius: 12px;
}

@media (max-width: 991.98px) {
    .formtab-card[b-cm2ridtz2m] {
        height: auto;
        min-height: 0;
        border-radius: 12px;
    }
}
/* /Pages/Products/FormTabs/FormTab3.razor.rz.scp.css */
/* FormTab3.razor.css */

/* Inputs (Standard) */
[b-oq4ilhxqo0] .bg-gray-input {
    background-color: var(--bg-elevated, #f0f2f5);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-color, transparent);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.875rem;
    width: 100%;
}

.bg-gray-input:focus[b-oq4ilhxqo0] {
    background-color: var(--bg-surface, #ffffff);
    border-color: var(--primary-color, #dee2e6);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 0, 0, 0), 0.25);
    outline: none;
}

/* --- TARJETAS DE CATEGORÍA --- */
.category-card[b-oq4ilhxqo0] {
    border: 2px solid var(--border-color, #dee2e6);
    border-radius: 12px;
    padding: 1rem 0.75rem;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
    background: var(--bg-surface, #ffffff);
    color: var(--text-primary, #212529);
    user-select: none;
}

.category-card:hover[b-oq4ilhxqo0] {
    border-color: var(--primary-color, #adb5bd);
    background: var(--bg-elevated, #f8f9fa);
    transform: translateY(-1px);
}

.category-card.active-promo[b-oq4ilhxqo0] {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, 0.1);
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15);
}

.category-card.active-uso[b-oq4ilhxqo0] {
    border-color: #6f42c1;
    background: rgba(111, 66, 193, 0.1);
    box-shadow: 0 2px 8px rgba(111, 66, 193, 0.15);
}

.cat-icon[b-oq4ilhxqo0] {
    font-size: 1.75rem;
    margin-bottom: 0.4rem;
    display: block;
}

.active-promo .cat-icon[b-oq4ilhxqo0] { color: #0d6efd; }
.active-uso  .cat-icon[b-oq4ilhxqo0] { color: #6f42c1; }

.cat-title[b-oq4ilhxqo0] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary, #343a40);
    display: block;
    margin-bottom: 0.2rem;
}

.cat-subtitle[b-oq4ilhxqo0] {
    font-size: 0.72rem;
    color: var(--text-secondary, #6c757d);
    display: block;
    line-height: 1.3;
}

/* --- LISTA DE ARCHIVOS --- */
.file-list-scroll[b-oq4ilhxqo0] {
    max-height: 220px;
    overflow-y: auto;
}

.file-row[b-oq4ilhxqo0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border-color, #f0f0f0);
}

.file-row:hover[b-oq4ilhxqo0] { background: var(--bg-elevated, #f8f9fa); }
.file-row.selected[b-oq4ilhxqo0] { background: rgba(13, 110, 253, 0.1); }

.file-row-name[b-oq4ilhxqo0] {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-primary, #343a40);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* --- ZONA DE SUBIDA --- */
.upload-zone[b-oq4ilhxqo0] {
    border: 2px dashed var(--border-color, #dee2e6);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.18s;
    background: var(--bg-surface, #fafbfc);
    color: var(--text-primary, #212529);
}

.upload-zone:hover[b-oq4ilhxqo0] {
    border-color: var(--text-secondary, #6c757d);
    background: var(--bg-elevated, #f1f3f5);
}

.upload-zone.promo:hover[b-oq4ilhxqo0]  { border-color: #0d6efd; background: #f0f5ff; }
.upload-zone.uso:hover[b-oq4ilhxqo0]    { border-color: #6f42c1; background: #f5f0ff; }


/* ========= Responsive FormTab Card ========= */
.formtab-card[b-oq4ilhxqo0] {
    height: calc(100vh - 200px);
    min-height: 500px;
    border-radius: 12px;
}

@media (max-width: 991.98px) {
    .formtab-card[b-oq4ilhxqo0] {
        height: auto;
        min-height: 0;
        border-radius: 12px;
    }
}
/* /Pages/Products/FormTabs/FormTab4.razor.rz.scp.css */
/* FormTab4.razor.css */

/* --- LAYOUT GLOBAL & RESPONSIVO --- */
.content-body[b-fygqfaz9os] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.form-card[b-fygqfaz9os] {
    border-radius: 12px;
    min-height: 600px;
}

/* Estilos de Inputs (Standard) */
[b-fygqfaz9os] .bg-gray-input {
    background-color: var(--bg-elevated, #f0f2f5);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-color, transparent);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.875rem;
    width: 100%;
}

.bg-gray-input:focus[b-fygqfaz9os] {
    background-color: var(--bg-surface, #ffffff);
    border-color: var(--primary-color, #dee2e6);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 0, 0, 0), 0.25);
    outline: none;
}

/* Sidebar Nav (Standard) */
/* Navigation styles removed - using FormSideNav component */

/* --- ESTILOS ESPECÍFICOS FORMTAB4 --- */
.presentation-card[b-fygqfaz9os] {
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: 12px;
    padding: 25px;
    background-color: var(--bg-surface, #fff);
    color: var(--text-primary, #212529);
    transition: all 0.2s;
}

.presentation-card:hover[b-fygqfaz9os] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    border-color: var(--primary-color, transparent);
}



/* ========= Responsive FormTab Card ========= */
.formtab-card[b-fygqfaz9os] {
    height: calc(100vh - 200px);
    min-height: 500px;
    border-radius: 12px;
}

@media (max-width: 991.98px) {
    .formtab-card[b-fygqfaz9os] {
        height: auto;
        min-height: 0;
        border-radius: 12px;
    }
}
/* /Pages/Products/FormTabs/FormTab5.razor.rz.scp.css */
/* FormTab5.razor.css */

/* --- LAYOUT GLOBAL & RESPONSIVO --- */
.content-body[b-v49tu0qzg8] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.form-card[b-v49tu0qzg8] {
    border-radius: 12px;
    min-height: 600px;
}

/* Estilos de Inputs (Standard) */
[b-v49tu0qzg8] .bg-gray-input {
    background-color: var(--bg-elevated, #f0f2f5);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-color, transparent);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.875rem;
    width: 100%;
}

.bg-gray-input:focus[b-v49tu0qzg8] {
    background-color: var(--bg-surface, #ffffff);
    border-color: var(--primary-color, #dee2e6);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 0, 0, 0), 0.25);
    outline: none;
}

/* Sidebar Nav (Standard) */
/* Navigation styles removed - using FormSideNav component */

/* --- ESTILOS ESPECÍFICOS FORMTAB5 --- */
.pricing-card[b-v49tu0qzg8] {
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: 12px;
    padding: 25px;
    background-color: var(--bg-surface, #fff);
    color: var(--text-primary, #212529);
    margin-bottom: 2rem;
}

.label-width[b-v49tu0qzg8] {
    width: 80px;
}

.form-helper-text[b-v49tu0qzg8] {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 4px;
    margin-left: 105px;
}

/* Hide arrows/spinners for number inputs */
input[type=number][b-v49tu0qzg8]::-webkit-inner-spin-button,
input[type=number][b-v49tu0qzg8]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type=number][b-v49tu0qzg8] {
    -moz-appearance: textfield;
    appearance: textfield;
}



/* ========= Responsive FormTab Card ========= */
.formtab-card[b-v49tu0qzg8] {
    height: calc(100vh - 200px);
    min-height: 500px;
    border-radius: 12px;
}

@media (max-width: 991.98px) {
    .formtab-card[b-v49tu0qzg8] {
        height: auto;
        min-height: 0;
        border-radius: 12px;
    }
}
/* /Pages/Products/FormTabs/FormTab6.razor.rz.scp.css */
/* FormTab6.razor.css */

/* --- LAYOUT GLOBAL & RESPONSIVO --- */
.content-body[b-bztw1krx7h] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.form-card[b-bztw1krx7h] {
    border-radius: 12px;
    min-height: 600px;
}

/* Estilos de Inputs (Standard) */
[b-bztw1krx7h] .bg-gray-input {
    background-color: var(--bg-elevated, #f0f2f5);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-color, transparent);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.875rem;
    width: 100%;
}

.bg-gray-input:focus[b-bztw1krx7h] {
    background-color: var(--bg-surface, #ffffff);
    border-color: var(--primary-color, #dee2e6);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 0, 0, 0), 0.25);
    outline: none;
}

/* Sidebar Nav (Standard) */
/* Navigation styles removed - using FormSideNav component */

/* --- ESTILOS ESPECÍFICOS FORMTAB6 --- */
.descriptions-card[b-bztw1krx7h] {
    background-color: var(--bg-surface, #fff);
    border: 1px solid var(--border-color, transparent);
    color: var(--text-primary, #212529);
    transition: all 0.2s;
}

.descriptions-card:hover[b-bztw1krx7h] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    border-color: var(--primary-color, transparent);
}



/* ========= Responsive FormTab Card ========= */
.formtab-card[b-bztw1krx7h] {
    height: calc(100vh - 200px);
    min-height: 500px;
    border-radius: 12px;
}

@media (max-width: 991.98px) {
    .formtab-card[b-bztw1krx7h] {
        height: auto;
        min-height: 0;
        border-radius: 12px;
    }
}
/* /Pages/Products/FormTabs/FormTab7.razor.rz.scp.css */
/* FormTab7.razor.css */

/* --- LAYOUT GLOBAL & RESPONSIVO --- */
.content-body[b-b7v1f0qb05] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.form-card[b-b7v1f0qb05] {
    border-radius: 12px;
    min-height: 600px;
}

/* Estilos de Inputs (Standard) */
[b-b7v1f0qb05] .bg-gray-input {
    background-color: var(--bg-elevated, #f0f2f5);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-color, transparent);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.875rem;
    width: 100%;
}

.bg-gray-input:focus[b-b7v1f0qb05] {
    background-color: var(--bg-surface, #ffffff);
    border-color: var(--primary-color, #dee2e6);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 0, 0, 0), 0.25);
    outline: none;
}

/* Sidebar Nav (Standard) */
/* Navigation styles removed - using FormSideNav component */

@media (max-width: 576px) {
    .responsive-padding[b-b7v1f0qb05] {
        padding: 1rem !important;
    }
}

/* --- ESTILOS ESPECÍFICOS FORMTAB7 --- */
.attributes-card[b-b7v1f0qb05] {
    background-color: var(--bg-surface, #fff);
    border: 1px solid var(--border-color, transparent);
    color: var(--text-primary, #212529);
    transition: all 0.2s;
}

.attributes-card:hover[b-b7v1f0qb05] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    border-color: var(--primary-color, transparent);
}



/* ========= Responsive FormTab Card ========= */
.formtab-card[b-b7v1f0qb05] {
    height: calc(100vh - 200px);
    min-height: 500px;
    border-radius: 12px;
}

@media (max-width: 991.98px) {
    .formtab-card[b-b7v1f0qb05] {
        height: auto;
        min-height: 0;
        border-radius: 12px;
    }
}
/* /Pages/Products/FormTabs/FormTab8.razor.rz.scp.css */
/* FormTab8.razor.css */

/* --- LAYOUT GLOBAL & RESPONSIVO --- */
.content-body[b-pvkoan0y8o] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.form-card[b-pvkoan0y8o] {
    border-radius: 12px;
    min-height: 600px;
}

/* Estilos de Inputs (Standard) */
[b-pvkoan0y8o] .bg-gray-input {
    background-color: var(--bg-elevated, #f0f2f5);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-color, transparent);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.875rem;
    width: 100%;
}

.bg-gray-input:focus[b-pvkoan0y8o] {
    background-color: var(--bg-surface, #ffffff);
    border-color: var(--primary-color, #dee2e6);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 0, 0, 0), 0.25);
    outline: none;
}

/* Sidebar Nav (Standard) */
/* Navigation styles removed - using FormSideNav component */

@media (max-width: 576px) {
    .responsive-padding[b-pvkoan0y8o] {
        padding: 1rem !important;
    }

    .import-card[b-pvkoan0y8o] {
        padding: 1.25rem !important;
    }

    .label-fixed[b-pvkoan0y8o],
    .label-fixed-lg[b-pvkoan0y8o] {
        min-width: auto;
        text-align: left;
        margin-bottom: 4px;
        display: block;
    }
}

/* --- ESTILOS ESPECÍFICOS FORMTAB8 --- */
.import-card[b-pvkoan0y8o] {
    background-color: var(--bg-surface, #fff);
    border: 1px solid var(--border-color, transparent);
    color: var(--text-primary, #212529);
    transition: all 0.2s;
}

.import-card:hover[b-pvkoan0y8o] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    border-color: var(--primary-color, transparent);
}

.label-fixed[b-pvkoan0y8o] {
    min-width: 80px;
    text-align: right;
}

.label-fixed-lg[b-pvkoan0y8o] {
    min-width: 90px;
    text-align: right;
}

.x-small[b-pvkoan0y8o] {
    font-size: 0.7rem;
}



/* ========= Responsive FormTab Card ========= */
.formtab-card[b-pvkoan0y8o] {
    height: calc(100vh - 200px);
    min-height: 500px;
    border-radius: 12px;
}

@media (max-width: 991.98px) {
    .formtab-card[b-pvkoan0y8o] {
        height: auto;
        min-height: 0;
        border-radius: 12px;
    }
}
/* /Pages/Products/FormTabs/FormTab9.razor.rz.scp.css */
/* FormTab9.razor.css */

/* --- LAYOUT GLOBAL & RESPONSIVO --- */
.content-body[b-hxr0v278e6] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.form-card[b-hxr0v278e6] {
    border-radius: 12px;
    min-height: 600px;
}

/* Estilos de Inputs (Standard) */
[b-hxr0v278e6] .bg-gray-input {
    background-color: var(--bg-elevated, #f0f2f5);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-color, transparent);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.875rem;
    width: 100%;
}

.bg-gray-input:focus[b-hxr0v278e6] {
    background-color: var(--bg-surface, #ffffff);
    border-color: var(--primary-color, #dee2e6);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 0, 0, 0), 0.25);
    outline: none;
}

/* Sidebar Nav (Standard) */
/* Navigation styles removed - using FormSideNav component */

@media (max-width: 576px) {
    .responsive-padding[b-hxr0v278e6] {
        padding: 1rem !important;
    }

    .import-card[b-hxr0v278e6] {
        padding: 1.25rem !important;
    }

    .label-fixed[b-hxr0v278e6],
    .label-fixed-lg[b-hxr0v278e6] {
        min-width: auto;
        text-align: left;
        margin-bottom: 4px;
        display: block;
    }
}

/* Custom Switch styling for better visibility */
.form-check-input:checked[b-hxr0v278e6] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.custom-switch .form-check-input[b-hxr0v278e6] {
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.custom-switch:hover .form-check-input[b-hxr0v278e6] {
    cursor: pointer;
}

.form-section-title[b-hxr0v278e6] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #2c3e50);
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border-color, #e9ecef);
    padding-bottom: 0.5rem;
}

.form-label-custom[b-hxr0v278e6] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-secondary, #495057);
    margin-bottom: 0.25rem;
}

.box-item-container[b-hxr0v278e6] {
    background-color: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    color: var(--text-primary, #212529);
}

.box-item-header[b-hxr0v278e6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.box-item-title[b-hxr0v278e6] {
    font-weight: 600;
    color: var(--text-primary, #495057);
    margin: 0;
}

.btn-add-box[b-hxr0v278e6] {
    background-color: #0071ce;
    color: white;
    font-weight: 600;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.btn-add-box:hover[b-hxr0v278e6] {
    background-color: #005a9e;
    color: white;
}

.btn-remove-box[b-hxr0v278e6] {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.btn-remove-box:hover[b-hxr0v278e6] {
    background-color: #bb2d3b;
    color: white;
}



/* ========= Responsive FormTab Card ========= */
.formtab-card[b-hxr0v278e6] {
    height: calc(100vh - 200px);
    min-height: 500px;
    border-radius: 12px;
}

@media (max-width: 991.98px) {
    .formtab-card[b-hxr0v278e6] {
        height: auto;
        min-height: 0;
        border-radius: 12px;
    }
}
/* /Pages/Products/ProductosRegistro.razor.rz.scp.css */
/* --- Estructura General --- */
.layout-wrapper[b-vpc2sikk3i] {
    display: flex;
    min-height: 100vh;
    background-color: #f4f7f9; /* Fondo gris azulado suave */
    font-family: 'Segoe UI', sans-serif;
}

.sidebar-area[b-vpc2sikk3i] {
    flex-shrink: 0;
    /* El ancho lo define el componente ReusableSidebar */
}

.content-area[b-vpc2sikk3i] {
    flex-grow: 1;
    padding: 40px 60px;
}

/* --- Título Principal --- */
.page-header[b-vpc2sikk3i] {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
}

/* --- Tarjeta Blanca Principal --- */
.main-card[b-vpc2sikk3i] {
    background-color: white;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    max-width: 900px; /* Evita que se estire demasiado en pantallas grandes */
    position: relative; /* Para posicionar el botón */
    min-height: 600px;
}

/* --- Encabezado del Formulario --- */
.form-section-header[b-vpc2sikk3i] {
    margin-bottom: 40px;
    padding-left: 170px; /* Alineación visual con los inputs */
}

    .form-section-header h3[b-vpc2sikk3i] {
        font-size: 18px;
        font-weight: 700;
        color: #bbb; /* Color gris claro para el título */
        margin: 0;
    }

    .form-section-header p[b-vpc2sikk3i] {
        font-size: 14px;
        color: #bbb;
        margin: 5px 0 0 0;
    }

/* --- Sistema de Grid para el Formulario --- */
.form-body[b-vpc2sikk3i] {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Espacio vertical entre filas */
}

.form-row[b-vpc2sikk3i] {
    display: grid;
    /* Columna 1: Label (ancho fijo o auto), Columna 2: Input (flexible) */
    grid-template-columns: 150px 1fr;
    gap: 20px;
    align-items: flex-start; /* Alinear arriba por si el texto baja */
}

/* Etiquetas (Labels) */
.row-label[b-vpc2sikk3i] {
    text-align: right;
    font-weight: 600;
    font-size: 14px;
    color: #000;
    padding-top: 10px; /* Ajuste fino para alinear con el texto del input */
}

.red[b-vpc2sikk3i] {
    color: #d32f2f;
}

/* Contenedor del Input y Helper Text */
.input-container[b-vpc2sikk3i] {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 400px; /* Ancho máximo de los inputs como en la imagen */
}

/* Estilo específico de los Inputs (Fondo gris) */
.styled-input[b-vpc2sikk3i] {
    background-color: #f0f0f0; /* El gris de fondo */
    border: none;
    border-bottom: 1px solid #ccc; /* Solo borde inferior sutil */
    border-radius: 4px 4px 0 0;
    padding: 10px 12px;
    font-size: 14px;
    color: #333;
    height: 40px;
    width: 100%;
    outline: none;
}

    .styled-input:focus[b-vpc2sikk3i] {
        background-color: #e8e8e8;
        border-bottom-color: #666;
    }

/* Helper Text debajo del input */
.helper-text[b-vpc2sikk3i] {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
    border-top: 1px solid #777; /* La línea oscura fina que se ve justo debajo del input */
    padding-top: 4px;
}

/* Icono especial para el Select */
.select-icon[b-vpc2sikk3i] {
    position: absolute;
    right: 10px;
    top: 10px;
    pointer-events: none;
    font-size: 12px;
    color: #666;
}
/* Limpiamos la flecha por defecto del select para poner la nuestra */
select.styled-input[b-vpc2sikk3i] {
    appearance: none;
}

/* --- Botón Siguiente --- */
.card-footer[b-vpc2sikk3i] {
    display: flex;
    justify-content: flex-end;
    margin-top: 50px;
}

.btn-next[b-vpc2sikk3i] {
    background-color: #1a1f2c; /* Color oscuro casi negro */
    color: white;
    border: none;
    border-radius: 20px; /* Bordes muy redondeados */
    padding: 10px 30px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .btn-next:hover[b-vpc2sikk3i] {
        background-color: #333;
    }
/* /Pages/Products/Products.razor.rz.scp.css */
/* ============================================================ */
/* PRODUCTOS DASHBOARD  —  Bento Box Style                     */
/* ============================================================ */

.productos-dashboard[b-bws11v04f2] {
    background-color: #f0f2f5;
    min-height: 100vh;
    padding: 24px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ---- Base de cada celda bento ---- */
.bento-cell[b-bws11v04f2] {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* ============================================================ */
/* BARRA DE ACCIONES RAPIDAS                                    */
/* ============================================================ */
.bento-cell.quick-actions-bar[b-bws11v04f2] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 22px;
    background: linear-gradient(135deg, #1e2a38 0%, #2d3e52 100%);
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
    flex-wrap: wrap;
}

.qa-label[b-bws11v04f2] {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.qa-divider[b-bws11v04f2] {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.qa-buttons[b-bws11v04f2] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.qa-btn[b-bws11v04f2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.qa-btn:hover[b-bws11v04f2] {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.qa-btn:active[b-bws11v04f2] { transform: translateY(0); }

.qa-btn-primary[b-bws11v04f2] { background: #3B82F6; color: #fff; }
.qa-btn-success[b-bws11v04f2] { background: #10b981; color: #fff; }
.qa-btn-warning[b-bws11v04f2] { background: #f59e0b; color: #fff; }
.qa-btn-info[b-bws11v04f2]    { background: #0d9488; color: #fff; }

.qa-btn-icon[b-bws11v04f2] { font-size: 1.3rem; flex-shrink: 0; }

.qa-btn-text[b-bws11v04f2] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.qa-btn-title[b-bws11v04f2] { font-weight: 700; font-size: 0.88rem; }
.qa-btn-sub[b-bws11v04f2]   { font-size: 0.7rem; opacity: 0.82; }

/* ============================================================ */
/* FILA DE ESTADISTICAS KPI                                     */
/* ============================================================ */
.stats-row[b-bws11v04f2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-card[b-bws11v04f2] {
    background: #fff;
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.stat-card[b-bws11v04f2]::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px;
    height: 100%;
    border-radius: 4px 0 0 4px;
}

.accent-blue[b-bws11v04f2]::before   { background: #3B82F6; }
.accent-green[b-bws11v04f2]::before  { background: #10b981; }
.accent-purple[b-bws11v04f2]::before { background: #8B5CF6; }
.accent-orange[b-bws11v04f2]::before { background: #f59e0b; }

.stat-icon[b-bws11v04f2] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.accent-blue .stat-icon[b-bws11v04f2]   { background: #eff6ff; color: #3B82F6; }
.accent-green .stat-icon[b-bws11v04f2]  { background: #f0fdf4; color: #10b981; }
.accent-purple .stat-icon[b-bws11v04f2] { background: #f5f3ff; color: #8B5CF6; }
.accent-orange .stat-icon[b-bws11v04f2] { background: #fffbeb; color: #f59e0b; }

.stat-info[b-bws11v04f2] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.stat-value[b-bws11v04f2] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e2a38;
    line-height: 1.2;
}

.stat-label[b-bws11v04f2] {
    font-size: 0.68rem;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-badge[b-bws11v04f2] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    align-self: flex-start;
    white-space: nowrap;
}

.badge-up[b-bws11v04f2]   { background: #dcfce7; color: #15803d; }
.badge-warn[b-bws11v04f2] { background: #fef3c7; color: #92400e; }
.badge-down[b-bws11v04f2] { background: #fee2e2; color: #dc2626; }

/* ============================================================ */
/* CUADRICULA BENTO PRINCIPAL                                   */
/* ============================================================ */
.bento-main[b-bws11v04f2] {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    grid-template-rows: minmax(320px, auto) minmax(240px, auto);
    gap: 16px;
}

/*
 *  Composición BentoBox:
 *  [ Alertas (tall) ][ Top Productos — ancho, 2 cols      ]
 *  [ Alertas (tall) ][ Atajos       ][ Estado del Stock   ]
 */
.cell-alerts[b-bws11v04f2]      { grid-column: 1;     grid-row: 1 / 3; display: flex; flex-direction: column; }
.cell-topproducts[b-bws11v04f2] { grid-column: 2 / 4; grid-row: 1;     display: flex; flex-direction: column; }
.cell-shortcuts[b-bws11v04f2]   { grid-column: 2;     grid-row: 2;     display: flex; flex-direction: column; }
.cell-stockstatus[b-bws11v04f2] { grid-column: 3;     grid-row: 2;     display: flex; flex-direction: column; }

/* ---- Cabecera de celda ---- */
.cell-header[b-bws11v04f2] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.cell-header-icon[b-bws11v04f2] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.icon-dark[b-bws11v04f2]   { background: #1e2a38; color: #fff; }
.icon-red[b-bws11v04f2]    { background: #fee2e2; color: #dc2626; }
.icon-blue[b-bws11v04f2]   { background: #eff6ff; color: #3B82F6; }
.icon-green[b-bws11v04f2]  { background: #dcfce7; color: #15803d; }
.icon-teal[b-bws11v04f2]   { background: #e0f2fe; color: #0369a1; }
.icon-purple[b-bws11v04f2] { background: #f5f3ff; color: #7c3aed; }
.icon-orange[b-bws11v04f2] { background: #fffbeb; color: #d97706; }

.cell-title[b-bws11v04f2] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e2a38;
    margin: 0;
}

/* ---- Alertas ---- */
.alert-list-wrap[b-bws11v04f2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.alert-item[b-bws11v04f2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #f0f2f5;
}

.alert-dot[b-bws11v04f2] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.alert-content[b-bws11v04f2] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.alert-msg[b-bws11v04f2] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e2a38;
}

.alert-sub[b-bws11v04f2] {
    font-size: 0.68rem;
    color: #9CA3AF;
}

.btn-alert-action[b-bws11v04f2] {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.btn-alert-action:hover[b-bws11v04f2] { background: #f8fafc; border-color: #94a3b8; color: #1e2a38; }

.alert-empty[b-bws11v04f2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* ---- Tabla productos ---- */
.catalog-table-wrap[b-bws11v04f2] {
    flex: 1;
    overflow-y: auto;
    margin: 0 -20px;
    min-height: 0;
}

.prod-thumb[b-bws11v04f2] {
    width: 28px;
    height: 28px;
    background: #f0f2f5;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

[b-bws11v04f2] thead th {
    background-color: #f8fafc !important;
    color: #64748b !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-weight: 600;
    padding: 10px 12px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cell-footer[b-bws11v04f2] {
    margin-top: 14px;
    flex-shrink: 0;
}

.btn-cell-outline[b-bws11v04f2] {
    background: transparent;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-cell-outline:hover[b-bws11v04f2] { background: #f8fafc; border-color: #94a3b8; color: #1e2a38; }

/* ---- Métricas de stock ---- */
.storage-metrics[b-bws11v04f2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.storage-metric[b-bws11v04f2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #f0f2f5;
}

.metric-val[b-bws11v04f2] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e2a38;
    display: block;
    line-height: 1.2;
}

.metric-lbl[b-bws11v04f2] {
    font-size: 0.68rem;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: block;
}

/* ---- Atajos bento ---- */
.shortcuts-bento[b-bws11v04f2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    flex: 1;
    align-content: start;
}

.shortcut-tile[b-bws11v04f2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 8px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    transition: transform 0.13s ease, filter 0.13s ease;
    text-align: center;
}

.shortcut-tile i[b-bws11v04f2] { font-size: 1.4rem; }

.shortcut-tile:hover[b-bws11v04f2]  { transform: translateY(-2px); filter: brightness(0.94); }
.shortcut-tile:active[b-bws11v04f2] { transform: translateY(0); }

.tile-blue[b-bws11v04f2]   { background: #eff6ff; color: #3B82F6; }
.tile-green[b-bws11v04f2]  { background: #f0fdf4; color: #15803d; }
.tile-teal[b-bws11v04f2]   { background: #e0f2fe; color: #0369a1; }
.tile-purple[b-bws11v04f2] { background: #f5f3ff; color: #7c3aed; }
.tile-orange[b-bws11v04f2] { background: #fffbeb; color: #d97706; }

/* ---- Divisor dentro de celda ---- */
.cell-divider[b-bws11v04f2] {
    height: 1px;
    background: #f0f2f5;
    margin: 12px 0;
    flex-shrink: 0;
}

/* ---- Barras de categorías ---- */
.channel-bars-wrap[b-bws11v04f2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    justify-content: center;
}

.bar-col-h[b-bws11v04f2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bar-label-h[b-bws11v04f2] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1e2a38;
    width: 90px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-track[b-bws11v04f2] {
    flex: 1;
    height: 10px;
    background: #f0f2f5;
    border-radius: 8px;
    overflow: hidden;
}

.bar-fill-h[b-bws11v04f2] {
    height: 100%;
    border-radius: 8px;
    transition: width 0.5s ease;
}

.bar-pct[b-bws11v04f2] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    width: 32px;
    text-align: right;
    flex-shrink: 0;
}

/* ---- Botones de accion dentro de celdas ---- */
.cell-actions[b-bws11v04f2] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.btn-cell-action[b-bws11v04f2] {
    flex: 1;
    padding: 9px 12px;
    border: none;
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.13s ease, filter 0.13s ease;
    white-space: nowrap;
    text-align: center;
}

.btn-cell-action:hover[b-bws11v04f2]  { transform: translateY(-1px); filter: brightness(0.92); }
.btn-cell-action:active[b-bws11v04f2] { transform: translateY(0); }

.btn-action-teal[b-bws11v04f2]   { background: #e0f2fe; color: #0369a1; }
.btn-action-purple[b-bws11v04f2] { background: #f5f3ff; color: #7c3aed; }

/* ============================================================ */
/* HERRAMIENTAS DE ADMINISTRACION                               */
/* ============================================================ */
.bento-cell.admin-tools[b-bws11v04f2] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: #f8fafc;
    border: 1.5px dashed #e2e8f0;
    box-shadow: none;
    flex-wrap: wrap;
}

.admin-label[b-bws11v04f2] {
    font-size: 0.76rem;
    font-weight: 700;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.admin-divider[b-bws11v04f2] {
    width: 1px;
    height: 28px;
    background: #e2e8f0;
    flex-shrink: 0;
}

.admin-buttons[b-bws11v04f2] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-btn[b-bws11v04f2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.13s, box-shadow 0.15s;
    color: #1e2a38;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.admin-btn:hover[b-bws11v04f2] {
    background: #f8fafc;
    border-color: #94a3b8;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.admin-btn-text[b-bws11v04f2] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    text-align: left;
}

.admin-btn-title[b-bws11v04f2] { font-size: 0.82rem; font-weight: 700; color: #1e2a38; }
.admin-btn-sub[b-bws11v04f2]   { font-size: 0.68rem; color: #9CA3AF; font-weight: 400; }

/* ============================================================ */
/* RESPONSIVIDAD                                                */
/* ============================================================ */
@media (max-width: 1100px) {
    .bento-main[b-bws11v04f2] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(280px, auto) minmax(220px, auto) minmax(220px, auto);
    }

    .cell-alerts[b-bws11v04f2]      { grid-column: 1 / -1; grid-row: 1; }
    .cell-topproducts[b-bws11v04f2] { grid-column: 1 / -1; grid-row: 2; }
    .cell-shortcuts[b-bws11v04f2]   { grid-column: 1;       grid-row: 3; }
    .cell-stockstatus[b-bws11v04f2] { grid-column: 2;       grid-row: 3; }
}

@media (max-width: 768px) {
    .productos-dashboard[b-bws11v04f2] { padding: 14px; gap: 12px; }
    .stats-row[b-bws11v04f2]            { grid-template-columns: repeat(2, 1fr); }
    .bento-main[b-bws11v04f2]           { grid-template-columns: 1fr; grid-template-rows: auto; }

    .cell-alerts[b-bws11v04f2], .cell-topproducts[b-bws11v04f2],
    .cell-shortcuts[b-bws11v04f2], .cell-stockstatus[b-bws11v04f2] { grid-column: 1; grid-row: auto; }

    .shortcuts-bento[b-bws11v04f2] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .stats-row[b-bws11v04f2]       { grid-template-columns: 1fr; }
    .qa-buttons[b-bws11v04f2]      { flex-direction: column; }
    .cell-actions[b-bws11v04f2]    { flex-direction: column; }
    .qa-btn[b-bws11v04f2]          { width: 100%; }
    .shortcuts-bento[b-bws11v04f2] { grid-template-columns: repeat(2, 1fr); }
}
/* /Pages/Purchasing/Compras.razor.rz.scp.css */
/* Estilos movidos a wwwroot/css/compras-dashboard.css */
/* /Pages/Purchasing/OrderCheck.razor.rz.scp.css */
/* --- Estilos Generales --- */
body[b-xn5mgj4xgf] {
    background-color: #f4f6f8;
}

.form-container[b-xn5mgj4xgf] {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 100px;
}

/* --- Header --- */
.page-header-area[b-xn5mgj4xgf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 30px 0;
    gap: 15px;
    flex-wrap: wrap;
}

.page-title-group h2[b-xn5mgj4xgf] {
    font-weight: 800;
    color: #1a1e21;
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 1.8rem);
}

.page-subtitle[b-xn5mgj4xgf] {
    color: #6c757d;
    font-size: 0.9rem;
    margin-top: 5px;
}

/* --- Botones --- */
.btn-action[b-xn5mgj4xgf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-secondary-light[b-xn5mgj4xgf] {
    background-color: white;
    color: #555;
    border: 1px solid #e9ecef;
}

.btn-secondary-light:hover[b-xn5mgj4xgf] {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #000;
}

.btn-primary-confirm[b-xn5mgj4xgf] {
    background-color: #0d6efd;
    color: white;
    box-shadow: 0 4px 6px rgba(13, 110, 253, 0.2);
}

.btn-primary-confirm:hover[b-xn5mgj4xgf] {
    background-color: #0b5ed7;
    transform: translateY(-1px);
    box-shadow: 0 6px 8px rgba(13, 110, 253, 0.3);
}

/* --- Cards --- */
.section-card[b-xn5mgj4xgf] {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    padding: 30px;
    margin-bottom: 25px;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.section-title[b-xn5mgj4xgf] {
    font-weight: 700;
    font-size: 1.15rem;
    color: #343a40;
    margin: 0;
}

/* --- Grid de Recepción --- */
.reception-grid-header[b-xn5mgj4xgf] {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 10px;
    font-weight: 700;
    color: #6c757d;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}

.reception-row[b-xn5mgj4xgf] {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f1f3f5;
    transition: background 0.2s;
    position: relative;
    min-height: 80px;
}

.reception-row:hover[b-xn5mgj4xgf] {
    background-color: #fafafa;
}

.reception-row:last-child[b-xn5mgj4xgf] {
    border-bottom: none;
}

/* Estilos Prioridad */
.row-priority[b-xn5mgj4xgf] {
    background-color: #fff5f5;
    border-left: 4px solid #dc3545;
}

.priority-badge[b-xn5mgj4xgf] {
    background-color: #dc3545;
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Columnas Flex (Ajustadas para mejor alineación) */
.col-product[b-xn5mgj4xgf] {
    flex: 4;
    min-width: 250px;
    padding-right: 15px;
}

.col-expected[b-xn5mgj4xgf] {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
}

.col-received[b-xn5mgj4xgf] {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
}

.col-status[b-xn5mgj4xgf] {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* Imagen Placeholder */
.product-img-placeholder[b-xn5mgj4xgf] {
    width: 56px;
    height: 56px;
    background-color: #e9ecef;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #adb5bd;
}

/* Inputs Mejorados */
.custom-input[b-xn5mgj4xgf] {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    height: 45px;
    width: 100%;
    padding: 10px 16px;
    color: #495057;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s;
}

.custom-input:focus[b-xn5mgj4xgf] {
    background-color: #fff;
    border-color: #86b7fe;
    outline: none;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

/* Input Esperado (Read only visualmente distinto) */
.input-expected[b-xn5mgj4xgf] {
    background-color: transparent;
    border: 1px dashed #dee2e6;
    color: #6c757d;
    font-size: 1.1rem;
    text-align: center;
    cursor: default;
}

/* Input Recibido (Editable) */
.input-received[b-xn5mgj4xgf] {
    background-color: #fff;
    border: 1px solid #ced4da;
    color: #212529;
    text-align: center;
    font-size: 1.1rem;
}

.input-received:focus[b-xn5mgj4xgf] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

/* Semáforo */
.status-dot[b-xn5mgj4xgf] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: 4px;
}

.status-green[b-xn5mgj4xgf] {
    background-color: #2e7d32;
    box-shadow: 0 0 0 2px #a5d6a7;
}

.status-yellow[b-xn5mgj4xgf] {
    background-color: #ffc107;
    box-shadow: 0 0 0 2px #ffe082;
}

.status-red[b-xn5mgj4xgf] {
    background-color: #dc3545;
    box-shadow: 0 0 0 2px #ef9a9a;
}

/* Empty State */
.empty-state-container[b-xn5mgj4xgf] {
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    background-color: #fcfcfc;
    color: #adb5bd;
    padding: 4rem 1rem;
}

/* Modal Styles */
.modal-overlay[b-xn5mgj4xgf] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.modal-card[b-xn5mgj4xgf] {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: slideIn-b-xn5mgj4xgf 0.3s ease;
}

.modal-header-danger[b-xn5mgj4xgf] {
    background-color: #dc3545;
    color: white;
    padding: 20px;
    text-align: center;
}

@keyframes slideIn-b-xn5mgj4xgf {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsividad */
@media (max-width: 768px) {
    .reception-grid-header[b-xn5mgj4xgf] {
        display: none;
    }

    .reception-row[b-xn5mgj4xgf] {
        flex-wrap: wrap;
        gap: 15px;
        padding-bottom: 20px;
        height: auto;
    }

    .col-product[b-xn5mgj4xgf] {
        width: 100%;
        margin-bottom: 5px;
        flex: none;
    }

    .col-expected[b-xn5mgj4xgf],
    .col-received[b-xn5mgj4xgf],
    .col-status[b-xn5mgj4xgf] {
        flex: 1;
    }

    .mobile-label[b-xn5mgj4xgf] {
        display: block;
        font-size: 0.65rem;
        color: #adb5bd;
        margin-bottom: 5px;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.5px;
    }
}

@media (min-width: 769px) {
    .mobile-label[b-xn5mgj4xgf] {
        display: none;
    }
}

/* ========================================= */
/* --- DARK MODE OVERRIDES ---               */
/* ========================================= */

[data-bs-theme="dark"] .page-title-group h2[b-xn5mgj4xgf],
[data-bs-theme="dark"] .section-title[b-xn5mgj4xgf],
[data-bs-theme="dark"] .text-dark[b-xn5mgj4xgf],
[data-bs-theme="dark"] .empty-state-container h5[b-xn5mgj4xgf] {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .page-subtitle[b-xn5mgj4xgf],
[data-bs-theme="dark"] .text-muted[b-xn5mgj4xgf],
[data-bs-theme="dark"] .input-expected[b-xn5mgj4xgf] {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .btn-secondary-light[b-xn5mgj4xgf],
[data-bs-theme="dark"] .btn-light[b-xn5mgj4xgf] {
    background-color: #18181b !important;
    color: #f3f4f6 !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .btn-secondary-light:hover[b-xn5mgj4xgf],
[data-bs-theme="dark"] .btn-light:hover[b-xn5mgj4xgf] {
    background-color: #27272a !important;
    color: #fff !important;
    border-color: #6c757d !important;
}

[data-bs-theme="dark"] .section-card[b-xn5mgj4xgf],
[data-bs-theme="dark"] .modal-card[b-xn5mgj4xgf],
[data-bs-theme="dark"] .bg-white[b-xn5mgj4xgf] {
    background-color: #18181b !important;
    border-color: #3f3f46 !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .reception-grid-header[b-xn5mgj4xgf] {
    background-color: #09090b !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .reception-row[b-xn5mgj4xgf] {
    border-bottom-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .reception-row:hover[b-xn5mgj4xgf] {
    background-color: #27272a !important;
}

[data-bs-theme="dark"] .row-priority[b-xn5mgj4xgf] {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border-left-color: #dc3545 !important;
}

[data-bs-theme="dark"] .product-img-placeholder[b-xn5mgj4xgf] {
    background-color: #27272a !important;
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .custom-input[b-xn5mgj4xgf],
[data-bs-theme="dark"] .input-received[b-xn5mgj4xgf],
[data-bs-theme="dark"] .input-group-text[b-xn5mgj4xgf] {
    background-color: #09090b !important;
    border-color: #3f3f46 !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .custom-input:focus[b-xn5mgj4xgf],
[data-bs-theme="dark"] .input-received:focus[b-xn5mgj4xgf] {
    background-color: #18181b !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2) !important;
}

[data-bs-theme="dark"] .bg-light[b-xn5mgj4xgf] {
    background-color: #27272a !important;
    border-color: #3f3f46 !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .border-bottom[b-xn5mgj4xgf] {
    border-bottom-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .empty-state-container[b-xn5mgj4xgf] {
    background-color: #18181b !important;
    border-color: #3f3f46 !important;
    color: #9ca3af !important;
}

/* ========================================= */
/* --- LAYOUT HELPERS ---                    */
/* ========================================= */

.animate-fade-in[b-xn5mgj4xgf] {
    animation: fadeIn-b-xn5mgj4xgf 0.25s ease-out;
}

@keyframes fadeIn-b-xn5mgj4xgf {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-group-label[b-xn5mgj4xgf] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    margin-bottom: 6px;
    display: block;
}

.action-bar[b-xn5mgj4xgf] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.section-header[b-xn5mgj4xgf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* ========================================= */
/* --- COLUMNA ACCIÓN ---                    */
/* ========================================= */

.col-action[b-xn5mgj4xgf] {
    flex: 0 0 90px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ========================================= */
/* --- BOTÓN ACCIÓN (FLAG) ---               */
/* ========================================= */

.btn-accion[b-xn5mgj4xgf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1.5px solid #dee2e6;
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-accion:hover[b-xn5mgj4xgf] {
    background-color: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

.btn-accion-active[b-xn5mgj4xgf] {
    background-color: rgba(220, 53, 69, 0.08);
    border-color: #dc3545;
    color: #dc3545;
}

.btn-accion-active:hover[b-xn5mgj4xgf] {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: #b02a37;
    color: #b02a37;
}

/* ========================================= */
/* --- FILA CON INCIDENCIA ---               */
/* ========================================= */

.row-incident[b-xn5mgj4xgf] {
    background-color: rgba(220, 53, 69, 0.03) !important;
    border-left: 3px solid #dc3545;
}

/* ========================================= */
/* --- BADGE DE INCIDENCIA EN PRODUCTO ---   */
/* ========================================= */

.incident-badge[b-xn5mgj4xgf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ========================================= */
/* --- OVERLAY ---                           */
/* ========================================= */

.incident-overlay[b-xn5mgj4xgf] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
    backdrop-filter: blur(2px);
    animation: fadeIn-b-xn5mgj4xgf 0.2s ease;
}

/* ========================================= */
/* --- PANEL LATERAL DE INCIDENCIA ---       */
/* ========================================= */

.incident-panel[b-xn5mgj4xgf] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 420px;
    max-width: 100vw;
    background: #fff;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
    animation: slideInRight-b-xn5mgj4xgf 0.25s ease;
}

@keyframes slideInRight-b-xn5mgj4xgf {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.incident-panel-header[b-xn5mgj4xgf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 18px;
    background: linear-gradient(135deg, #dc3545, #b02a37);
    color: white;
    flex-shrink: 0;
}

.incident-panel-body[b-xn5mgj4xgf] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    scrollbar-width: thin;
}

.incident-panel-footer[b-xn5mgj4xgf] {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    flex-shrink: 0;
}

/* ========================================= */
/* --- TARJETA INFO DEL ÍTEM ---             */
/* ========================================= */

.incident-info-card[b-xn5mgj4xgf] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 14px 16px;
}

.info-label[b-xn5mgj4xgf] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #adb5bd;
    margin-bottom: 3px;
}

.info-value[b-xn5mgj4xgf] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #212529;
    word-break: break-all;
}

/* ========================================= */
/* --- GRID DE TIPOS DE INCIDENCIA ---       */
/* ========================================= */

.incident-type-grid[b-xn5mgj4xgf] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.incident-type-btn[b-xn5mgj4xgf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border-radius: 10px;
    border: 1.5px solid #e9ecef;
    background: #f8f9fa;
    color: #495057;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    line-height: 1.2;
}

.incident-type-btn:hover[b-xn5mgj4xgf] {
    background: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

.incident-type-btn.active[b-xn5mgj4xgf] {
    background: rgba(220, 53, 69, 0.08);
    border-color: #dc3545;
    color: #dc3545;
    font-weight: 700;
}

/* ========================================= */
/* --- FILAS DE TAREAS EXISTENTES ---        */
/* ========================================= */

.existing-task-row[b-xn5mgj4xgf] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    margin-bottom: 6px;
}

/* ========================================= */
/* --- HEADER MODAL TAREA ---               */
/* ========================================= */

.modal-header-task[b-xn5mgj4xgf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, #1a1e21, #343a40);
    color: white;
    border-radius: 12px 12px 0 0;
}

/* ========================================= */
/* --- RESPONSIVE: PANEL LATERAL ---        */
/* ========================================= */

@media (max-width: 576px) {
    .incident-panel[b-xn5mgj4xgf] {
        width: 100vw;
    }

    .col-action[b-xn5mgj4xgf] {
        flex: 0 0 60px;
    }

    .btn-accion[b-xn5mgj4xgf] {
        padding: 6px 8px;
        font-size: 0.75rem;
    }
}

/* ========================================= */
/* --- DARK MODE: NUEVAS CLASES ---          */
/* ========================================= */

[data-bs-theme="dark"] .btn-accion[b-xn5mgj4xgf] {
    background-color: #27272a !important;
    border-color: #3f3f46 !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .btn-accion:hover[b-xn5mgj4xgf] {
    background-color: #3f3f00 !important;
    border-color: #ffc107 !important;
    color: #ffc107 !important;
}

[data-bs-theme="dark"] .btn-accion-active[b-xn5mgj4xgf] {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border-color: #dc3545 !important;
    color: #f87171 !important;
}

[data-bs-theme="dark"] .row-incident[b-xn5mgj4xgf] {
    background-color: rgba(220, 53, 69, 0.07) !important;
}

[data-bs-theme="dark"] .incident-panel[b-xn5mgj4xgf] {
    background: #18181b !important;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .incident-panel-body[b-xn5mgj4xgf] {
    scrollbar-color: #3f3f46 transparent;
}

[data-bs-theme="dark"] .incident-panel-footer[b-xn5mgj4xgf] {
    background: #09090b !important;
    border-top-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .incident-info-card[b-xn5mgj4xgf] {
    background: #09090b !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .info-label[b-xn5mgj4xgf] {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .info-value[b-xn5mgj4xgf] {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .incident-type-btn[b-xn5mgj4xgf] {
    background: #27272a !important;
    border-color: #3f3f46 !important;
    color: #d1d5db !important;
}

[data-bs-theme="dark"] .incident-type-btn:hover[b-xn5mgj4xgf] {
    background: rgba(255, 193, 7, 0.1) !important;
    border-color: #ffc107 !important;
    color: #ffc107 !important;
}

[data-bs-theme="dark"] .incident-type-btn.active[b-xn5mgj4xgf] {
    background: rgba(220, 53, 69, 0.15) !important;
    border-color: #dc3545 !important;
    color: #f87171 !important;
}

[data-bs-theme="dark"] .existing-task-row[b-xn5mgj4xgf] {
    background: #27272a !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .modal-header-task[b-xn5mgj4xgf] {
    background: linear-gradient(135deg, #09090b, #18181b) !important;
}

[data-bs-theme="dark"] .form-group-label[b-xn5mgj4xgf] {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .section-header .section-title[b-xn5mgj4xgf] {
    color: #f3f4f6 !important;
}

/* ══════════════════════════════════════════════
   ORDER CHECK – CSS ADICIONAL
   Figma Modal + Express Actions + Timeline
   ══════════════════════════════════════════════ */

/* ─── BARRA DE ACCIONES RÁPIDAS ─── */
.quick-actions-bar[b-xn5mgj4xgf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    margin-bottom: 16px;
    border-radius: 12px;
    border: 1.5px dashed rgba(243, 156, 18, 0.4);
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.04) 0%, rgba(243, 156, 18, 0.01) 100%);
}

.quick-actions-label[b-xn5mgj4xgf] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #333;
}

.quick-actions-buttons[b-xn5mgj4xgf] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.qa-btn[b-xn5mgj4xgf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qa-btn:hover[b-xn5mgj4xgf] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.qa-incident[b-xn5mgj4xgf] {
    background: rgba(231, 76, 60, 0.08);
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.2);
}

.qa-incident:hover[b-xn5mgj4xgf] {
    background: rgba(231, 76, 60, 0.15);
}

.qa-note[b-xn5mgj4xgf] {
    background: rgba(52, 152, 219, 0.08);
    color: #3498db;
    border-color: rgba(52, 152, 219, 0.2);
}

.qa-note:hover[b-xn5mgj4xgf] {
    background: rgba(52, 152, 219, 0.15);
}

.qa-task[b-xn5mgj4xgf] {
    background: rgba(44, 62, 80, 0.08);
    color: #2c3e50;
    border-color: rgba(44, 62, 80, 0.2);
}

.qa-task:hover[b-xn5mgj4xgf] {
    background: rgba(44, 62, 80, 0.15);
}

/* ─── COLUMNA ACCIÓN EN GRID ─── */
.col-action[b-xn5mgj4xgf] {
    flex: 0 0 100px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── TABLE HEADER ─── */
.tbl-th[b-xn5mgj4xgf] {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 700;
    text-transform: uppercase;
}

/* ─── AVATAR ─── */
.avatar-circle[b-xn5mgj4xgf] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-weight: 700;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-circle-sm[b-xn5mgj4xgf] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-weight: 700;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ─── PRIORIDAD TAG (Figma) ─── */
.priority-tag[b-xn5mgj4xgf] {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.priority-normal[b-xn5mgj4xgf] {
    background: rgba(39, 174, 96, 0.1);
    color: #27ae60;
}

.priority-urgente[b-xn5mgj4xgf] {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

/* ─── INCIDENT ROW ─── */
.row-incident[b-xn5mgj4xgf] {
    border-left: 3px solid #e74c3c !important;
}

.incident-badge[b-xn5mgj4xgf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.25);
}

/* ══════════════════════════════════
   MODAL FIGMA (3 columnas)
   ══════════════════════════════════ */
.modal-figma[b-xn5mgj4xgf] {
    display: flex;
    width: 95vw;
    max-width: 1200px;
    max-height: 88vh;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.figma-col[b-xn5mgj4xgf] {
    padding: 24px;
    overflow-y: auto;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.figma-col:last-child[b-xn5mgj4xgf] {
    border-right: none;
}

.figma-col-info[b-xn5mgj4xgf] {
    flex: 0 0 35%;
    background: #fafafa;
}

.figma-col-timeline[b-xn5mgj4xgf] {
    flex: 0 0 35%;
}

.figma-col-tasks[b-xn5mgj4xgf] {
    flex: 0 0 30%;
    background: #fafafa;
}

/* Estado */
.figma-estado-row[b-xn5mgj4xgf] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.figma-label[b-xn5mgj4xgf] {
    font-weight: 600;
    font-size: 0.85rem;
}

.figma-estado-badge[b-xn5mgj4xgf] {
    padding: 4px 14px;
    border-radius: 20px;
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    font-weight: 700;
    font-size: 0.8rem;
}

/* Product card */
.figma-product-card[b-xn5mgj4xgf] {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 16px;
}

.figma-product-img[b-xn5mgj4xgf] {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.figma-product-info[b-xn5mgj4xgf] {
    flex: 1;
}

/* Metadata */
.figma-metadata[b-xn5mgj4xgf] {
    background: white;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 14px;
    margin-bottom: 16px;
}

.figma-meta-row[b-xn5mgj4xgf] {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.figma-meta-row:last-child[b-xn5mgj4xgf] {
    margin-bottom: 0;
}

.figma-meta-item[b-xn5mgj4xgf] {
    flex: 1;
}

.figma-meta-label[b-xn5mgj4xgf] {
    font-size: 0.7rem;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
}

.figma-meta-value[b-xn5mgj4xgf] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

/* Section title */
.figma-section-title[b-xn5mgj4xgf] {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #333;
    margin-bottom: 8px;
}

/* Incidencias table */
.figma-table[b-xn5mgj4xgf] {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.figma-table th[b-xn5mgj4xgf] {
    background: #f5f5f5;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    padding: 8px 12px;
    text-align: left;
}

.figma-table td[b-xn5mgj4xgf] {
    padding: 10px 12px;
    font-size: 0.85rem;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

/* Notes box */
.figma-notes-box[b-xn5mgj4xgf] {
    background: white;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 14px;
    font-size: 0.85rem;
    min-height: 60px;
    white-space: pre-wrap;
}

/* ─── TIMELINE ─── */
.timeline-list[b-xn5mgj4xgf] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.timeline-item[b-xn5mgj4xgf] {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-left: 2px solid #e0e0e0;
    margin-left: 13px;
    padding-left: 20px;
    position: relative;
}

.timeline-item:last-child[b-xn5mgj4xgf] {
    border-left-color: transparent;
}

.timeline-icon[b-xn5mgj4xgf] {
    position: absolute;
    left: -12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}

.tl-icon-check[b-xn5mgj4xgf] {
    background: #d4edda;
    color: #27ae60;
}

.tl-icon-error[b-xn5mgj4xgf] {
    background: #f8d7da;
    color: #e74c3c;
}

.tl-icon-task[b-xn5mgj4xgf] {
    background: #cce5ff;
    color: #3498db;
}

.tl-icon-note[b-xn5mgj4xgf] {
    background: #fff3cd;
    color: #f39c12;
}

.timeline-content[b-xn5mgj4xgf] {
    flex: 1;
    padding-left: 4px;
}

/* ─── TAREAS RELACIONADAS (Figma) ─── */
.figma-task-section[b-xn5mgj4xgf] {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    overflow: hidden;
}

.figma-task-section-header[b-xn5mgj4xgf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.02);
    font-size: 0.85rem;
}

.figma-task-section-header:hover[b-xn5mgj4xgf] {
    background: rgba(0, 0, 0, 0.04);
}

.figma-task-card[b-xn5mgj4xgf] {
    padding: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.figma-task-card.resolved[b-xn5mgj4xgf] {
    opacity: 0.7;
}

.figma-task-card-body[b-xn5mgj4xgf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.figma-empty-tasks[b-xn5mgj4xgf] {
    text-align: center;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn-close-modal-x[b-xn5mgj4xgf] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: #888;
    padding: 4px;
    line-height: 1;
}

.btn-close-modal-x:hover[b-xn5mgj4xgf] {
    color: #333;
}

/* ─── DISCUSSION ─── */
.discussion-messages[b-xn5mgj4xgf] {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.discussion-msg[b-xn5mgj4xgf] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

/* ─── EXPRESS MODALS ─── */
.modal-express[b-xn5mgj4xgf] {
    width: 440px;
    max-width: 95vw;
}

.modal-header-express[b-xn5mgj4xgf] {
    padding: 16px 20px;
    border-radius: 16px 16px 0 0;
}

/* ─── MODAL HEADER TASK ─── */
.modal-header-task[b-xn5mgj4xgf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    border-radius: 16px 16px 0 0;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 992px) {
    .modal-figma[b-xn5mgj4xgf] {
        flex-direction: column;
        max-height: 95vh;
    }

    .figma-col[b-xn5mgj4xgf] {
        flex: none !important;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .figma-col-info[b-xn5mgj4xgf],
    .figma-col-timeline[b-xn5mgj4xgf],
    .figma-col-tasks[b-xn5mgj4xgf] {
        max-height: 500px;
    }

    .quick-actions-bar[b-xn5mgj4xgf] {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}

@media (max-width: 767px) {
    .col-action[b-xn5mgj4xgf] {
        flex: 1 1 100%;
        justify-content: flex-start;
        padding-top: 8px;
    }

    .qa-btn[b-xn5mgj4xgf] {
        font-size: 0.75rem;
        padding: 6px 12px;
    }
}

/* ========================================= */
/* --- DARK MODE: FIGMA MODAL & QUICK ACTIONS --- */
/* ========================================= */

[data-bs-theme="dark"] .quick-actions-label[b-xn5mgj4xgf] {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .qa-incident[b-xn5mgj4xgf] {
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
    background: rgba(248, 113, 113, 0.1) !important;
}
[data-bs-theme="dark"] .qa-incident:hover[b-xn5mgj4xgf] {
    background: rgba(248, 113, 113, 0.2) !important;
}

[data-bs-theme="dark"] .qa-note[b-xn5mgj4xgf] {
    color: #60a5fa !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
    background: rgba(96, 165, 250, 0.1) !important;
}
[data-bs-theme="dark"] .qa-note:hover[b-xn5mgj4xgf] {
    background: rgba(96, 165, 250, 0.2) !important;
}

[data-bs-theme="dark"] .qa-task[b-xn5mgj4xgf] {
    color: #cbd5e1 !important;
    border-color: rgba(203, 213, 225, 0.3) !important;
    background: rgba(203, 213, 225, 0.1) !important;
}
[data-bs-theme="dark"] .qa-task:hover[b-xn5mgj4xgf] {
    background: rgba(203, 213, 225, 0.2) !important;
}

[data-bs-theme="dark"] .modal-figma[b-xn5mgj4xgf] {
    background: #18181b !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .figma-col[b-xn5mgj4xgf] {
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .figma-col-info[b-xn5mgj4xgf],
[data-bs-theme="dark"] .figma-col-tasks[b-xn5mgj4xgf] {
    background: #09090b !important;
}

[data-bs-theme="dark"] .figma-product-card[b-xn5mgj4xgf],
[data-bs-theme="dark"] .figma-metadata[b-xn5mgj4xgf],
[data-bs-theme="dark"] .figma-notes-box[b-xn5mgj4xgf] {
    background: #27272a !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .figma-product-img[b-xn5mgj4xgf] {
    background: #18181b !important;
}

[data-bs-theme="dark"] .figma-meta-label[b-xn5mgj4xgf],
[data-bs-theme="dark"] .figma-table th[b-xn5mgj4xgf] {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .figma-meta-value[b-xn5mgj4xgf],
[data-bs-theme="dark"] .figma-section-title[b-xn5mgj4xgf],
[data-bs-theme="dark"] .figma-label[b-xn5mgj4xgf],
[data-bs-theme="dark"] .figma-product-info h5[b-xn5mgj4xgf],
[data-bs-theme="dark"] .btn-close-modal-x:hover[b-xn5mgj4xgf] {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .figma-table[b-xn5mgj4xgf] {
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .figma-table th[b-xn5mgj4xgf] {
    background: #18181b !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .figma-table td[b-xn5mgj4xgf] {
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .timeline-item[b-xn5mgj4xgf] {
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .figma-task-section[b-xn5mgj4xgf] {
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .figma-task-section-header[b-xn5mgj4xgf] {
    background: #27272a !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .figma-task-section-header:hover[b-xn5mgj4xgf] {
    background: #3f3f46 !important;
}

[data-bs-theme="dark"] .figma-task-card[b-xn5mgj4xgf] {
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .btn-close-modal-x[b-xn5mgj4xgf] {
    color: #9ca3af !important;
}
/* /Pages/Purchasing/PurchaseDetail.razor.rz.scp.css */
/* ── Page container ── */
.pd-page[b-39ud4ipc9e] {
    background-color: #f0f2f5;
    min-height: 100vh;
    padding: 24px 32px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ============================================================ */
/* MODULE NAV                                                    */
/* ============================================================ */
.pd-module-nav[b-39ud4ipc9e] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pd-btn-back[b-39ud4ipc9e] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e2a38;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.pd-btn-back:hover[b-39ud4ipc9e] {
    background: #f0f2f5;
    border-color: #94a3b8;
}

.pd-breadcrumb[b-39ud4ipc9e] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pd-tag[b-39ud4ipc9e] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    background: #eff6ff;
    color: #1d4ed8;
}

.pd-breadcrumb-current[b-39ud4ipc9e] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e2a38;
}

.pd-flow-hint[b-39ud4ipc9e] {
    margin-left: auto;
    font-size: 0.72rem;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 12px;
    white-space: nowrap;
}

/* ============================================================ */
/* ALERTS                                                        */
/* ============================================================ */
.pd-alert[b-39ud4ipc9e] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
}

.pd-alert-success[b-39ud4ipc9e] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

.pd-alert-error[b-39ud4ipc9e] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.pd-alert-warn[b-39ud4ipc9e] {
    background: #fffbeb;
    border: 1px solid #fed7aa;
    color: #92400e;
}

/* ============================================================ */
/* PAGE HEADER                                                   */
/* ============================================================ */
.pd-header[b-39ud4ipc9e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.pd-title[b-39ud4ipc9e] {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1e2a38;
    margin: 0;
    line-height: 1.2;
}

.pd-subtitle[b-39ud4ipc9e] {
    font-size: 0.88rem;
    color: #64748b;
    margin: 4px 0 0;
}

.pd-header-actions[b-39ud4ipc9e] {
    display: flex;
    gap: 8px;
    background: #fff;
    padding: 6px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    align-items: center;
    flex-wrap: wrap;
}

.pd-act-btn[b-39ud4ipc9e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 650;
    font-size: 0.82rem;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.pd-act-ghost[b-39ud4ipc9e] {
    background: transparent;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.pd-act-ghost:hover[b-39ud4ipc9e] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1e2a38;
}

.pd-act-save[b-39ud4ipc9e] {
    background: #16a34a;
    color: #fff;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}

.pd-act-save:hover[b-39ud4ipc9e] {
    background: #15803d;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.32);
}

.pd-act-save:disabled[b-39ud4ipc9e] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.pd-act-divider[b-39ud4ipc9e] {
    width: 1px;
    height: 24px;
    background: #e2e8f0;
    flex-shrink: 0;
}

/* ============================================================ */

/* ============================================================ */
/* SHARED BUTTONS                                                */
/* ============================================================ */
.pd-btn-outline[b-39ud4ipc9e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: transparent;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.pd-btn-outline:hover[b-39ud4ipc9e] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1e2a38;
}

.pd-btn-solid[b-39ud4ipc9e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: #1e2a38;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(30, 42, 56, 0.2);
}

.pd-btn-solid:hover[b-39ud4ipc9e] {
    background: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(30, 42, 56, 0.3);
}

.pd-btn-solid:disabled[b-39ud4ipc9e] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}


/* DARK MODE                                                     */
/* ============================================================ */
[data-bs-theme="dark"] .pd-page[b-39ud4ipc9e] {
    background-color: #09090b;
}

[data-bs-theme="dark"] .pd-history-panel[b-39ud4ipc9e] {
    background: #111111 !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pd-history-panel-title[b-39ud4ipc9e] {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .pd-history-card[b-39ud4ipc9e] {
    background: #18181b !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pd-history-card-top[b-39ud4ipc9e] {
    border-bottom-color: #27272a !important;
}

[data-bs-theme="dark"] .pd-history-card-bottom[b-39ud4ipc9e] {
    background: #09090b !important;
}

[data-bs-theme="dark"] .pd-history-order-val[b-39ud4ipc9e] {
    color: #e5e7eb !important;
}

[data-bs-theme="dark"] .pd-btn-copy[b-39ud4ipc9e] {
    background: #27272a !important;
    border-color: #3f3f46 !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .pd-btn-copy:hover[b-39ud4ipc9e] {
    background: #1e3a8a !important;
    border-color: #3b82f6 !important;
    color: #60a5fa !important;
}

[data-bs-theme="dark"] .pd-title[b-39ud4ipc9e],
[data-bs-theme="dark"] .pd-breadcrumb-current[b-39ud4ipc9e],
[data-bs-theme="dark"] .pd-card-title[b-39ud4ipc9e],
[data-bs-theme="dark"] .pd-asin-result-name[b-39ud4ipc9e],
[data-bs-theme="dark"] .pd-band-name[b-39ud4ipc9e],
[data-bs-theme="dark"] .pd-total-value[b-39ud4ipc9e] {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .pd-subtitle[b-39ud4ipc9e],
[data-bs-theme="dark"] .pd-hint[b-39ud4ipc9e],
[data-bs-theme="dark"] .pd-label[b-39ud4ipc9e],
[data-bs-theme="dark"] .pd-flow-hint[b-39ud4ipc9e] {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .pd-card[b-39ud4ipc9e],
[data-bs-theme="dark"] .pd-header-actions[b-39ud4ipc9e],
[data-bs-theme="dark"] .pd-btn-back[b-39ud4ipc9e] {
    background: #18181b !important;
    border-color: #3f3f46 !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .pd-asin-card[b-39ud4ipc9e] {
    background: linear-gradient(135deg, #0c1526 0%, #18181b 60%) !important;
    border-left-color: #3B82F6 !important;
}

[data-bs-theme="dark"] .pd-card-header[b-39ud4ipc9e] {
    border-bottom-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pd-input[b-39ud4ipc9e],
[data-bs-theme="dark"] .pd-asin-input[b-39ud4ipc9e] {
    background: #09090b !important;
    border-color: #3f3f46 !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .pd-input:focus[b-39ud4ipc9e],
[data-bs-theme="dark"] .pd-asin-input:focus[b-39ud4ipc9e] {
    background: #18181b !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.15) !important;
}

[data-bs-theme="dark"] .pd-input-prefix[b-39ud4ipc9e] {
    background: #27272a !important;
    border-color: #3f3f46 !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .pd-select[b-39ud4ipc9e] {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f3f4f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
}

[data-bs-theme="dark"] .pd-totals[b-39ud4ipc9e] {
    background: #111111 !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pd-asin-result[b-39ud4ipc9e] {
    background: #052e16 !important;
    border-color: #166534 !important;
}

[data-bs-theme="dark"] .pd-act-ghost[b-39ud4ipc9e] {
    color: #9ca3af !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pd-act-ghost:hover[b-39ud4ipc9e] {
    background: #27272a !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .pd-btn-outline[b-39ud4ipc9e] {
    color: #9ca3af !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pd-btn-outline:hover[b-39ud4ipc9e] {
    background: #27272a !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .pd-form-footer[b-39ud4ipc9e] {
    border-top-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pd-asin-clear[b-39ud4ipc9e] {
    background: #3f3f46 !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .pd-hint-demo[b-39ud4ipc9e] {
    background: #422006 !important;
    border-color: #78350f !important;
    color: #fbbf24 !important;
}

[data-bs-theme="dark"] .pd-hint-demo code[b-39ud4ipc9e] {
    background: #78350f !important;
    color: #fef3c7 !important;
}


:root[b-39ud4ipc9e] {
    --primary-soft: #eef2ff;
    --primary-strong: #4f46e5;
    --primary-hover: #4338ca;
    --multicaja-soft: #EEEDFE;
    --multicaja-mid: #CECBF6;
    --multicaja-strong: #534AB7;
    --multicaja-dark: #3C3489;
    --multicaja-darkest: #26215C;
    --text-dark: #1f2937;
    --text-gray: #6b7280;
    --text-tertiary: #9ca3af;
    --border-subtle: #e5e7eb;
    --surface-white: #ffffff;
    --bg-body: #f9fafb;
    --border-radius-md: 8px;
    --border-radius-lg: 10px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.pd-container[b-39ud4ipc9e] { max-width: 1400px; margin: 0 auto; padding: 1rem 1.25rem; background-color: var(--bg-body); font-family: system-ui, -apple-system, sans-serif; }
.pd-container *[b-39ud4ipc9e] { box-sizing: border-box; }

/* ─── HEADER COMPACTO ─── */
.pd-header-compact[b-39ud4ipc9e] {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 20px;
    padding: 16px 24px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.pd-h-left[b-39ud4ipc9e] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-back-btn[b-39ud4ipc9e] {
    background: transparent;
    border: 0;
    color: var(--text-gray);
    padding: 4px 8px;
    font-size: 0.825rem;
    cursor: pointer;
    border-radius: var(--border-radius-md);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pd-back-btn:hover[b-39ud4ipc9e] { background: var(--bg-body); color: var(--primary-strong); }
.pd-folio[b-39ud4ipc9e] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1e2a38;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing: 0.5px;
}
.pd-status-pill[b-39ud4ipc9e] {
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pd-h-right[b-39ud4ipc9e] { display: flex; gap: 8px; }
.pd-h-meta[b-39ud4ipc9e] {
    font-size: 0.78rem;
    color: var(--text-gray);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 12px;
    border-left: 1px solid var(--border-subtle);
}
.pd-h-meta-strong[b-39ud4ipc9e] { color: var(--text-dark); font-weight: 500; }

/* ─── TOP GRID: 3 CARDS ─── */
.pd-top-grid[b-39ud4ipc9e] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
@media (max-width: 1000px) {
    .pd-top-grid[b-39ud4ipc9e] { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .pd-top-grid[b-39ud4ipc9e] { grid-template-columns: 1fr; }
}
.pd-card[b-39ud4ipc9e] { background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.04); }
.pd-card-title[b-39ud4ipc9e] { font-size: 0.95rem; font-weight: 700; color: #1e2a38; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: normal; }
.pd-card-title i[b-39ud4ipc9e] { color: var(--primary-strong); font-size: 0.9rem; }
.pd-field-row[b-39ud4ipc9e] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.82rem;
    gap: 8px;
}
.pd-field-row:last-child[b-39ud4ipc9e] { border-bottom: none; }
.pd-field-label[b-39ud4ipc9e] {
    color: var(--text-gray);
    flex-shrink: 0;
}
.pd-field-value[b-39ud4ipc9e] {
    color: var(--text-dark);
    font-weight: 500;
    text-align: right;
    max-width: 65%;
    word-break: break-word;
}
.pd-field-mono[b-39ud4ipc9e] { font-family: monospace; font-size: 0.78rem; }
.pd-field-eta[b-39ud4ipc9e] { color: var(--multicaja-strong); font-weight: 600; }

.pd-channel-pill[b-39ud4ipc9e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #E6F1FB;
    color: #185FA5;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 500;
}

/* Card de TOTALES con énfasis */
.pd-card-totals[b-39ud4ipc9e] {
    background: linear-gradient(135deg, #fafbfc 0%, #f3f4f6 100%);
    border-color: var(--border-subtle);
}
.pd-totals-section[b-39ud4ipc9e] { margin-bottom: 8px; }
.pd-totals-label[b-39ud4ipc9e] {
    font-size: 0.7rem;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pd-totals-big[b-39ud4ipc9e] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-strong);
    line-height: 1.1;
    margin-top: 2px;
}
.pd-totals-mxn[b-39ud4ipc9e] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.1;
    margin-top: 2px;
}
.pd-totals-meta[b-39ud4ipc9e] {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
}

/* ─── SPLIT PRINCIPAL: SIDEBAR + ITEMS ─── */
.pd-main-split[b-39ud4ipc9e] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 1100px) {
    .pd-main-split[b-39ud4ipc9e] { grid-template-columns: 1fr; }
}

/* Notas card cuando existen */
.pd-notes-banner[b-39ud4ipc9e] {
    background: #FEF9C3;
    border: 1px solid #FDE68A;
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: #78350F;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── SIDEBAR DE GUÍAS ─── */
.pd-tk-panel[b-39ud4ipc9e] {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 20px;
    padding: 24px;
    align-self: start;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.pd-tk-header[b-39ud4ipc9e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.pd-tk-title-h[b-39ud4ipc9e] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.pd-tk-title-h i[b-39ud4ipc9e] { color: var(--primary-strong); }
.pd-tk-add-btn[b-39ud4ipc9e] {
    background: var(--primary-soft);
    color: var(--primary-strong);
    border: 0;
    padding: 4px 10px;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}
.pd-tk-add-btn:hover[b-39ud4ipc9e] { background: var(--primary-strong); color: white; }

.pd-tk-list-vert[b-39ud4ipc9e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pd-tk-card[b-39ud4ipc9e] {
    background: var(--bg-body);
    border: 1.5px solid transparent;
    border-radius: var(--border-radius-md);
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.pd-tk-card:hover[b-39ud4ipc9e] { border-color: var(--border-subtle); transform: translateX(2px); }
.pd-tk-card.tk-active[b-39ud4ipc9e] {
    background: var(--primary-soft);
    border-color: var(--primary-strong);
}
.pd-tk-num[b-39ud4ipc9e] {
    font-family: monospace;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.78rem;
    word-break: break-all;
    line-height: 1.3;
    padding-right: 40px;
}
.pd-tk-actions[b-39ud4ipc9e] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 2px;
}
.pd-tk-icon-btn[b-39ud4ipc9e] {
    background: transparent;
    border: 0;
    color: var(--text-gray);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 0.75rem;
}
.pd-tk-icon-btn:hover[b-39ud4ipc9e] { background: white; color: var(--primary-strong); }
.pd-tk-icon-btn.danger:hover[b-39ud4ipc9e] { color: #dc2626; }
.pd-tk-meta[b-39ud4ipc9e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--text-gray);
}
.pd-tk-pill[b-39ud4ipc9e] {
    background: var(--primary-strong);
    color: white;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
}
.pd-tk-empty[b-39ud4ipc9e] {
    text-align: center;
    padding: 20px 8px;
    color: var(--text-tertiary);
    font-size: 0.78rem;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--border-radius-md);
}
.pd-tk-tip[b-39ud4ipc9e] {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin: 8px 0 0;
    text-align: center;
}

/* ─── PANEL DE PIEZAS ─── */
.pd-items-panel[b-39ud4ipc9e] {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.pd-items-header[b-39ud4ipc9e] {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.pd-items-title[b-39ud4ipc9e] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    flex-wrap: wrap;
}
.pd-items-title i[b-39ud4ipc9e] { color: var(--primary-strong); }
.pd-multicaja-tag-h[b-39ud4ipc9e] {
    color: var(--multicaja-strong);
    font-weight: 500;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.pd-priority-tag-h[b-39ud4ipc9e] {
    color: #BA7517;
    font-weight: 500;
    font-size: 0.78rem;
}
.pd-tracking-tag-h[b-39ud4ipc9e] {
    color: var(--primary-strong);
    font-weight: 500;
    font-size: 0.78rem;
}

/* Filtros */
.pd-chips[b-39ud4ipc9e] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.pd-chip[b-39ud4ipc9e] {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--bg-body);
    color: var(--text-gray);
    border: 1px solid var(--border-subtle);
    transition: all 0.15s;
}
.pd-chip:hover[b-39ud4ipc9e] { background: var(--primary-soft); color: var(--primary-strong); }
.pd-chip.active[b-39ud4ipc9e] {
    background: var(--primary-strong);
    color: white;
    border-color: var(--primary-strong);
}
.pd-chip.multicaja-chip[b-39ud4ipc9e] {
    background: var(--multicaja-soft);
    color: var(--multicaja-strong);
    border-color: var(--multicaja-mid);
}
.pd-chip.multicaja-chip:hover[b-39ud4ipc9e] { background: var(--multicaja-mid); color: var(--multicaja-darkest); }
.pd-chip.multicaja-chip.active[b-39ud4ipc9e] {
    background: var(--multicaja-strong);
    color: white;
    border-color: var(--multicaja-strong);
}

/* Tabla */
.pd-table[b-39ud4ipc9e] { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.pd-table thead[b-39ud4ipc9e] { background: var(--bg-body); }
.pd-table th[b-39ud4ipc9e] {
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-gray);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pd-table td[b-39ud4ipc9e] {
    padding: 9px 12px;
    border-bottom: 1px solid #f3f4f6;
    color: var(--text-dark);
    vertical-align: middle;
}
.pd-table tbody tr.priority-row[b-39ud4ipc9e] { background: #fffbeb; border-left: 3px solid #f59e0b; }
.pd-table tbody tr.no-tracking-row:not(.priority-row)[b-39ud4ipc9e] { background: #fef9f3; }
.pd-table tbody tr.selected-row[b-39ud4ipc9e] { background: var(--primary-soft) !important; }
.pd-table tbody tr:hover[b-39ud4ipc9e] { background: #fafbfc; }

/* ─── BANDA DE UNIDAD MULTICAJA (índigo) ─── */
.pd-table tbody tr.unit-band-row td[b-39ud4ipc9e] {
    background: var(--multicaja-soft);
    border-top: 1.5px solid var(--multicaja-strong);
    border-bottom: 1px solid var(--multicaja-mid);
    padding: 9px 14px;
}
.pd-table tbody tr.unit-band-row td:first-child[b-39ud4ipc9e] {
    border-left: 4px solid var(--multicaja-strong);
}
.unit-band-content[b-39ud4ipc9e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.unit-band-info[b-39ud4ipc9e] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.unit-band-title[b-39ud4ipc9e] {
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--multicaja-darkest);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.unit-band-asin[b-39ud4ipc9e] {
    font-family: monospace;
    background: white;
    padding: 2px 8px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--multicaja-mid);
    color: var(--multicaja-dark);
    font-size: 0.74rem;
}
.unit-band-name[b-39ud4ipc9e] {
    color: var(--multicaja-dark);
    font-weight: 500;
    font-size: 0.74rem;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.unit-band-count-pill[b-39ud4ipc9e] {
    background: var(--multicaja-strong);
    color: white;
    padding: 1px 9px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
}
.unit-band-select-btn[b-39ud4ipc9e] {
    background: white;
    border: 1px solid var(--multicaja-strong);
    color: var(--multicaja-dark);
    padding: 3px 10px;
    border-radius: var(--border-radius-md);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}
.unit-band-select-btn:hover[b-39ud4ipc9e] {
    background: var(--multicaja-soft);
    border-color: var(--multicaja-darkest);
}

/* Caja-only tag (sin ASIN) en filas multicaja */
.caja-only-tag[b-39ud4ipc9e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: monospace;
    font-size: 0.74rem;
    color: var(--multicaja-dark);
    background: var(--multicaja-soft);
    padding: 2px 9px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--multicaja-mid);
    font-weight: 600;
}
/* "parte de la unidad" sublabel */
.product-secondary[b-39ud4ipc9e] {
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Pills tracking en celda */
.tracking-cell-pill[b-39ud4ipc9e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--primary-soft);
    color: var(--primary-strong);
    border-radius: 12px;
    font-size: 0.72rem;
    font-family: monospace;
    font-weight: 500;
}
.tracking-cell-empty[b-39ud4ipc9e] {
    color: #d97706;
    font-size: 0.74rem;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.row-checkbox[b-39ud4ipc9e] { width: 14px; height: 14px; cursor: pointer; accent-color: var(--primary-strong); vertical-align: middle; }

/* Botones */
.btn-icon-text[b-39ud4ipc9e] { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: var(--border-radius-md); font-weight: 600; cursor: pointer; padding: 6px 12px; font-size: 0.78rem; border: none; transition: all 0.15s; }
.btn-primary-solid[b-39ud4ipc9e] { background: var(--primary-strong); color: white; box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2); }
.btn-primary-solid:hover[b-39ud4ipc9e] { background: var(--primary-hover); }
.btn-secondary-ghost[b-39ud4ipc9e] { background: var(--surface-white); border: 1px solid var(--border-subtle); color: var(--text-dark); }
.btn-secondary-ghost:hover[b-39ud4ipc9e] { background: var(--bg-body); border-color: var(--primary-strong); color: var(--primary-strong); }

/* Selection bar */
.selection-bar[b-39ud4ipc9e] {
    background: var(--primary-soft);
    border: 1px solid var(--primary-strong);
    border-radius: 0;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.selection-count[b-39ud4ipc9e] { color: var(--primary-strong); font-weight: 600; font-size: 0.82rem; }
.selection-actions[b-39ud4ipc9e] { display: flex; gap: 6px; align-items: center; }

/* Dropdown asignación */
.assign-dropdown[b-39ud4ipc9e] { position: relative; display: inline-block; }
.assign-dropdown-menu[b-39ud4ipc9e] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: white;
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    min-width: 240px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
}
.assign-option[b-39ud4ipc9e] {
    padding: 9px 12px;
    cursor: pointer;
    font-size: 0.82rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #f3f4f6;
}
.assign-option:last-child[b-39ud4ipc9e] { border-bottom: none; }
.assign-option:hover[b-39ud4ipc9e] { background: var(--primary-soft); color: var(--primary-strong); }
.assign-option-special[b-39ud4ipc9e] { color: var(--primary-strong); font-weight: 600; }
.assign-option-clear[b-39ud4ipc9e] { color: #dc2626; }

/* Modal */
.tk-modal-backdrop[b-39ud4ipc9e] { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.tk-modal[b-39ud4ipc9e] { background: white; border-radius: var(--border-radius-lg); padding: 22px; width: 100%; max-width: 480px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2); }
.tk-modal-title[b-39ud4ipc9e] { font-size: 1.15rem; font-weight: 700; margin: 0 0 14px; color: var(--text-dark); }
.tk-form-grid[b-39ud4ipc9e] { display: grid; gap: 12px; }
.tk-form-group[b-39ud4ipc9e] { display: flex; flex-direction: column; gap: 4px; }
.tk-form-label[b-39ud4ipc9e] { font-size: 0.78rem; font-weight: 600; color: var(--text-dark); }
.tk-form-input[b-39ud4ipc9e] { padding: 8px 11px; border: 1px solid var(--border-subtle); border-radius: var(--border-radius-md); font-size: 0.85rem; outline: none; }
.tk-form-input:focus[b-39ud4ipc9e] { border-color: var(--primary-strong); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
.tk-modal-footer[b-39ud4ipc9e] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.tk-modal-info[b-39ud4ipc9e] { background: var(--primary-soft); padding: 9px 12px; border-radius: var(--border-radius-md); font-size: 0.82rem; color: var(--primary-strong); margin-bottom: 12px; }

.pd-alert-error[b-39ud4ipc9e] { padding: 10px 14px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: var(--border-radius-md); margin-bottom: 12px; font-size: 0.82rem; }

/* Toasts */
.toast-container[b-39ud4ipc9e] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 400px;
}
.toast[b-39ud4ipc9e] {
    background: white;
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-md);
    padding: 11px 14px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    pointer-events: auto;
    animation: toastIn-b-39ud4ipc9e 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 280px;
}
.toast-success[b-39ud4ipc9e] { border-left: 4px solid #10b981; }
.toast-success .toast-icon[b-39ud4ipc9e] { color: #10b981; }
.toast-error[b-39ud4ipc9e] { border-left: 4px solid #dc2626; }
.toast-error .toast-icon[b-39ud4ipc9e] { color: #dc2626; }
.toast-icon[b-39ud4ipc9e] { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.toast-message[b-39ud4ipc9e] { font-size: 0.82rem; color: var(--text-dark); flex: 1; line-height: 1.4; }
.toast-close[b-39ud4ipc9e] { background: transparent; border: 0; color: var(--text-gray); cursor: pointer; padding: 0; font-size: 1rem; flex-shrink: 0; }
.toast-close:hover[b-39ud4ipc9e] { color: var(--text-dark); }
.toast.toast-leaving[b-39ud4ipc9e] { animation: toastOut-b-39ud4ipc9e 0.2s ease-in forwards; }
@keyframes toastIn-b-39ud4ipc9e {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut-b-39ud4ipc9e {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
}

/* /Pages/Purchasing/PurchasingDetails.razor.rz.scp.css */
/* ============================================================ */
/* PURCHASING DETAILS — Premium Bento-style                     */
/* ============================================================ */

/* ── Page container ── */
.pd-page[b-ug3x8o2wzj] {
    background-color: #f0f2f5;
    min-height: 100vh;
    padding: 24px 32px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ============================================================ */
/* MODULE NAV                                                    */
/* ============================================================ */
.pd-module-nav[b-ug3x8o2wzj] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pd-btn-back[b-ug3x8o2wzj] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e2a38;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.pd-btn-back:hover[b-ug3x8o2wzj] {
    background: #f0f2f5;
    border-color: #94a3b8;
}

.pd-breadcrumb[b-ug3x8o2wzj] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pd-tag[b-ug3x8o2wzj] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    background: #eff6ff;
    color: #1d4ed8;
}

.pd-breadcrumb-current[b-ug3x8o2wzj] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e2a38;
}

.pd-flow-hint[b-ug3x8o2wzj] {
    margin-left: auto;
    font-size: 0.72rem;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 12px;
    white-space: nowrap;
}

/* ============================================================ */
/* ALERTS                                                        */
/* ============================================================ */
.pd-alert[b-ug3x8o2wzj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
}

.pd-alert-success[b-ug3x8o2wzj] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

.pd-alert-error[b-ug3x8o2wzj] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.pd-alert-warn[b-ug3x8o2wzj] {
    background: #fffbeb;
    border: 1px solid #fed7aa;
    color: #92400e;
}

/* ============================================================ */
/* PAGE HEADER                                                   */
/* ============================================================ */
.pd-header[b-ug3x8o2wzj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.pd-title[b-ug3x8o2wzj] {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1e2a38;
    margin: 0;
    line-height: 1.2;
}

.pd-subtitle[b-ug3x8o2wzj] {
    font-size: 0.88rem;
    color: #64748b;
    margin: 4px 0 0;
}

.pd-header-actions[b-ug3x8o2wzj] {
    display: flex;
    gap: 8px;
    background: #fff;
    padding: 6px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    align-items: center;
    flex-wrap: wrap;
}

.pd-act-btn[b-ug3x8o2wzj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 650;
    font-size: 0.82rem;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.pd-act-ghost[b-ug3x8o2wzj] {
    background: transparent;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.pd-act-ghost:hover[b-ug3x8o2wzj] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1e2a38;
}

.pd-act-save[b-ug3x8o2wzj] {
    background: #16a34a;
    color: #fff;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}

.pd-act-save:hover[b-ug3x8o2wzj] {
    background: #15803d;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.32);
}

.pd-act-save:disabled[b-ug3x8o2wzj] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.pd-act-divider[b-ug3x8o2wzj] {
    width: 1px;
    height: 24px;
    background: #e2e8f0;
    flex-shrink: 0;
}

/* ============================================================ */
/* CARDS                                                         */
/* ============================================================ */
.pd-card[b-ug3x8o2wzj] {
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.pd-asin-card[b-ug3x8o2wzj] {
    border-left: 4px solid #3B82F6;
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 60%);
}

.pd-card-header[b-ug3x8o2wzj] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f2f5;
}

.pd-card-icon[b-ug3x8o2wzj] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.pd-icon-blue[b-ug3x8o2wzj] {
    background: #eff6ff;
    color: #3B82F6;
}

.pd-icon-green[b-ug3x8o2wzj] {
    background: #dcfce7;
    color: #15803d;
}

.pd-card-title[b-ug3x8o2wzj] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e2a38;
    margin: 0;
    flex: 1;
}

.pd-step-badge[b-ug3x8o2wzj] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

/* ============================================================ */
/* HINT TEXT                                                      */
/* ============================================================ */
.pd-hint[b-ug3x8o2wzj] {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 16px;
    line-height: 1.5;
}

.pd-hint-demo[b-ug3x8o2wzj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 10px;
    background: #fffbeb;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    font-size: 0.78rem;
    color: #92400e;
}

.pd-hint-demo code[b-ug3x8o2wzj] {
    background: #fef3c7;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.78rem;
    color: #78350f;
    transition: background 0.15s;
}

.pd-hint-demo code:hover[b-ug3x8o2wzj] {
    background: #fde68a;
}

/* ============================================================ */
/* ASIN SEARCH ROW                                               */
/* ============================================================ */
.pd-asin-search-row[b-ug3x8o2wzj] {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.pd-asin-input-wrap[b-ug3x8o2wzj] {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.pd-asin-icon[b-ug3x8o2wzj] {
    position: absolute;
    left: 14px;
    font-size: 1.1rem;
    color: #94a3b8;
    pointer-events: none;
}

.pd-asin-input[b-ug3x8o2wzj] {
    width: 100%;
    height: 52px;
    padding: 0 42px 0 42px;
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    color: #1e2a38;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.pd-asin-input:focus[b-ug3x8o2wzj] {
    border-color: #3B82F6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.pd-asin-input[b-ug3x8o2wzj]::placeholder {
    color: #b0bcc8;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.pd-asin-clear[b-ug3x8o2wzj] {
    position: absolute;
    right: 10px;
    width: 28px;
    height: 28px;
    border: none;
    background: #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s;
}

.pd-asin-clear:hover[b-ug3x8o2wzj] {
    background: #cbd5e1;
    color: #1e2a38;
}

.pd-asin-search-btn[b-ug3x8o2wzj] {
    height: 52px;
    min-width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #1e2a38;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, transform 0.13s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(30, 42, 56, 0.2);
    flex-shrink: 0;
}

.pd-asin-search-btn:hover[b-ug3x8o2wzj] {
    background: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(30, 42, 56, 0.3);
}

.pd-asin-search-btn:disabled[b-ug3x8o2wzj] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* ============================================================ */
/* ASIN RESULT PREVIEW                                           */
/* ============================================================ */
.pd-asin-result[b-ug3x8o2wzj] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 4px solid #16a34a;
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 16px;
    animation: pd-slide-in-b-ug3x8o2wzj 0.3s ease;
}

@keyframes pd-slide-in-b-ug3x8o2wzj {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pd-asin-result-thumb[b-ug3x8o2wzj] {
    width: 50px;
    height: 50px;
    background: #dbeafe;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #3B82F6;
    flex-shrink: 0;
}

.pd-asin-result-info[b-ug3x8o2wzj] {
    flex: 1;
    min-width: 0;
}

.pd-asin-result-name[b-ug3x8o2wzj] {
    font-weight: 700;
    font-size: 0.92rem;
    color: #1e2a38;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-asin-result-meta[b-ug3x8o2wzj] {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pd-asin-tag[b-ug3x8o2wzj] {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    background: #1e2a38;
    color: #fff;
    letter-spacing: 0.5px;
}

.pd-asin-brand[b-ug3x8o2wzj] {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 500;
}

.pd-asin-result-status[b-ug3x8o2wzj] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #16a34a;
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
}

.pd-asin-result-status i[b-ug3x8o2wzj] {
    font-size: 1.2rem;
}

/* ============================================================ */
/* PRODUCT BAND (selected product sticky bar)                    */
/* ============================================================ */
.pd-product-band[b-ug3x8o2wzj] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #1e2a38 0%, #2d3e52 100%);
    border-radius: 14px;
    padding: 14px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.pd-band-thumb[b-ug3x8o2wzj] {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    flex-shrink: 0;
}

.pd-band-body[b-ug3x8o2wzj] {
    flex: 1;
    min-width: 0;
}

.pd-band-name[b-ug3x8o2wzj] {
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-band-meta[b-ug3x8o2wzj] {
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pd-band-meta .pd-asin-tag[b-ug3x8o2wzj] {
    background: rgba(255, 255, 255, 0.2);
}

.pd-band-meta .pd-asin-brand[b-ug3x8o2wzj] {
    color: rgba(255, 255, 255, 0.6);
}

.pd-band-change[b-ug3x8o2wzj] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.pd-band-change:hover[b-ug3x8o2wzj] {
    background: rgba(255, 255, 255, 0.2);
}

/* ============================================================ */
/* SUCCESS CARD                                                  */
/* ============================================================ */
.pd-success-card[b-ug3x8o2wzj] {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 16px;
    padding: 24px;
    flex-wrap: wrap;
}

.pd-success-icon[b-ug3x8o2wzj] {
    font-size: 2.5rem;
    color: #16a34a;
    flex-shrink: 0;
}

.pd-success-body[b-ug3x8o2wzj] {
    flex: 1;
    min-width: 180px;
}

.pd-success-title[b-ug3x8o2wzj] {
    font-weight: 800;
    font-size: 1.1rem;
    color: #15803d;
}

.pd-success-folio[b-ug3x8o2wzj] {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 2px;
}

.pd-success-actions[b-ug3x8o2wzj] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================ */
/* FORM GRID                                                     */
/* ============================================================ */
.pd-form-grid[b-ug3x8o2wzj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pd-field-full[b-ug3x8o2wzj] {
    grid-column: 1 / -1;
}

.pd-field[b-ug3x8o2wzj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pd-label[b-ug3x8o2wzj] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pd-label-hint[b-ug3x8o2wzj] {
    font-weight: 400;
    text-transform: none;
    font-size: 0.72rem;
    color: #94a3b8;
}

.pd-input[b-ug3x8o2wzj] {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-size: 0.92rem;
    font-weight: 500;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #1e2a38;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.pd-input:focus[b-ug3x8o2wzj] {
    border-color: #3B82F6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
}

.pd-input[b-ug3x8o2wzj]::placeholder {
    color: #b0bcc8;
    font-weight: 400;
}

.pd-input-error[b-ug3x8o2wzj] {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
}

.pd-input-ok[b-ug3x8o2wzj] {
    border-color: #16a34a !important;
    background: #f0fdf4 !important;
}

.pd-select[b-ug3x8o2wzj] {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 10px;
    cursor: pointer;
    padding-right: 36px;
}

.pd-input-wrap[b-ug3x8o2wzj] {
    position: relative;
}

.pd-field-spinner[b-ug3x8o2wzj] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.pd-field-msg[b-ug3x8o2wzj] {
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pd-field-msg-error[b-ug3x8o2wzj] {
    color: #dc2626;
}

.pd-field-msg-ok[b-ug3x8o2wzj] {
    color: #16a34a;
}

/* ── Input group ── */
.pd-input-group[b-ug3x8o2wzj] {
    display: flex;
    align-items: stretch;
}

.pd-input-prefix[b-ug3x8o2wzj] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: #e2e8f0;
    border: 2px solid #e2e8f0;
    border-right: none;
    border-radius: 10px 0 0 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
}

.pd-input-grouped[b-ug3x8o2wzj] {
    border-radius: 0 10px 10px 0 !important;
}

/* ============================================================ */
/* TOTALS                                                        */
/* ============================================================ */
.pd-totals[b-ug3x8o2wzj] {
    margin-top: 20px;
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pd-total-row[b-ug3x8o2wzj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pd-total-label[b-ug3x8o2wzj] {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-total-value[b-ug3x8o2wzj] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e2a38;
}

.pd-total-row-main[b-ug3x8o2wzj] {
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
}

.pd-total-big[b-ug3x8o2wzj] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #16a34a;
}

/* ============================================================ */
/* CONTEXTUAL INFO (PRODUCT BAND)                                */
/* ============================================================ */
.pd-band-context-info[b-ug3x8o2wzj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pd-context-label[b-ug3x8o2wzj] {
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pd-context-value[b-ug3x8o2wzj] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
}

.pd-context-divider[b-ug3x8o2wzj] {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.7rem;
}

/* ============================================================ */
/* PRICE HISTORY MINI (DISEÑO HORIZONTAL TIPO BADGE)            */
/* ============================================================ */
.pd-price-history-mini[b-ug3x8o2wzj] {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pd-history-title[b-ug3x8o2wzj] {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.5px;
}

.pd-history-items-row[b-ug3x8o2wzj] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pd-history-item[b-ug3x8o2wzj] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 8px;
    transition: background 0.15s;
}

.pd-hist-date[b-ug3x8o2wzj] {
    font-size: 0.68rem;
    color: #64748b;
    font-weight: 500;
}

.pd-hist-price[b-ug3x8o2wzj] {
    font-size: 0.7rem;
    font-weight: 800;
    color: #16a34a;
    /* Lo ponemos verde para destacar que es dinero */
}


.pd-tc-badge[b-ug3x8o2wzj] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: #e0f2fe;
    color: #0369a1;
}

/* ============================================================ */
/* FORM FOOTER                                                   */
/* ============================================================ */
.pd-form-footer[b-ug3x8o2wzj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f0f2f5;
    gap: 12px;
    flex-wrap: wrap;
}

/* ============================================================ */
/* SHARED BUTTONS                                                */
/* ============================================================ */
.pd-btn-outline[b-ug3x8o2wzj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: transparent;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.pd-btn-outline:hover[b-ug3x8o2wzj] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1e2a38;
}

.pd-btn-solid[b-ug3x8o2wzj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: #1e2a38;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(30, 42, 56, 0.2);
}

.pd-btn-solid:hover[b-ug3x8o2wzj] {
    background: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(30, 42, 56, 0.3);
}

.pd-btn-solid:disabled[b-ug3x8o2wzj] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ============================================================ */
/* ANIMATE                                                       */
/* ============================================================ */
@keyframes pd-fade-in-b-ug3x8o2wzj {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pd-card[b-ug3x8o2wzj] {
    animation: pd-fade-in-b-ug3x8o2wzj 0.3s ease;
}

/* ============================================================ */
/* DARK MODE                                                     */
/* ============================================================ */
[data-bs-theme="dark"] .pd-page[b-ug3x8o2wzj] {
    background-color: #09090b;
}

[data-bs-theme="dark"] .pd-history-panel[b-ug3x8o2wzj] {
    background: #111111 !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pd-history-panel-title[b-ug3x8o2wzj] {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .pd-history-card[b-ug3x8o2wzj] {
    background: #18181b !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pd-history-card-top[b-ug3x8o2wzj] {
    border-bottom-color: #27272a !important;
}

[data-bs-theme="dark"] .pd-history-card-bottom[b-ug3x8o2wzj] {
    background: #09090b !important;
}

[data-bs-theme="dark"] .pd-history-order-val[b-ug3x8o2wzj] {
    color: #e5e7eb !important;
}

[data-bs-theme="dark"] .pd-btn-copy[b-ug3x8o2wzj] {
    background: #27272a !important;
    border-color: #3f3f46 !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .pd-btn-copy:hover[b-ug3x8o2wzj] {
    background: #1e3a8a !important;
    border-color: #3b82f6 !important;
    color: #60a5fa !important;
}

[data-bs-theme="dark"] .pd-title[b-ug3x8o2wzj],
[data-bs-theme="dark"] .pd-breadcrumb-current[b-ug3x8o2wzj],
[data-bs-theme="dark"] .pd-card-title[b-ug3x8o2wzj],
[data-bs-theme="dark"] .pd-asin-result-name[b-ug3x8o2wzj],
[data-bs-theme="dark"] .pd-band-name[b-ug3x8o2wzj],
[data-bs-theme="dark"] .pd-total-value[b-ug3x8o2wzj] {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .pd-subtitle[b-ug3x8o2wzj],
[data-bs-theme="dark"] .pd-hint[b-ug3x8o2wzj],
[data-bs-theme="dark"] .pd-label[b-ug3x8o2wzj],
[data-bs-theme="dark"] .pd-flow-hint[b-ug3x8o2wzj] {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .pd-card[b-ug3x8o2wzj],
[data-bs-theme="dark"] .pd-header-actions[b-ug3x8o2wzj],
[data-bs-theme="dark"] .pd-btn-back[b-ug3x8o2wzj] {
    background: #18181b !important;
    border-color: #3f3f46 !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .pd-asin-card[b-ug3x8o2wzj] {
    background: linear-gradient(135deg, #0c1526 0%, #18181b 60%) !important;
    border-left-color: #3B82F6 !important;
}

[data-bs-theme="dark"] .pd-card-header[b-ug3x8o2wzj] {
    border-bottom-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pd-input[b-ug3x8o2wzj],
[data-bs-theme="dark"] .pd-asin-input[b-ug3x8o2wzj] {
    background: #09090b !important;
    border-color: #3f3f46 !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .pd-input:focus[b-ug3x8o2wzj],
[data-bs-theme="dark"] .pd-asin-input:focus[b-ug3x8o2wzj] {
    background: #18181b !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.15) !important;
}

[data-bs-theme="dark"] .pd-input-prefix[b-ug3x8o2wzj] {
    background: #27272a !important;
    border-color: #3f3f46 !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .pd-select[b-ug3x8o2wzj] {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f3f4f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
}

[data-bs-theme="dark"] .pd-totals[b-ug3x8o2wzj] {
    background: #111111 !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pd-asin-result[b-ug3x8o2wzj] {
    background: #052e16 !important;
    border-color: #166534 !important;
}

[data-bs-theme="dark"] .pd-act-ghost[b-ug3x8o2wzj] {
    color: #9ca3af !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pd-act-ghost:hover[b-ug3x8o2wzj] {
    background: #27272a !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .pd-btn-outline[b-ug3x8o2wzj] {
    color: #9ca3af !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pd-btn-outline:hover[b-ug3x8o2wzj] {
    background: #27272a !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .pd-form-footer[b-ug3x8o2wzj] {
    border-top-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .pd-asin-clear[b-ug3x8o2wzj] {
    background: #3f3f46 !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .pd-hint-demo[b-ug3x8o2wzj] {
    background: #422006 !important;
    border-color: #78350f !important;
    color: #fbbf24 !important;
}

[data-bs-theme="dark"] .pd-hint-demo code[b-ug3x8o2wzj] {
    background: #78350f !important;
    color: #fef3c7 !important;
}

/* ============================================================ */
/* RESPONSIVIDAD                                                 */
/* ============================================================ */
@media (max-width: 1100px) {
    .pd-form-grid[b-ug3x8o2wzj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pd-page[b-ug3x8o2wzj] {
        padding: 14px;
        gap: 12px;
    }

    .pd-header[b-ug3x8o2wzj] {
        flex-direction: column;
        align-items: flex-start;
    }

    .pd-header-actions[b-ug3x8o2wzj] {
        width: 100%;
    }

    .pd-form-grid[b-ug3x8o2wzj] {
        grid-template-columns: 1fr;
    }

    .pd-asin-search-row[b-ug3x8o2wzj] {
        flex-direction: column;
    }

    .pd-asin-search-btn[b-ug3x8o2wzj] {
        width: 100%;
    }

    .pd-success-card[b-ug3x8o2wzj] {
        flex-direction: column;
        text-align: center;
    }

    .pd-form-footer[b-ug3x8o2wzj] {
        flex-direction: column;
    }

    .pd-form-footer .pd-btn-outline[b-ug3x8o2wzj],
    .pd-form-footer .pd-btn-solid[b-ug3x8o2wzj] {
        width: 100%;
        justify-content: center;
    }

    .pd-product-band[b-ug3x8o2wzj] {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .pd-module-nav[b-ug3x8o2wzj] {
        flex-direction: column;
        align-items: flex-start;
    }

    .pd-flow-hint[b-ug3x8o2wzj] {
        margin-left: 0;
    }

    .pd-asin-result[b-ug3x8o2wzj] {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================================ */
/* SPLIT LAYOUT (Formulario + Sidebar Historial)                */
/* ============================================================ */
.pd-layout-split[b-ug3x8o2wzj] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.pd-layout-form[b-ug3x8o2wzj] {
    flex: 1;
    min-width: 0;
}

.pd-layout-sidebar[b-ug3x8o2wzj] {
    width: 280px;
    flex-shrink: 0;
}

/* Ajuste al grid cuando está en layout dividido */
.pd-form-grid-compact[b-ug3x8o2wzj] {
    grid-template-columns: repeat(3, 1fr);
}

/* ============================================================ */
/* SIDEBAR HISTORIAL DE COMPRAS                                 */
/* ============================================================ */
.pd-history-panel[b-ug3x8o2wzj] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    height: 100%;
}

.pd-history-panel-title[b-ug3x8o2wzj] {
    font-size: 0.85rem;
    font-weight: 800;
    color: #1e2a38;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pd-history-list[b-ug3x8o2wzj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pd-history-card[b-ug3x8o2wzj] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: transform 0.15s, box-shadow 0.15s;
}

.pd-history-card:hover[b-ug3x8o2wzj] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.pd-history-card-top[b-ug3x8o2wzj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #f1f5f9;
}

.pd-history-date[b-ug3x8o2wzj] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.pd-history-price[b-ug3x8o2wzj] {
    font-size: 0.85rem;
    font-weight: 800;
    color: #16a34a;
}

.pd-history-price small[b-ug3x8o2wzj] {
    font-size: 0.65rem;
    font-weight: 600;
}

.pd-history-card-bottom[b-ug3x8o2wzj] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    padding: 6px 8px;
    border-radius: 6px;
}

.pd-history-order-label[b-ug3x8o2wzj] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
}

.pd-history-order-val[b-ug3x8o2wzj] {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #1e2a38;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-btn-copy[b-ug3x8o2wzj] {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.pd-btn-copy:hover[b-ug3x8o2wzj] {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #3b82f6;
}

/* ============================================================ */
/* MEDIA QUERIES (Responsividad para el Split Layout)           */
/* ============================================================ */
@media (max-width: 992px) {
    .pd-layout-split[b-ug3x8o2wzj] {
        flex-direction: column;
    }

    .pd-layout-sidebar[b-ug3x8o2wzj] {
        width: 100%;
    }
}
/* /Pages/Purchasing/PurchasingQueryView.razor.rz.scp.css */
/* --- LAYOUT GLOBAL --- */
.maxima-layout[b-02fotkkuj0] {
    display: flex;
    height: 100vh;
    width: 100vw;
    background-color: #f4f6f9;
    font-family: 'Segoe UI', sans-serif;
    overflow: hidden;
}

.sidebar[b-02fotkkuj0] {
    width: 260px;
    background-color: #1e293b;
    color: white;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0;
    flex-shrink: 0;
}

.logo-area[b-02fotkkuj0] {
    display: flex;
    align-items: center;
    padding: 0 1.5rem 2rem 1.5rem;
    gap: 12px;
}

.logo-icon[b-02fotkkuj0] {
    width: 40px;
    height: 40px;
    background: white;
    color: #1e293b;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.brand-name[b-02fotkkuj0] {
    font-size: 1.5rem;
    font-weight: 700;
}

.nav-menu[b-02fotkkuj0] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 1rem;
}

.nav-item[b-02fotkkuj0] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: #94a3b8;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s;
}

.nav-item:hover[b-02fotkkuj0] {
    background-color: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

.nav-item.active[b-02fotkkuj0] {
    background-color: #3b82f6;
    color: white;
}

.nav-spacer[b-02fotkkuj0] {
    flex-grow: 1;
}

.main-content[b-02fotkkuj0] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.top-header[b-02fotkkuj0] {
    height: 70px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.avatar[b-02fotkkuj0] {
    width: 36px;
    height: 36px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.content-body[b-02fotkkuj0] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.user-actions[b-02fotkkuj0] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.icon-btn[b-02fotkkuj0] {
    border: none;
    background: none;
    color: #64748b;
    font-size: 1.2rem;
    cursor: pointer;
}

/* --- KPI CARDS --- */
.kpi-card[b-02fotkkuj0] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    border: 1px solid #e2e8f0;
    border-left-width: 5px;
    /* Borde grueso a la izquierda */
    height: 100%;
}

.border-l-primary[b-02fotkkuj0] {
    border-left-color: #3b82f6;
}

.border-l-warning[b-02fotkkuj0] {
    border-left-color: #f59e0b;
}

.border-l-success[b-02fotkkuj0] {
    border-left-color: #10b981;
}

.border-l-danger[b-02fotkkuj0] {
    border-left-color: #ef4444;
}

.kpi-label[b-02fotkkuj0] {
    display: block;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.kpi-value[b-02fotkkuj0] {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.kpi-sub[b-02fotkkuj0] {
    font-size: 0.85rem;
    color: #94a3b8;
}

.kpi-trend.positive[b-02fotkkuj0] {
    color: #10b981;
    font-weight: 600;
    font-size: 0.85rem;
}

/* --- FORMULARIOS --- */
.form-control[b-02fotkkuj0],
.form-select[b-02fotkkuj0],
.input-group-text[b-02fotkkuj0] {
    border-color: transparent;
    transition: all 0.2s;
}

.form-control:focus[b-02fotkkuj0],
.form-select:focus[b-02fotkkuj0] {
    background-color: white !important;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* --- TABLA --- */
.avatar-xs[b-02fotkkuj0] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.badge[b-02fotkkuj0] {
    font-weight: 600;
    letter-spacing: 0.3px;
}

.btn-link:hover[b-02fotkkuj0] {
    background-color: #f1f5f9;
    border-radius: 50%;
}
/* /Pages/Purchasing/PurchasingRecord.razor.rz.scp.css */
/* --- VARIABLES LOCALES --- */
:root[b-7z10wyuwbe] {
    --bg-body: #f4f6f8;
    --surface-white: #ffffff;
    --border-subtle: #e5e7eb;
    --text-dark: #1f2937;
    --text-gray: #6b7280;
    --primary-solid: #4f46e5;
    
    --purple: #a855f7;
    --blue: #3b82f6;
    --orange: #f97316;
    --green: #22c55e;
}

body[b-7z10wyuwbe] {
    background-color: var(--bg-body);
}

.purchasing-record-container[b-7z10wyuwbe] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 2rem 1.5rem 5rem 1.5rem;
    font-family: system-ui, -apple-system, sans-serif;
}

/* --- BUSCADOR --- */
.search-group[b-7z10wyuwbe] {
    position: relative;
    width: 750px;
    max-width: 100%;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-subtle);
    border-radius: 9999px;
    background-color: var(--surface-white);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    height: 52px;
}

.search-scope-select[b-7z10wyuwbe] {
    border: none;
    background-color: transparent;
    padding: 0 1rem 0 1.5rem;
    height: 100%;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    border-right: 1px solid var(--border-subtle);
    outline: none;
    cursor: pointer;
    min-width: 180px;
    /* Custom SVG Arrow */
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 10px 10px;
}

.search-input-wrapper[b-7z10wyuwbe] {
    position: relative;
    flex-grow: 1;
    height: 100%;
    display: flex;
    align-items: center;
}

.search-input-wrapper i[b-7z10wyuwbe] {
    position: absolute;
    left: 1.25rem;
    color: var(--text-gray);
    font-size: 1.1rem;
    pointer-events: none;
}

.input-modern[b-7z10wyuwbe] {
    width: 100%;
    height: 100%;
    padding: 0 1rem 0 3.2rem;
    color: var(--text-dark);
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    border: none;
}

.btn-search-icon[b-7z10wyuwbe] {
    height: 100%;
    width: 60px;
    background-color: var(--primary-solid);
    color: white;
    border: none;
    border-radius: 0 9999px 9999px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background 0.2s;
    flex-shrink: 0;
}

.btn-search-icon:hover[b-7z10wyuwbe] {
    background-color: #4338ca;
}

/* --- HEADER Y RESULTADOS --- */
.header-section[b-7z10wyuwbe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.title-main[b-7z10wyuwbe] {
    font-size: 1.9rem;
    color: var(--text-dark);
}

.title-secondary[b-7z10wyuwbe] {
    font-size: 1.5rem;
    line-height: 1.3;
}

.btn-filter-toggle[b-7z10wyuwbe] {
    background: #f1f3f5;
    border: 1px solid #dee2e6;
    color: var(--text-dark);
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-filter-toggle:hover[b-7z10wyuwbe] {
    background: #e9ecef;
}

/* CARDS COMUNES */
.main-card[b-7z10wyuwbe], .content-card[b-7z10wyuwbe] {
    background: var(--surface-white);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border-subtle);
    background-clip: border-box;
}

.table-wrapper[b-7z10wyuwbe] {
    overflow-x: auto;
}

/* TABLAS GENERALES */
.custom-table th[b-7z10wyuwbe] {
    font-size: 0.75rem;
    color: var(--text-gray);
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 1px solid var(--border-subtle);
    padding: 1rem 1.5rem;
    background: var(--surface-white);
    vertical-align: middle;
}

.custom-table td[b-7z10wyuwbe] {
    padding: 1.25rem 1.5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.custom-table tbody tr:last-child td[b-7z10wyuwbe] {
    border-bottom: none;
}

/* Estado Pill */
.status-pill[b-7z10wyuwbe] {
    padding: 0.4rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-block;
}

.status-completed[b-7z10wyuwbe] {
    background-color: #d1fae5;
    color: #059669;
}

/* Product img placeholder */
.product-img-placeholder[b-7z10wyuwbe] {
    width: 48px;
    height: 48px;
    background-color: #f1f3f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- PANEL SECUNDARIO --- */
.secondary-panel[b-7z10wyuwbe] {
    background-color: #e6eef5; /* Fondo pastel acorde a la referencia */
    border-radius: 20px;
    padding: 35px;
}

.chart-card[b-7z10wyuwbe] {
    display: flex;
    flex-direction: column;
}

/* TABLA LATERAL DERECHA (Side Table) */
.header-sticky[b-7z10wyuwbe] {
    position: relative;
}

.side-table th[b-7z10wyuwbe] {
    padding: 1.25rem 1.5rem;
    background-color: var(--surface-white);
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 0 var(--border-subtle);
}

.side-table td[b-7z10wyuwbe] {
    padding: 1.25rem 1.5rem;
}

/* --- ESTILOS DE LA GRÁFICA SVG --- */
.chart-grid-line[b-7z10wyuwbe] {
    stroke: #f1f3f5;
    stroke-width: 1;
}

.chart-label[b-7z10wyuwbe] {
    color: #adb5bd;
}

.stroke-purple[b-7z10wyuwbe] { stroke: var(--purple); }
.stroke-orange[b-7z10wyuwbe] { stroke: var(--orange); }
.stroke-blue[b-7z10wyuwbe] { stroke: var(--blue); }
.stroke-green[b-7z10wyuwbe] { stroke: var(--green); }

/* LEYENDA GRAFICA */
.legend-dot[b-7z10wyuwbe] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.bg-purple[b-7z10wyuwbe] { background-color: var(--purple); }
.bg-blue[b-7z10wyuwbe]   { background-color: var(--blue); }
.bg-orange[b-7z10wyuwbe] { background-color: var(--orange); }
.bg-green[b-7z10wyuwbe]  { background-color: var(--green); }


/* ========================================= */
/* --- DARK MODE OVERRIDES ---               */
/* ========================================= */

[data-bs-theme="dark"] .purchasing-record-container[b-7z10wyuwbe] {
    color: #e5e7eb !important;
}

/* Header & Titles */
[data-bs-theme="dark"] .title-main[b-7z10wyuwbe],
[data-bs-theme="dark"] .title-secondary[b-7z10wyuwbe],
[data-bs-theme="dark"] .text-dark[b-7z10wyuwbe] {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .text-muted[b-7z10wyuwbe] {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .btn-filter-toggle[b-7z10wyuwbe] {
    background-color: #27272a !important;
    border-color: #3f3f46 !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .btn-filter-toggle:hover[b-7z10wyuwbe] {
    background-color: #3f3f46 !important;
}

/* Buscar Top */
[data-bs-theme="dark"] .search-group[b-7z10wyuwbe] {
    background-color: #18181b !important;
    border-color: #3f3f46 !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .search-scope-select[b-7z10wyuwbe] {
    color: #f3f4f6 !important;
    border-right-color: #3f3f46 !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f3f4f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
}

[data-bs-theme="dark"] .search-scope-select option[b-7z10wyuwbe] {
    background-color: #18181b !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .input-modern[b-7z10wyuwbe] {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .btn-search-icon[b-7z10wyuwbe] {
    box-shadow: none !important;
}

/* Paneles & Cards */
[data-bs-theme="dark"] .secondary-panel[b-7z10wyuwbe] {
    background-color: #18181b !important; /* Panel de fondo interior */
    border: 1px solid #27272a !important;
}

[data-bs-theme="dark"] .main-card[b-7z10wyuwbe],
[data-bs-theme="dark"] .content-card[b-7z10wyuwbe] {
    background-color: #09090b !important;
    border-color: #27272a !important;
    box-shadow: none !important;
}

/* Botones en Gráfica y generales */
[data-bs-theme="dark"] .btn-dark[b-7z10wyuwbe],
[data-bs-theme="dark"] .btn-group .btn-light[b-7z10wyuwbe] {
    background-color: #27272a !important;
    color: #f3f4f6 !important;
    border-color: #3f3f46 !important;
}

[data-bs-theme="dark"] .btn-group .btn-light.active[b-7z10wyuwbe] {
    background-color: #3f3f46 !important;
    color: #fff !important;
}

/* Tabla Superior e Inferior */
[data-bs-theme="dark"] .custom-table th[b-7z10wyuwbe],
[data-bs-theme="dark"] .side-table th[b-7z10wyuwbe] {
    background-color: #09090b !important;
    border-bottom-color: #27272a !important;
    color: #9ca3af !important;
    box-shadow: 0 1px 0 #27272a !important;
}

[data-bs-theme="dark"] .custom-table td[b-7z10wyuwbe],
[data-bs-theme="dark"] .side-table td[b-7z10wyuwbe] {
    border-bottom-color: #27272a !important;
}

/* Imagen Placeholder */
[data-bs-theme="dark"] .product-img-placeholder[b-7z10wyuwbe] {
    background-color: #27272a !important;
}
[data-bs-theme="dark"] .shadow-sm[b-7z10wyuwbe] {
    box-shadow: none !important;
}

/* Status Pill */
[data-bs-theme="dark"] .status-completed[b-7z10wyuwbe] {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

/* Utilidades / SVG Chart lines */
[data-bs-theme="dark"] .bg-white[b-7z10wyuwbe] {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .bg-light[b-7z10wyuwbe] {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .chart-grid-line[b-7z10wyuwbe] {
    stroke: #3f3f46 !important;
}

[data-bs-theme="dark"] .chart-label[b-7z10wyuwbe] {
    color: #6b7280 !important;
}
/* /Pages/Purchasing/PurchasingReports.razor.rz.scp.css */
/* ========================================= */
/* --- GENERAL LAYOUT & CARDS               */
/* ========================================= */
.reports-container[b-hyftwyfghw] {
    max-width: 1400px;
    margin: 0 auto;
}

.title-main[b-hyftwyfghw] {
    color: var(--text-dark, #1f2937);
    letter-spacing: -0.5px;
}

.btn-back-icon[b-hyftwyfghw] {
    color: var(--text-dark, #1f2937) !important;
    transition: transform 0.2s, color 0.2s;
    background-color: white;
}

.btn-back-icon:hover[b-hyftwyfghw] {
    color: #6366f1 !important;
    transform: scale(1.05);
}

.filter-card[b-hyftwyfghw] {
    background-color: var(--surface-white, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.content-card[b-hyftwyfghw] {
    background-color: var(--surface-white, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.divider-hr[b-hyftwyfghw] {
    height: 1px;
    background-color: var(--border-color, #e5e7eb);
    width: 100%;
}

/* ========================================= */
/* --- FLOATING LABELS (MATERIAL STYLE)    */
/* ========================================= */
.floating-field-container[b-hyftwyfghw] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.floating-label[b-hyftwyfghw] {
    position: absolute;
    top: -9px;
    left: 12px;
    background-color: var(--surface-white, #ffffff);
    padding: 0 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary, #6b7280);
    z-index: 2;
    transition: color 0.2s;
}

.form-input-floating[b-hyftwyfghw],
.form-select-floating[b-hyftwyfghw] {
    width: 100%;
    height: 46px;
    background-color: transparent;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    padding: 0 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark, #1f2937);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.form-select-floating[b-hyftwyfghw] {
    cursor: pointer;
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 12px;
}

.form-input-floating[b-hyftwyfghw]::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.form-input-floating:focus[b-hyftwyfghw],
.form-select-floating:focus[b-hyftwyfghw] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.form-input-floating:focus ~ .floating-label[b-hyftwyfghw],
.form-select-floating:focus ~ .floating-label[b-hyftwyfghw] {
    color: #6366f1;
}

.floating-hint[b-hyftwyfghw] {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 4px;
    padding-left: 12px;
}

/* ========================================= */
/* --- SVG CHART OVERRIDES                   */
/* ========================================= */
.chart-grid-line[b-hyftwyfghw] {
    stroke: #e5e7eb;
    stroke-width: 1.5;
}

.chart-label[b-hyftwyfghw] {
    font-size: 0.75rem;
    fill: #9ca3af;
    font-family: monospace;
    font-weight: bold;
}

.legend-dot[b-hyftwyfghw] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.bg-orange[b-hyftwyfghw] { background-color: #f97316; }

/* ========================================= */
/* --- SUMMARY LIST                          */
/* ========================================= */
.summary-list[b-hyftwyfghw] {
    display: flex;
    flex-direction: column;
}

.summary-item[b-hyftwyfghw] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    position: relative;
    background-color: transparent;
    transition: background-color 0.2s;
}

.summary-item:last-child[b-hyftwyfghw] {
    border-bottom: none;
}

.summary-item.clickable[b-hyftwyfghw] {
    cursor: pointer;
}
.summary-item.clickable:hover[b-hyftwyfghw] {
    background-color: #f9fafb;
}

.summary-item.active-item[b-hyftwyfghw]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 4px;
    background-color: #d1d5db; /* Gris marcado de la imagen */
    border-radius: 0 4px 4px 0;
}

.summary-footer[b-hyftwyfghw] {
    background-color: #f9fafb;
}

/* ========================================= */
/* --- DARK MODE RULES                       */
/* ========================================= */
[data-bs-theme="dark"] .title-main[b-hyftwyfghw],
[data-bs-theme="dark"] .text-dark[b-hyftwyfghw] {
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .text-muted[b-hyftwyfghw] {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .filter-card[b-hyftwyfghw],
[data-bs-theme="dark"] .content-card[b-hyftwyfghw] {
    background-color: #18181b !important;
    border-color: #3f3f46 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .divider-hr[b-hyftwyfghw] {
    background-color: #3f3f46 !important;
}

/* Flotaing Labels Inversión */
[data-bs-theme="dark"] .floating-label[b-hyftwyfghw] {
    background-color: #18181b !important;
    color: #a1a1aa !important;
}

[data-bs-theme="dark"] .btn-back-icon[b-hyftwyfghw] {
    color: #f3f4f6 !important;
    background-color: #3f3f46;
}

[data-bs-theme="dark"] .btn-back-icon:hover[b-hyftwyfghw] {
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .form-input-floating[b-hyftwyfghw],
[data-bs-theme="dark"] .form-select-floating[b-hyftwyfghw] {
    border-color: #52525b !important;
    color: #f3f4f6 !important;
}

[data-bs-theme="dark"] .form-select-floating[b-hyftwyfghw] {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f3f4f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
}

[data-bs-theme="dark"] .form-input-floating:focus[b-hyftwyfghw],
[data-bs-theme="dark"] .form-select-floating:focus[b-hyftwyfghw] {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2) !important;
}
[data-bs-theme="dark"] .form-input-floating:focus ~ .floating-label[b-hyftwyfghw],
[data-bs-theme="dark"] .form-select-floating:focus ~ .floating-label[b-hyftwyfghw] {
    color: #818cf8 !important;
}

/* Chart */
[data-bs-theme="dark"] .chart-grid-line[b-hyftwyfghw] {
    stroke: #3f3f46 !important;
}
[data-bs-theme="dark"] .btn-group.bg-light[b-hyftwyfghw],
[data-bs-theme="dark"] .summary-footer[b-hyftwyfghw],
[data-bs-theme="dark"] .btn-light.disabled[b-hyftwyfghw] {
    background-color: #27272a !important;
    color: #a1a1aa !important;
}
[data-bs-theme="dark"] .btn-group .btn-light.active[b-hyftwyfghw] {
    background-color: #3f3f46 !important;
    color: #f3f4f6 !important;
}
[data-bs-theme="dark"] .bi-check-square-fill[b-hyftwyfghw] {
    color: #f3f4f6 !important;
}

/* Summary Items */
[data-bs-theme="dark"] .summary-item[b-hyftwyfghw] {
    border-bottom: 1px solid #3f3f46 !important;
}
[data-bs-theme="dark"] .summary-item.clickable:hover[b-hyftwyfghw] {
    background-color: #27272a !important;
}
[data-bs-theme="dark"] .summary-item.active-item[b-hyftwyfghw]::before {
    background-color: #52525b !important;
}
/* /Pages/Purchasing/PurchasingTrackingView.razor.rz.scp.css */
/* --- Fondo General --- */
body[b-ducd5i53mh] {
    background-color: #f4f6f8;
}

/* --- Tarjeta Principal --- */
.tracking-form-card[b-ducd5i53mh] {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    padding: 40px;
    border: 1px solid #e9ecef;
    max-width: 950px;
    /* Ancho similar a la imagen */
    margin: 0 auto;
    /* Centrado */
}

.form-title[b-ducd5i53mh] {
    font-weight: 700;
    color: #adb5bd;
    /* Gris claro título */
    margin-bottom: 0.2rem;
}

.form-subtitle[b-ducd5i53mh] {
    font-size: 0.9rem;
    color: #adb5bd;
    margin-bottom: 2rem;
}

/* --- Grids del Formulario Superior --- */
.form-grid-top[b-ducd5i53mh] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* 3 columnas arriba */
    gap: 20px;
    border: 1px solid #e9ecef;
    padding: 25px;
    border-radius: 8px;
}

/* Para la segunda fila que tiene campos más anchos, usamos grid-column */
.form-grid-top> :nth-child(4)[b-ducd5i53mh] {
    grid-column: span 1;
    /* Tracking number */
}

.form-grid-top> :nth-child(5)[b-ducd5i53mh] {
    grid-column: span 1;
    /* Fecha */
}

/* --- Inputs Personalizados (Estilo con Label en el borde) --- */
.custom-input-group[b-ducd5i53mh] {
    position: relative;
    margin-bottom: 5px;
}

.custom-input-group label[b-ducd5i53mh] {
    font-size: 0.75rem;
    color: #adb5bd;
    position: absolute;
    top: -10px;
    left: 10px;
    background-color: white;
    padding: 0 5px;
    font-weight: 600;
    z-index: 2;
}

.form-control[b-ducd5i53mh] {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 0.9rem;
    color: #495057;
}

.form-control:focus[b-ducd5i53mh] {
    box-shadow: none;
    border-color: #adb5bd;
}

/* Iconos dentro de inputs */
.input-with-icon[b-ducd5i53mh] {
    position: relative;
}

.input-with-icon i[b-ducd5i53mh] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
}

.helper-text[b-ducd5i53mh] {
    font-size: 0.7rem;
    color: #adb5bd;
    margin-top: 4px;
    display: block;
}

/* --- Sección Tabla e Interruptor --- */
.instances-section[b-ducd5i53mh] {
    border: 1px solid #e9ecef;
    padding: 25px;
    border-radius: 8px;
}

/* Estilo Switch (Interruptor) */
.custom-switch[b-ducd5i53mh] {
    width: 3em !important;
    height: 1.5em !important;
    background-color: #343a40;
    /* Color oscuro al estar activo */
    border-color: #343a40;
    cursor: pointer;
}

.custom-switch:checked[b-ducd5i53mh] {
    background-color: #212529;
    border-color: #212529;
}

/* Tabla */
.table thead th[b-ducd5i53mh] {
    font-weight: 700;
    color: #adb5bd;
}

.bg-gray-input[b-ducd5i53mh] {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

/* Checkbox negro */
.custom-checkbox:checked[b-ducd5i53mh] {
    background-color: #212529;
    border-color: #212529;
}

/* --- Botón Guardar (Marrón/Rojo) --- */
.btn-save[b-ducd5i53mh] {
    background-color: #8c5353;
    /* Color extraído de la imagen */
    color: white;
    border: none;
    padding: 10px 50px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: background-color 0.2s;
}

.btn-save:hover[b-ducd5i53mh] {
    background-color: #724040;
}

/* Icono pequeño en la tabla */
.icon-sm i[b-ducd5i53mh] {
    font-size: 0.9rem;
}
/* /Pages/Purchasing/PurchasingVirtualInstancesView.razor.rz.scp.css */
/* Layout */
.tracking-form-card[b-7fx22btopc] {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    padding: 40px;
    border: 1px solid #e9ecef;
    max-width: 950px;
    margin: 0 auto;
}

.form-title[b-7fx22btopc] {
    font-weight: 700;
    color: #adb5bd;
    margin-bottom: 0.2rem;
}

.form-subtitle[b-7fx22btopc] {
    font-size: 0.9rem;
    color: #adb5bd;
    margin-bottom: 2rem;
}

/* Grid Superior */
.form-grid-top[b-7fx22btopc] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    border: 1px solid #e9ecef;
    padding: 25px;
    border-radius: 8px;
}

.span-col[b-7fx22btopc] {
    grid-column: span 1;
}

/* Inputs */
.custom-input-group[b-7fx22btopc] {
    position: relative;
    margin-bottom: 5px;
}

.custom-input-group label[b-7fx22btopc] {
    font-size: 0.75rem;
    color: #adb5bd;
    position: absolute;
    top: -10px;
    left: 10px;
    background-color: white;
    padding: 0 5px;
    font-weight: 600;
    z-index: 2;
}

.form-control[b-7fx22btopc] {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 0.9rem;
    color: #495057;
}

.input-with-icon[b-7fx22btopc] {
    position: relative;
}

.input-with-icon i[b-7fx22btopc] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
}

.helper-text[b-7fx22btopc] {
    font-size: 0.7rem;
    color: #adb5bd;
    margin-top: 4px;
    display: block;
}

/* Tabla y Switch */
.instances-section[b-7fx22btopc] {
    border: 1px solid #e9ecef;
    padding: 25px;
    border-radius: 8px;
}

.custom-switch[b-7fx22btopc] {
    width: 3em !important;
    height: 1.5em !important;
    background-color: #343a40;
    border-color: #343a40;
    cursor: pointer;
}

.custom-switch:checked[b-7fx22btopc] {
    background-color: #212529;
    border-color: #212529;
}

.custom-checkbox:checked[b-7fx22btopc] {
    background-color: #212529;
    border-color: #212529;
}

.bg-gray-input[b-7fx22btopc] {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

/* Botón */
.btn-save[b-7fx22btopc] {
    background-color: #8c5353;
    color: white;
    border: none;
    padding: 10px 50px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
}

.btn-save:hover[b-7fx22btopc] {
    background-color: #724040;
}
/* /Pages/Purchasing/RegistrodeCompras.razor.rz.scp.css */
/* --- Layout Principal --- */
.registro-container[b-aqic8chr14] {
    display: flex;
    height: 100vh; /* Ocupa toda la altura */
    background-color: #f4f7f9; /* Color de fondo general de la página */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.sidebar-column[b-aqic8chr14] {
    /* El ancho lo define el componente Sidebar, aquí solo aseguramos que no se encoja */
    flex-shrink: 0;
}

.content-column[b-aqic8chr14] {
    flex-grow: 1;
    padding: 30px 40px;
    overflow-y: auto; /* Permite scroll si el formulario es muy alto */
}

/* --- Títulos y Textos --- */
.page-title[b-aqic8chr14] {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 25px;
}

.card-header h3[b-aqic8chr14] {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0 0 5px 0;
}

.subtitle[b-aqic8chr14] {
    color: #888;
    font-size: 14px;
    margin: 0;
}

/* --- Tarjeta del Formulario --- */
.form-card[b-aqic8chr14] {
    background-color: #fff;
    border-radius: 12px;
    /* El borde azul distintivo y una sombra suave */
    border: 2px solid #e0eafc;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    padding: 30px;
    max-width: 900px; /* Ancho máximo para que no se estire demasiado */
}

/* --- Grids y Secciones --- */
.form-section[b-aqic8chr14] {
    margin-top: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #eee; /* Línea separadora sutil */
}

    .form-section:last-child[b-aqic8chr14] {
        border-bottom: none;
    }

.grid-3-cols[b-aqic8chr14] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 25px; /* Espacio vertical y horizontal entre campos */
}

.grid-3-cols-bottom[b-aqic8chr14] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 25px;
    align-items: end; /* Alinea los campos al fondo */
}

/* Para que el textarea de notas ocupe 2 columnas */
.grid-span-2[b-aqic8chr14] {
    grid-column: span 2;
}

/* --- Estilos de Campos (Inputs, Labels) --- */
.form-group[b-aqic8chr14] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-aqic8chr14] {
        font-size: 13px;
        font-weight: 500;
        color: #666;
        margin-bottom: 8px;
    }

    /* Marca roja para campos obligatorios */
    .form-group.required label[b-aqic8chr14]::after {
        content: " *";
        color: #d93025;
    }

    .form-group input[b-aqic8chr14],
    .form-group select[b-aqic8chr14],
    .form-group textarea[b-aqic8chr14] {
        border: 1px solid #dce0e6;
        border-radius: 6px;
        padding: 10px 12px;
        font-size: 14px;
        color: #333;
        outline: none;
        transition: border-color 0.2s;
    }

        .form-group input:focus[b-aqic8chr14],
        .form-group select:focus[b-aqic8chr14],
        .form-group textarea:focus[b-aqic8chr14] {
            border-color: #007bff; /* Color de foco azul */
        }

    .form-group select[b-aqic8chr14] {
        /* Apariencia nativa limpia */
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 16px;
        padding-right: 30px;
    }

    .form-group textarea[b-aqic8chr14] {
        resize: vertical;
        height: 38px; /* Altura inicial para coincidir con los inputs */
    }

    /* Campos deshabilitados */
    .form-group.disabled input[b-aqic8chr14] {
        background-color: #f9fafa;
        color: #999;
        cursor: not-allowed;
    }

.helper-text[b-aqic8chr14] {
    font-size: 11px;
    color: #999;
    margin-top: 5px;
}

/* Inputs con prefijo ($) o icono */
.input-group[b-aqic8chr14] {
    position: relative;
}

.input-prefix[b-aqic8chr14] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
}

.input-group input[b-aqic8chr14] {
    padding-left: 25px; /* Espacio para el prefijo */
    width: 100%;
}

.input-with-icon[b-aqic8chr14] {
    position: relative;
}

    .input-with-icon .calendar-icon[b-aqic8chr14] {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-style: normal;
        color: #999;
    }

/* --- Sección de Producto --- */
.product-section[b-aqic8chr14] {
    display: flex;
    align-items: center;
    background-color: #f8faff; /* Fondo azul muy claro */
    border-radius: 8px;
    padding: 15px;
    margin: 25px 0;
}

.product-image-placeholder[b-aqic8chr14] {
    width: 60px;
    height: 60px;
    background-color: #e1e5eb;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}

.image-icon[b-aqic8chr14] {
    font-style: normal;
    font-size: 24px;
    color: #aab2bd;
}

.product-details[b-aqic8chr14] {
    flex-grow: 1;
}

    .product-details h4[b-aqic8chr14] {
        margin: 0 0 5px 0;
        font-size: 16px;
        color: #333;
    }

.product-code[b-aqic8chr14] {
    margin: 0 0 3px 0;
    font-size: 13px;
    color: #666;
    font-weight: 600;
}

.product-seller[b-aqic8chr14] {
    margin: 0;
    font-size: 13px;
    color: #888;
}

.quantity-control[b-aqic8chr14] {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #dce0e6;
    overflow: hidden;
}

.qty-btn[b-aqic8chr14] {
    border: none;
    background: #f4f7f9;
    color: #333;
    width: 30px;
    height: 30px;
    font-weight: bold;
    cursor: pointer;
}

    .qty-btn:hover[b-aqic8chr14] {
        background-color: #eef1f5;
    }

.qty-input[b-aqic8chr14] {
    width: 40px;
    text-align: center;
    border: none;
    margin: 0;
    padding: 0;
    font-weight: 600;
}

/* --- Botón de Guardar --- */
.form-actions[b-aqic8chr14] {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.btn-save[b-aqic8chr14] {
    background-color: #a05a53; /* El color marrón de la imagen */
    color: white;
    border: none;
    border-radius: 25px; /* Bordes redondeados estilo píldora */
    padding: 12px 60px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .btn-save:hover[b-aqic8chr14] {
        background-color: #8c4d47; /* Un poco más oscuro al pasar el mouse */
    }
/* /Pages/Sells/FBA_Management.razor.rz.scp.css */
/* FBA_Management.razor.css */
.sells-container[b-shnph2vvmz] {
    padding: 2rem 3rem;
    background-color: #f8fafc;
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.page-title[b-shnph2vvmz] {
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.5px;
}
.dashboard-card[b-shnph2vvmz] { 
    border-radius: 8px; 
    transition: transform 0.2s, box-shadow 0.2s; 
}
.dashboard-card:hover[b-shnph2vvmz] { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; 
}
.custom-table th[b-shnph2vvmz] { 
    font-weight: 700; 
    font-size: 0.85rem; 
    color: #475569; 
    border-bottom: 2px solid #e2e8f0; 
    padding: 1rem 0.5rem;
}
.custom-table td[b-shnph2vvmz] {
    font-size: 0.95rem;
    color: #334155;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

/* ============================================================ */
/* MODULE NAV                                                    */
/* ============================================================ */
.module-nav[b-shnph2vvmz] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}

.btn-back-dash[b-shnph2vvmz] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e2a38;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.btn-back-dash:hover[b-shnph2vvmz] { background: #f0f2f5; border-color: #94a3b8; }

.module-breadcrumb[b-shnph2vvmz] { display: flex; align-items: center; gap: 6px; }

.module-tag[b-shnph2vvmz] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.tag-fba[b-shnph2vvmz] { background: #fef3c7; color: #b45309; }

.breadcrumb-current[b-shnph2vvmz] { font-size: 0.8rem; font-weight: 700; color: #1e2a38; }

.flow-hint[b-shnph2vvmz] {
    margin-left: auto;
    font-size: 0.72rem;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 12px;
    white-space: nowrap;
}
/* /Pages/Sells/Historical_Import.razor.rz.scp.css */
/* Historical_Import.razor.css */
.sells-container[b-l5narlgsvy] {
    padding: 2rem 3rem;
    background-color: #f8fafc;
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.page-title[b-l5narlgsvy] {
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.5px;
}
.wizard-steps li[b-l5narlgsvy] {
    display: flex;
    align-items: center;
}
.step-num[b-l5narlgsvy] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}
.drag-drop-area[b-l5narlgsvy] {
    transition: background-color 0.2s, border-color 0.2s;
}
.drag-drop-area:hover[b-l5narlgsvy] {
    background-color: #f1f5f9 !important;
    border-color: #3b82f6 !important;
}
.hover-primary:hover[b-l5narlgsvy] {
    color: #3b82f6 !important;
}

/* ============================================================ */
/* MODULE NAV                                                    */
/* ============================================================ */
.module-nav[b-l5narlgsvy] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}

.btn-back-dash[b-l5narlgsvy] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e2a38;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.btn-back-dash:hover[b-l5narlgsvy] { background: #f0f2f5; border-color: #94a3b8; }

.module-breadcrumb[b-l5narlgsvy] { display: flex; align-items: center; gap: 6px; }

.module-tag[b-l5narlgsvy] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.tag-admin[b-l5narlgsvy] { background: #f3f4f6; color: #374151; }

.breadcrumb-current[b-l5narlgsvy] { font-size: 0.8rem; font-weight: 700; color: #1e2a38; }

.flow-hint[b-l5narlgsvy] {
    margin-left: auto;
    font-size: 0.72rem;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 12px;
    white-space: nowrap;
}
/* /Pages/Sells/Instances_Markup.razor.rz.scp.css */
/* Instances_Markup.razor.css */
.sells-container[b-jyvvbphh47] {
    padding: 2rem 3rem;
    background-color: #f8fafc;
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.page-title[b-jyvvbphh47] {
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.5px;
}
.custom-table th[b-jyvvbphh47] {
    font-weight: 600;
    font-size: 0.85rem;
    color: #475569;
    border-bottom: 2px solid #e2e8f0;
    padding: 1rem 0.5rem;
}
.custom-table td[b-jyvvbphh47] {
    font-size: 0.9rem;
    color: #334155;
    vertical-align: middle;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}
.form-check-input[b-jyvvbphh47] {
    cursor: pointer;
}

/* ============================================================ */
/* MODULE NAV + FORMTAB TABS                                    */
/* ============================================================ */
.module-nav[b-jyvvbphh47] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}

.btn-back-dash[b-jyvvbphh47] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e2a38;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.btn-back-dash:hover[b-jyvvbphh47] {
    background: #f0f2f5;
    border-color: #94a3b8;
}

.module-breadcrumb[b-jyvvbphh47] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.module-tag[b-jyvvbphh47] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.tag-sells[b-jyvvbphh47]  { background: #dcfce7; color: #15803d; }
.tag-fba[b-jyvvbphh47]    { background: #fef3c7; color: #b45309; }
.tag-admin[b-jyvvbphh47]  { background: #f3f4f6; color: #374151; }

.breadcrumb-current[b-jyvvbphh47] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e2a38;
}

.flow-hint[b-jyvvbphh47] {
    margin-left: auto;
    font-size: 0.72rem;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 12px;
    white-space: nowrap;
}

/* FormTab Tabs (horizontal) */
.formtab-tabs[b-jyvvbphh47] {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #e2e8f0;
}

.tab-btn[b-jyvvbphh47] {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 8px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    border-radius: 6px 6px 0 0;
}

.tab-btn:hover[b-jyvvbphh47] { color: #1e2a38; background: #f8fafc; }

.tab-btn.active[b-jyvvbphh47] {
    color: #1e2a38;
    border-bottom-color: #1e2a38;
    background: transparent;
}
/* /Pages/Sells/Pending_Assign.razor.rz.scp.css */
/* ============================================================ */
/* TOKENS                                                       */
/* ============================================================ */
:root[b-lad4cjzxok] {
    --navy:        #1e2a38;
    --navy-light:  #2d3e52;
    --blue:        #3B82F6;
    --border:      #e2e8f0;
    --bg:          #f0f2f5;
    --surface:     #ffffff;
    --text-primary:#1e2a38;
    --text-muted:  #64748b;
    --text-subtle: #94a3b8;
    --green:       #16a34a;
    --green-soft:  #f0fdf4;
    --red:         #dc2626;
    --red-soft:    #fef2f2;
    --amber:       #d97706;
    --amber-soft:  #fffbeb;
}

/* ============================================================ */
/* LAYOUT                                                       */
/* ============================================================ */
.view[b-lad4cjzxok] {
    padding: 2rem 2.5rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    color: var(--text-primary);
}

.page-header[b-lad4cjzxok]          { margin-bottom: 1.75rem; }

.breadcrumb[b-lad4cjzxok] {
    font-size: 0.75rem;
    color: var(--text-subtle);
    margin-bottom: 0.5rem;
}
.breadcrumb a[b-lad4cjzxok] {
    color: var(--text-subtle);
    text-decoration: none;
    font-weight: 600;
}
.breadcrumb a:hover[b-lad4cjzxok] { color: var(--navy); }

.page-header-row[b-lad4cjzxok] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.page-title[b-lad4cjzxok]    { font-size: 1.6rem; font-weight: 700; color: var(--navy); margin: 0 0 0.25rem; }
.page-subtitle[b-lad4cjzxok] { font-size: 0.85rem; color: var(--text-muted); margin: 0; max-width: 560px; }
.page-content[b-lad4cjzxok]  { display: flex; flex-direction: column; gap: 1.25rem; }

/* ============================================================ */
/* STAT PILL (header)                                           */
/* ============================================================ */
.header-stats[b-lad4cjzxok]   { display: flex; align-items: center; gap: 0.75rem; padding-top: 0.2rem; }
.stat-pill[b-lad4cjzxok] {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 0.3rem 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.stat-pill-num[b-lad4cjzxok] { font-size: 1rem; font-weight: 700; color: var(--amber); }

/* ============================================================ */
/* ALERT                                                        */
/* ============================================================ */
.alert[b-lad4cjzxok] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-radius: 10px;
    font-size: 0.85rem;
}
.alert-info[b-lad4cjzxok]   { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.alert-icon[b-lad4cjzxok]   { font-size: 1rem; flex-shrink: 0; }

/* ============================================================ */
/* TABLA                                                        */
/* ============================================================ */
.table-wrapper[b-lad4cjzxok] {
    background: var(--surface);
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
}
.table[b-lad4cjzxok] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.table thead tr[b-lad4cjzxok] { background: #f8fafc; border-bottom: 2px solid var(--border); }
.table th[b-lad4cjzxok] {
    padding: 0.7rem 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-align: left;
    white-space: nowrap;
}
.table th.num[b-lad4cjzxok], .table td.num[b-lad4cjzxok] { text-align: right; }
.table td[b-lad4cjzxok] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: var(--text-primary);
    vertical-align: middle;
}
.table tbody tr:last-child td[b-lad4cjzxok] { border-bottom: none; }
.table tbody tr:hover[b-lad4cjzxok] { background: #f8fafc; }
.table tbody tr.row-active[b-lad4cjzxok] { background: #eff6ff; }

.product-cell[b-lad4cjzxok] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-sm[b-lad4cjzxok]   { font-size: 0.82rem; }
.text-muted[b-lad4cjzxok]{ color: var(--text-muted); }
.mono[b-lad4cjzxok]      { font-family: 'Consolas', 'SF Mono', monospace; }

.empty-state[b-lad4cjzxok] {
    text-align: center;
    color: var(--text-muted);
    padding: 2.5rem !important;
    font-size: 0.95rem;
}
.empty-icon[b-lad4cjzxok] { margin-right: 0.5rem; color: var(--green); font-weight: 700; }

/* ============================================================ */
/* BADGES                                                       */
/* ============================================================ */
.badge[b-lad4cjzxok] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.badge-fba[b-lad4cjzxok]    { background: #dbeafe; color: #1d4ed8; }
.badge-fbm[b-lad4cjzxok]    { background: #e0e7ff; color: #4338ca; }
.badge-onsite[b-lad4cjzxok] { background: #d1fae5; color: #065f46; }
.badge-default[b-lad4cjzxok]{ background: #f1f5f9; color: var(--text-muted); }

/* ============================================================ */
/* BOTONES                                                      */
/* ============================================================ */
.btn[b-lad4cjzxok] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
    height: 34px;
    box-sizing: border-box;
}
.btn:hover[b-lad4cjzxok]   { transform: translateY(-1px); }
.btn:active[b-lad4cjzxok]  { transform: translateY(0); }
.btn:disabled[b-lad4cjzxok]{ opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-primary[b-lad4cjzxok]  { background: var(--navy); color: #fff; box-shadow: 0 2px 8px rgba(30,42,56,0.2); }
.btn-primary:hover:not(:disabled)[b-lad4cjzxok] { background: #0f1a24; }

.btn-secondary[b-lad4cjzxok] {
    background: #f1f5f9;
    color: var(--navy);
    border: 1.5px solid var(--border);
}
.btn-secondary:hover:not(:disabled)[b-lad4cjzxok] { background: #e2e8f0; }

.btn-ghost[b-lad4cjzxok] { background: transparent; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled)[b-lad4cjzxok] { background: #f1f5f9; }

.btn-sm[b-lad4cjzxok] { height: 30px; padding: 0.3rem 0.8rem; font-size: 0.8rem; }

.btn-confirm[b-lad4cjzxok] {
    background: var(--green);
    color: #fff;
    box-shadow: 0 2px 8px rgba(22,163,74,0.2);
    flex: 1;
}
.btn-confirm:hover:not(:disabled)[b-lad4cjzxok] { background: #15803d; }

/* ============================================================ */
/* OVERLAY + DRAWER                                             */
/* ============================================================ */
.overlay[b-lad4cjzxok] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 200;
    animation: fadeIn-b-lad4cjzxok 0.2s ease;
}

@keyframes fadeIn-b-lad4cjzxok {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.assign-drawer[b-lad4cjzxok] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 440px;
    background: var(--surface);
    box-shadow: -8px 0 32px rgba(0,0,0,0.15);
    z-index: 201;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}
.drawer-open[b-lad4cjzxok] { transform: translateX(0); }

/* Cabecera del drawer */
.drawer-header[b-lad4cjzxok] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.4rem 1.4rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.drawer-title[b-lad4cjzxok]    { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin: 0 0 0.15rem; }
.drawer-subtitle[b-lad4cjzxok] { font-size: 0.78rem; color: var(--text-muted); margin: 0; font-family: monospace; }
.drawer-close[b-lad4cjzxok] {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    line-height: 1;
    flex-shrink: 0;
}
.drawer-close:hover[b-lad4cjzxok] { background: #f1f5f9; color: var(--navy); }

/* Contexto del pedido */
.order-context[b-lad4cjzxok] {
    padding: 1rem 1.4rem;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.context-row[b-lad4cjzxok] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0;
}
.ctx-label[b-lad4cjzxok] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-subtle);
    width: 76px;
    flex-shrink: 0;
}
.ctx-value[b-lad4cjzxok] { font-size: 0.87rem; color: var(--text-primary); }

/* Sección de escaneo */
.scan-section[b-lad4cjzxok] {
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.scan-label[b-lad4cjzxok] { font-size: 0.85rem; font-weight: 700; color: var(--navy); display: block; margin-bottom: 0.2rem; }
.scan-hint[b-lad4cjzxok]  { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 0.75rem; }

.scan-input-row[b-lad4cjzxok] { display: flex; gap: 0.5rem; }
.scan-input[b-lad4cjzxok]     { flex: 1; }

.input[b-lad4cjzxok] {
    padding: 0.45rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--navy);
    background: #f8fafc;
    transition: border-color 0.15s, box-shadow 0.15s;
    height: 38px;
    box-sizing: border-box;
    width: 100%;
}
.input:focus[b-lad4cjzxok] {
    outline: none;
    border-color: var(--blue);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.input-error[b-lad4cjzxok] { border-color: var(--red); }
.input-error:focus[b-lad4cjzxok] { box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }

.btn-scan[b-lad4cjzxok] { height: 38px; flex-shrink: 0; padding: 0 1rem; }

.field-error[b-lad4cjzxok] { font-size: 0.78rem; color: var(--red); margin: 0.4rem 0 0; }

/* ============================================================ */
/* TARJETA DE VALIDACIÓN                                        */
/* ============================================================ */
.validation-card[b-lad4cjzxok] {
    margin: 1rem 1.4rem;
    border-radius: 10px;
    border: 1.5px solid;
    overflow: hidden;
    flex-shrink: 0;
}
.card-valid[b-lad4cjzxok]   { border-color: #86efac; background: var(--green-soft); }
.card-invalid[b-lad4cjzxok] { border-color: #fca5a5; background: var(--red-soft); }

.val-header[b-lad4cjzxok] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.val-icon[b-lad4cjzxok]  { font-size: 1rem; font-weight: 700; }
.card-valid .val-icon[b-lad4cjzxok]   { color: var(--green); }
.card-invalid .val-icon[b-lad4cjzxok] { color: var(--red); }
.val-title[b-lad4cjzxok] { font-size: 0.85rem; font-weight: 700; }
.card-valid .val-title[b-lad4cjzxok]   { color: var(--green); }
.card-invalid .val-title[b-lad4cjzxok] { color: var(--red); }

.val-rows[b-lad4cjzxok] { padding: 0.6rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.val-row[b-lad4cjzxok]  { display: flex; align-items: flex-start; gap: 0.75rem; }
.val-lbl[b-lad4cjzxok]  { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; width: 120px; flex-shrink: 0; padding-top: 2px; }
.val-val[b-lad4cjzxok]  { font-size: 0.85rem; color: var(--text-primary); }

.text-ok[b-lad4cjzxok]   { color: var(--green); font-weight: 600; }
.text-err[b-lad4cjzxok]  { color: var(--red);   font-weight: 600; }
.text-warn[b-lad4cjzxok] { color: var(--amber); font-weight: 600; }

.val-error-msg[b-lad4cjzxok] {
    font-size: 0.8rem;
    color: var(--red);
    padding: 0.5rem 1rem 0.7rem;
    margin: 0;
    border-top: 1px solid rgba(220,38,38,0.15);
}

/* ============================================================ */
/* BANNER DE ÉXITO                                              */
/* ============================================================ */
.success-banner[b-lad4cjzxok] {
    margin: 1rem 1.4rem;
    background: var(--green-soft);
    border: 1.5px solid #86efac;
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-shrink: 0;
    animation: slideDown-b-lad4cjzxok 0.25s ease;
}
@keyframes slideDown-b-lad4cjzxok {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.success-icon[b-lad4cjzxok]  { font-size: 1.4rem; color: var(--green); flex-shrink: 0; }
.success-title[b-lad4cjzxok] { font-size: 0.92rem; font-weight: 700; color: var(--green); margin: 0 0 0.2rem; }
.success-sub[b-lad4cjzxok]   { font-size: 0.8rem;  color: var(--text-muted); margin: 0; }

/* ============================================================ */
/* PIE DEL DRAWER                                               */
/* ============================================================ */
.drawer-footer[b-lad4cjzxok] {
    margin-top: auto;
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.4rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}

/* ============================================================ */
/* SPINNER                                                      */
/* ============================================================ */
.spinner[b-lad4cjzxok] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-lad4cjzxok 0.7s linear infinite;
}
.btn-secondary .spinner[b-lad4cjzxok], .btn-scan .spinner[b-lad4cjzxok] {
    border-color: rgba(30,42,56,0.25);
    border-top-color: var(--navy);
}
@keyframes spin-b-lad4cjzxok {
    to { transform: rotate(360deg); }
}
/* /Pages/Sells/Real_Results_Analysis.razor.rz.scp.css */
/* Real_Results_Analysis.razor.css */
.sells-container[b-2ph8ki6dng] {
    padding: 2rem 3rem;
    background-color: #f8fafc;
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.page-title[b-2ph8ki6dng] {
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.5px;
}
.kpi-card[b-2ph8ki6dng] {
    border-radius: 8px;
    border-left: 5px solid #1e293b !important;
    transition: transform 0.2s;
}
.kpi-card:hover[b-2ph8ki6dng] { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; }

.custom-table th[b-2ph8ki6dng] {
    font-weight: 700;
    font-size: 0.85rem;
    color: #475569;
    border-bottom: 2px solid #e2e8f0;
    padding: 1rem 0.5rem;
}
.custom-table td[b-2ph8ki6dng] {
    font-size: 0.95rem;
    color: #334155;
    vertical-align: middle;
    padding: 1rem 0.5rem;
}
.master-row[b-2ph8ki6dng] { 
    cursor: pointer; 
    transition: background-color 0.2s; 
    border-bottom: 1px solid #e2e8f0;
}
.master-row:hover[b-2ph8ki6dng] { background-color: #f1f5f9 !important; }
.details-panel[b-2ph8ki6dng] {
    border-left: 4px solid #cbd5e1;
}

/* ============================================================ */
/* MODULE NAV                                                    */
/* ============================================================ */
.module-nav[b-2ph8ki6dng] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}

.btn-back-dash[b-2ph8ki6dng] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e2a38;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.btn-back-dash:hover[b-2ph8ki6dng] { background: #f0f2f5; border-color: #94a3b8; }

.module-breadcrumb[b-2ph8ki6dng] { display: flex; align-items: center; gap: 6px; }

.module-tag[b-2ph8ki6dng] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.tag-sells[b-2ph8ki6dng] { background: #dcfce7; color: #15803d; }

.breadcrumb-current[b-2ph8ki6dng] { font-size: 0.8rem; font-weight: 700; color: #1e2a38; }

.flow-hint[b-2ph8ki6dng] {
    margin-left: auto;
    font-size: 0.72rem;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 12px;
    white-space: nowrap;
}
/* /Pages/Sells/SaleDetailDrawer.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   SaleDetailDrawer  ·  sd-* namespace
   Layout: modal backdrop + right-side drawer + card body
   Font:   Urbanist  ·  Tokens: Navy #0f172a · Blue #3b82f6 · Teal #0d9488
   ═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   BACKDROP
   ──────────────────────────────────────────────────────────────── */

.sd-backdrop[b-sc0tj1ov9o] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: flex-end;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: sd-fade-b-sc0tj1ov9o 220ms ease both;
    outline: none;
}

@keyframes sd-fade-b-sc0tj1ov9o {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ────────────────────────────────────────────────────────────────
   DRAWER PANEL
   ──────────────────────────────────────────────────────────────── */

.sd-drawer[b-sc0tj1ov9o] {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 100%;
    background: #f1f5f9;
    display: flex;
    flex-direction: column;
    box-shadow:
        -1px 0 0 rgba(0,0,0,0.06),
        -4px 0 24px rgba(15,23,42,0.10),
        -20px 0 60px rgba(15,23,42,0.14);
    animation: sd-slide-b-sc0tj1ov9o 240ms cubic-bezier(0.32, 0.72, 0, 1) both;
    overflow: hidden;
    font-family: 'Urbanist', system-ui, -apple-system, sans-serif;
}

@keyframes sd-slide-b-sc0tj1ov9o {
    from { transform: translateX(100%); }
    to   { transform: translateX(0);    }
}

/* ────────────────────────────────────────────────────────────────
   HEADER  (non-scrolling)
   ──────────────────────────────────────────────────────────────── */

.sd-header[b-sc0tj1ov9o] {
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
}

/* Top accent bar — brand gradient */
.sd-header-accent[b-sc0tj1ov9o] {
    height: 3px;
    background: linear-gradient(90deg, #0f172a 0%, #3b82f6 55%, #0d9488 100%);
}

.sd-header-body[b-sc0tj1ov9o] {
    padding: 14px 52px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Row 1: Order ID + Status */
.sd-hdr-row1[b-sc0tj1ov9o] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sd-order-id[b-sc0tj1ov9o] {
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-size: 0.83rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.03em;
}

/* Row 2: date · location */
.sd-hdr-meta[b-sc0tj1ov9o] {
    font-size: 0.72rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.4;
}

.sd-hdr-meta i[b-sc0tj1ov9o] { color: #94a3b8; }

.sd-sep[b-sc0tj1ov9o] {
    color: #cbd5e1;
    margin: 0 2px;
    font-size: 0.75rem;
}

/* Row 3: Mode badge + action buttons */
.sd-hdr-row3[b-sc0tj1ov9o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.sd-hdr-actions[b-sc0tj1ov9o] {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Close button */
.sd-close[b-sc0tj1ov9o] {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    color: #94a3b8;
    cursor: pointer;
    transition: background 130ms, color 130ms, border-color 130ms;
}

.sd-close:hover[b-sc0tj1ov9o] {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}

/* ────────────────────────────────────────────────────────────────
   STATUS & MODE BADGES
   ──────────────────────────────────────────────────────────────── */

.sd-status[b-sc0tj1ov9o] {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 9px;
    border-radius: 99px;
    text-transform: uppercase;
}

.sd-status-shipped[b-sc0tj1ov9o]   { background: #f0fdf4; color: #15803d; border: 1px solid #86efac; }
.sd-status-pending[b-sc0tj1ov9o]   { background: #fffbeb; color: #b45309; border: 1px solid #fcd34d; }
.sd-status-cancelled[b-sc0tj1ov9o] { background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5; }

.sd-mode[b-sc0tj1ov9o] {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    border-radius: 5px;
    text-transform: uppercase;
}

.sd-mode-fba[b-sc0tj1ov9o]    { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.sd-mode-fbm[b-sc0tj1ov9o]    { background: #fefce8; color: #92400e; border: 1px solid #fde68a; }
.sd-mode-onsite[b-sc0tj1ov9o] { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* ────────────────────────────────────────────────────────────────
   ACTION BUTTONS
   ──────────────────────────────────────────────────────────────── */

.sd-btn[b-sc0tj1ov9o] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: 7px;
    cursor: pointer;
    border: none;
    transition: background 130ms, opacity 130ms;
    white-space: nowrap;
}

.sd-btn:disabled[b-sc0tj1ov9o] { opacity: 0.55; cursor: not-allowed; }

.sd-btn-edit[b-sc0tj1ov9o] {
    background: #0f172a;
    color: #fff;
}
.sd-btn-edit:hover:not(:disabled)[b-sc0tj1ov9o] { background: #1e293b; }

.sd-btn-save[b-sc0tj1ov9o] {
    background: #0d9488;
    color: #fff;
}
.sd-btn-save:hover:not(:disabled)[b-sc0tj1ov9o] { background: #0f766e; }

.sd-btn-cancel[b-sc0tj1ov9o] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.sd-btn-cancel:hover[b-sc0tj1ov9o] { background: #e2e8f0; }

.sd-spin[b-sc0tj1ov9o] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sd-rotate-b-sc0tj1ov9o 0.7s linear infinite;
}

@keyframes sd-rotate-b-sc0tj1ov9o { to { transform: rotate(360deg); } }

/* ────────────────────────────────────────────────────────────────
   CONTENT  (scrollable area)
   ──────────────────────────────────────────────────────────────── */

.sd-content[b-sc0tj1ov9o] {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 14px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f1f5f9;
}

.sd-content[b-sc0tj1ov9o]::-webkit-scrollbar       { width: 4px; }
.sd-content[b-sc0tj1ov9o]::-webkit-scrollbar-track { background: transparent; }
.sd-content[b-sc0tj1ov9o]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }

.sd-content-spacer[b-sc0tj1ov9o] { height: 14px; flex-shrink: 0; }

/* ────────────────────────────────────────────────────────────────
   CARDS
   ──────────────────────────────────────────────────────────────── */

.sd-card[b-sc0tj1ov9o] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    flex-shrink: 0;
}

.sd-card-label[b-sc0tj1ov9o] {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #94a3b8;
    margin: 0 0 10px 0;
}

/* ────────────────────────────────────────────────────────────────
   PRODUCTO
   ──────────────────────────────────────────────────────────────── */

.sd-product-title[b-sc0tj1ov9o] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.45;
    margin: 0 0 10px 0;
}

.sd-chips[b-sc0tj1ov9o] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.sd-chip[b-sc0tj1ov9o] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 3px 8px;
}

.sd-chip-asin[b-sc0tj1ov9o] {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
    cursor: pointer;
    transition: background 120ms;
}
.sd-chip-asin:hover[b-sc0tj1ov9o] { background: #dbeafe; }

.sd-kv-row[b-sc0tj1ov9o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
}
.sd-kv-key[b-sc0tj1ov9o] { color: #64748b; }
.sd-kv-val[b-sc0tj1ov9o] { color: #0f172a; font-weight: 600; }

/* ────────────────────────────────────────────────────────────────
   RENTABILIDAD — WATERFALL
   ──────────────────────────────────────────────────────────────── */

/* Shared row layout */
.sd-wf-row[b-sc0tj1ov9o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 0.82rem;
}

/* L0: Precio Bruto */
.sd-wf-root[b-sc0tj1ov9o] {
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.sd-wf-root .sd-wf-lbl[b-sc0tj1ov9o] {
    font-weight: 600;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sd-wf-root-val[b-sc0tj1ov9o] {
    font-weight: 700;
    font-size: 0.92rem;
}

.sd-wf-qty[b-sc0tj1ov9o] {
    font-size: 0.68rem;
    font-weight: 400;
    color: #94a3b8;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 1px 6px;
}

/* Shared label / value */
.sd-wf-lbl[b-sc0tj1ov9o] { color: #64748b; }
.sd-wf-pos[b-sc0tj1ov9o] { color: #16a34a !important; font-weight: 500; }
.sd-wf-neg[b-sc0tj1ov9o] { color: #dc2626 !important; font-weight: 500; }

/* L1: Deductions group (vertical connector bar on left) */
.sd-wf-deductions[b-sc0tj1ov9o] {
    margin: 6px 0 6px 4px;
    padding-left: 14px;
    border-left: 2px solid #e2e8f0;
    position: relative;
}

.sd-wf-deductions-sm[b-sc0tj1ov9o] {
    margin-top: 0;
    margin-bottom: 4px;
}

/* L2: Amazon fees sub-group */
.sd-wf-fees[b-sc0tj1ov9o] {
    margin: 2px 0 4px 10px;
    padding: 6px 10px 4px;
    background: #f8fafc;
    border-left: 2px solid #e2e8f0;
    border-radius: 0 6px 6px 0;
}

.sd-wf-fees .sd-wf-row[b-sc0tj1ov9o] { padding: 3px 0; }

.sd-wf-fees .sd-wf-lbl[b-sc0tj1ov9o] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.sd-wf-fees .sd-wf-neg[b-sc0tj1ov9o] {
    font-size: 0.75rem;
    font-weight: 400;
}

/* Subtotal: Neto Recibido */
.sd-wf-subtotal[b-sc0tj1ov9o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    margin: 4px 0;
    background: #f8fafc;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
}

.sd-wf-sub-lbl[b-sc0tj1ov9o] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
}

.sd-wf-sub-val[b-sc0tj1ov9o] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f172a;
}

/* Result card: Utilidad Neta + Margen */
.sd-wf-result[b-sc0tj1ov9o] {
    margin-top: 8px;
    padding: 13px 14px;
    border-radius: 10px;
    border: 1px solid;
}

.sd-result-ok[b-sc0tj1ov9o] {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-color: #86efac;
}

.sd-result-loss[b-sc0tj1ov9o] {
    background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
    border-color: #fca5a5;
}

.sd-wf-result-top[b-sc0tj1ov9o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sd-wf-result-lbl[b-sc0tj1ov9o] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
}

.sd-profit-pos[b-sc0tj1ov9o] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #15803d;
    letter-spacing: -0.01em;
}

.sd-profit-neg[b-sc0tj1ov9o] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #b91c1c;
    letter-spacing: -0.01em;
}

.sd-wf-result-margin[b-sc0tj1ov9o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: #64748b;
    padding-top: 6px;
    border-top: 1px dashed rgba(0,0,0,0.08);
}

/* Margen pills */
.sd-margin-high[b-sc0tj1ov9o] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #15803d;
    background: #dcfce7;
    border: 1px solid #86efac;
    padding: 2px 10px;
    border-radius: 99px;
}

.sd-margin-mid[b-sc0tj1ov9o] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #6d28d9;
    background: #ede9fe;
    border: 1px solid #c4b5fd;
    padding: 2px 10px;
    border-radius: 99px;
}

.sd-margin-low[b-sc0tj1ov9o] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #c2410c;
    background: #ffedd5;
    border: 1px solid #fdba74;
    padding: 2px 10px;
    border-radius: 99px;
}

/* Estimated pill */
.sd-est-pill[b-sc0tj1ov9o] {
    font-size: 0.62rem;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 99px;
    padding: 1px 7px;
    text-transform: lowercase;
    cursor: default;
}

/* ────────────────────────────────────────────────────────────────
   TRANSACCIONES — TIMELINE
   ──────────────────────────────────────────────────────────────── */

.sd-timeline[b-sc0tj1ov9o] {
    display: flex;
    flex-direction: column;
    position: relative;
}

.sd-tl-item[b-sc0tj1ov9o] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    position: relative;
}

/* Vertical connecting line between dots */
.sd-tl-item:not(:last-child)[b-sc0tj1ov9o]::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 18px;
    bottom: -4px;
    width: 1px;
    background: #e2e8f0;
}

.sd-tl-dot[b-sc0tj1ov9o] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}

.sd-dot-order[b-sc0tj1ov9o]      { background: #22c55e; box-shadow: 0 0 0 2px #dcfce7; }
.sd-dot-fee[b-sc0tj1ov9o]        { background: #ef4444; box-shadow: 0 0 0 2px #fee2e2; }
.sd-dot-refund[b-sc0tj1ov9o]     { background: #f59e0b; box-shadow: 0 0 0 2px #fef3c7; }
.sd-dot-adjustment[b-sc0tj1ov9o] { background: #3b82f6; box-shadow: 0 0 0 2px #dbeafe; }

.sd-tl-info[b-sc0tj1ov9o] {
    flex: 1;
    min-width: 0;
}

.sd-tl-desc[b-sc0tj1ov9o] {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-tl-date[b-sc0tj1ov9o] {
    display: block;
    font-size: 0.69rem;
    color: #94a3b8;
    margin-top: 2px;
}

.sd-tl-amount[b-sc0tj1ov9o] {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 2px;
}

/* ────────────────────────────────────────────────────────────────
   ASIGNACIÓN
   ──────────────────────────────────────────────────────────────── */

.sd-assign[b-sc0tj1ov9o] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 0.82rem;
}

.sd-assign-ico[b-sc0tj1ov9o] { font-size: 1.1rem; flex-shrink: 0; }

.sd-assign-ok[b-sc0tj1ov9o] {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}
.sd-assign-ok .sd-assign-ico[b-sc0tj1ov9o] { color: #22c55e; }

.sd-assign-pending[b-sc0tj1ov9o] {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
}
.sd-assign-pending .sd-assign-ico[b-sc0tj1ov9o] { color: #f59e0b; }

.sd-assign-body[b-sc0tj1ov9o] { flex: 1; min-width: 0; }

.sd-assign-name[b-sc0tj1ov9o] {
    font-weight: 600;
    color: #166534;
    margin: 0 0 1px;
    font-size: 0.82rem;
}

.sd-assign-track[b-sc0tj1ov9o] {
    font-size: 0.72rem;
    font-family: ui-monospace, monospace;
    color: #4b5563;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sd-assign-btn[b-sc0tj1ov9o] {
    font-size: 0.72rem;
    font-weight: 600;
    font-family: inherit;
    padding: 3px 11px;
    border-radius: 6px;
    border: 1px solid #86efac;
    background: #fff;
    color: #166534;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms;
}
.sd-assign-btn:hover[b-sc0tj1ov9o] { background: #f0fdf4; }

.sd-assign-btn-warn[b-sc0tj1ov9o] {
    border-color: #fcd34d;
    color: #92400e;
}
.sd-assign-btn-warn:hover[b-sc0tj1ov9o] { background: #fffbeb; }

/* ────────────────────────────────────────────────────────────────
   NOTAS + TAGS
   ──────────────────────────────────────────────────────────────── */

.sd-notes[b-sc0tj1ov9o] {
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.55;
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    padding: 8px 12px;
    border-radius: 0 7px 7px 0;
    margin: 0;
}

.sd-tags[b-sc0tj1ov9o] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sd-tags-mt[b-sc0tj1ov9o] { margin-top: 10px; }

.sd-tag[b-sc0tj1ov9o] {
    font-size: 0.71rem;
    font-weight: 500;
    padding: 3px 11px;
    border-radius: 99px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* ────────────────────────────────────────────────────────────────
   EDICIÓN
   ──────────────────────────────────────────────────────────────── */

.sd-edit-card[b-sc0tj1ov9o] { background: #fafafa; }

.sd-field[b-sc0tj1ov9o] { margin-bottom: 14px; }
.sd-field:last-child[b-sc0tj1ov9o] { margin-bottom: 0; }

.sd-label[b-sc0tj1ov9o] {
    display: block;
    font-size: 0.69rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sd-textarea[b-sc0tj1ov9o] {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-family: inherit;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    resize: vertical;
    color: #334155;
    background: #fff;
    box-sizing: border-box;
    line-height: 1.5;
    transition: border-color 130ms, box-shadow 130ms;
}

.sd-textarea:focus[b-sc0tj1ov9o] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
}

.sd-tag-picker[b-sc0tj1ov9o] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sd-tag-opt[b-sc0tj1ov9o] {
    font-size: 0.74rem;
    font-weight: 500;
    font-family: inherit;
    padding: 4px 12px;
    border-radius: 99px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.sd-tag-opt:hover[b-sc0tj1ov9o] { background: #f1f5f9; border-color: #cbd5e1; }

.sd-tag-opt-on[b-sc0tj1ov9o] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #3b82f6;
}

.sd-select[b-sc0tj1ov9o] {
    width: 100%;
    padding: 8px 32px 8px 12px;
    font-size: 0.82rem;
    font-family: inherit;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #334155;
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 130ms;
}
.sd-select:focus[b-sc0tj1ov9o] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
}

.sd-lock-note[b-sc0tj1ov9o] {
    margin: 6px 0 0;
    font-size: 0.69rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ────────────────────────────────────────────────────────────────
   SKELETON / SHIMMER
   ──────────────────────────────────────────────────────────────── */

.sd-skel-group[b-sc0tj1ov9o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sd-skel[b-sc0tj1ov9o] {
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e8edf3 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: sd-shimmer-b-sc0tj1ov9o 1.5s ease-in-out infinite;
    margin-bottom: 8px;
    height: 10px;
}

.sd-skel:last-child[b-sc0tj1ov9o] { margin-bottom: 0; }

.sd-skel-label[b-sc0tj1ov9o]  { height: 8px;  width: 28%; margin-bottom: 12px; }
.sd-skel-sm[b-sc0tj1ov9o]     { width: 36%; }
.sd-skel-md[b-sc0tj1ov9o]     { width: 56%; }
.sd-skel-lg[b-sc0tj1ov9o]     { width: 74%; }
.sd-skel-full[b-sc0tj1ov9o]   { width: 100%; }
.sd-skel-result[b-sc0tj1ov9o] { height: 62px; border-radius: 10px; }

@keyframes sd-shimmer-b-sc0tj1ov9o {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* ────────────────────────────────────────────────────────────────
   EMPTY STATE
   ──────────────────────────────────────────────────────────────── */

.sd-empty[b-sc0tj1ov9o] {
    font-size: 0.79rem;
    color: #94a3b8;
    text-align: center;
    padding: 12px 0;
    margin: 0;
}
/* /Pages/Sells/Sales_List.razor.rz.scp.css */
/* ============================================================ */
/* TOKENS — Variables compartidas con el design system          */
/* ============================================================ */
:root[b-jozwcbe0xh] {
    --navy: #1e2a38;
    --navy-light: #2d3e52;
    --blue: #3B82F6;
    --teal: #0ea5e9;
    --accent: #3B82F6;
    --oliva: #16a34a;
    --amber: #d97706;
    --amber-soft: #fffbeb;
    --rose-soft: #fef2f2;
    --border: #e2e8f0;
    --bg: #f0f2f5;
    --surface: #ffffff;
    --text-primary: #1e2a38;
    --text-muted: #64748b;
    --text-subtle: #94a3b8;
}

/* ============================================================ */
/* CONTENEDOR PRINCIPAL                                          */
/* ============================================================ */
.view[b-jozwcbe0xh] {
    padding: 2rem 2.5rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg);
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    color: var(--text-primary);
}

/* ============================================================ */
/* CABECERA DE PÁGINA                                            */
/* ============================================================ */
.page-header[b-jozwcbe0xh] {
    margin-bottom: 1.75rem;
}

.breadcrumb[b-jozwcbe0xh] {
    font-size: 0.75rem;
    color: var(--text-subtle);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.breadcrumb a[b-jozwcbe0xh] {
    color: var(--text-subtle);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}

.breadcrumb a:hover[b-jozwcbe0xh] {
    color: var(--navy);
}

.page-header-row[b-jozwcbe0xh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-title[b-jozwcbe0xh] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 0.25rem;
    line-height: 1.2;
}

.page-subtitle[b-jozwcbe0xh] {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    max-width: 560px;
}

.page-content[b-jozwcbe0xh] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ============================================================ */
/* GRID DE STAT CARDS                                           */
/* ============================================================ */
.grid[b-jozwcbe0xh] {
    display: grid;
    gap: 1rem;
}

.grid-4[b-jozwcbe0xh] {
    grid-template-columns: repeat(4, 1fr);
}

.grid-3[b-jozwcbe0xh] {
    grid-template-columns: repeat(3, 1fr);
}

.grid-2[b-jozwcbe0xh] {
    grid-template-columns: repeat(2, 1fr);
}

.stat-card[b-jozwcbe0xh] {
    background: var(--surface);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: relative;
    overflow: hidden;
}

.stat-card[b-jozwcbe0xh]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--blue);
    border-radius: 3px 0 0 3px;
}

.stat-label[b-jozwcbe0xh] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-subtle);
}

.stat-value[b-jozwcbe0xh] {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
}

/* ============================================================ */
/* FILTER BAR                                                    */
/* ============================================================ */
.filter-bar[b-jozwcbe0xh] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.85rem 1.1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.input[b-jozwcbe0xh] {
    padding: 0.45rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--navy);
    background: #f8fafc;
    transition: border-color 0.15s, box-shadow 0.15s;
    height: 34px;
    box-sizing: border-box;
}

.input:focus[b-jozwcbe0xh] {
    outline: none;
    border-color: var(--blue);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input[b-jozwcbe0xh]::placeholder {
    color: var(--text-subtle);
}

/* ============================================================ */
/* BOTONES                                                       */
/* ============================================================ */
.btn[b-jozwcbe0xh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, transform 0.12s, box-shadow 0.15s, border-color 0.15s;
    height: 34px;
    box-sizing: border-box;
}

.btn:hover[b-jozwcbe0xh] {
    transform: translateY(-1px);
}

.btn:active[b-jozwcbe0xh] {
    transform: translateY(0);
}

.btn-primary[b-jozwcbe0xh] {
    background-color: var(--navy);
    color: #fff;
    box-shadow: 0 2px 8px rgba(30, 42, 56, 0.2);
}

.btn-primary:hover[b-jozwcbe0xh] {
    background-color: #0f1a24;
    box-shadow: 0 4px 14px rgba(30, 42, 56, 0.3);
}

.btn-secondary[b-jozwcbe0xh] {
    background-color: #f1f5f9;
    color: var(--navy);
    border: 1.5px solid var(--border);
}
/* /Pages/Sells/Sales_Monitor.razor.rz.scp.css */
/* ============================================================ */
/* TOKENS — Variables compartidas con el design system          */
/* ============================================================ */
:root[b-9rerz128n1] {
    --navy: #1e2a38;
    --navy-light: #2d3e52;
    --blue: #3B82F6;
    --blue-dark: #2563eb;
    --teal: #0ea5e9;
    --oliva: #16a34a;
    --amber: #d97706;
    --amber-soft: #fffbeb;
    --rose-soft: #fef2f2;
    --purple: #7c3aed;
    --orange: #f97316;
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --bg: #f0f2f5;
    --bg-alt: #f8fafc;
    --surface: #ffffff;
    --text-primary: #1e2a38;
    --text-muted: #64748b;
    --text-subtle: #94a3b8;
}


/* ============================================================ */
/* CONTENEDOR PRINCIPAL                                          */
/* ============================================================ */
.monitor-container[b-9rerz128n1] {
    padding: 2rem 2.5rem;
    font-family: 'Segoe UI', 'Inter', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg);
    min-height: 100vh;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.font-inter[b-9rerz128n1] {
    font-family: 'Segoe UI', 'Inter', Tahoma, Geneva, Verdana, sans-serif;
}

.min-h-screen[b-9rerz128n1] {
    min-height: 100vh;
}

.bg-gray-50[b-9rerz128n1] {
    background-color: var(--bg-alt);
}

.p-6[b-9rerz128n1] {
    padding: 1.5rem;
}


/* ============================================================ */
/* CABECERA DE PÁGINA                                            */
/* ============================================================ */
.text-3xl[b-9rerz128n1] {
    font-size: 1.75rem;
    line-height: 1.2;
}

.font-bold[b-9rerz128n1] {
    font-weight: 700;
}

.text-gray-900[b-9rerz128n1] {
    color: var(--navy);
}

.tracking-tight[b-9rerz128n1] {
    letter-spacing: -0.025em;
}

.text-sm[b-9rerz128n1] {
    font-size: 0.875rem;
}

.text-gray-500[b-9rerz128n1] {
    color: var(--text-muted);
}

.mt-1[b-9rerz128n1] {
    margin-top: 0.25rem;
}

/* Botones de cabecera */
.px-4[b-9rerz128n1] {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-2[b-9rerz128n1] {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.bg-white[b-9rerz128n1] {
    background-color: var(--surface);
}

.border[b-9rerz128n1] {
    border-width: 1px;
    border-style: solid;
}

.border-gray-300[b-9rerz128n1] {
    border-color: #cbd5e1;
}

.border-gray-200[b-9rerz128n1] {
    border-color: var(--border);
}

.border-gray-100[b-9rerz128n1] {
    border-color: var(--border-light);
}

.border-blue-100[b-9rerz128n1] {
    border-color: #bfdbfe;
}

.rounded-lg[b-9rerz128n1] {
    border-radius: 0.5rem;
}

.rounded-xl[b-9rerz128n1] {
    border-radius: 0.75rem;
}

.rounded-md[b-9rerz128n1] {
    border-radius: 0.375rem;
}

.rounded[b-9rerz128n1] {
    border-radius: 0.25rem;
}

.rounded-full[b-9rerz128n1] {
    border-radius: 9999px;
}

.shadow-sm[b-9rerz128n1] {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.shadow-2xl[b-9rerz128n1] {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
}

.text-gray-700[b-9rerz128n1] {
    color: #374151;
}

.text-gray-600[b-9rerz128n1] {
    color: #475569;
}

.text-gray-400[b-9rerz128n1] {
    color: var(--text-subtle);
}

.text-white[b-9rerz128n1] {
    color: #ffffff;
}

.bg-gray-900[b-9rerz128n1] {
    background-color: var(--navy);
}

.hover\:bg-gray-50:hover[b-9rerz128n1] {
    background-color: var(--bg-alt);
}

.hover\:bg-gray-800:hover[b-9rerz128n1] {
    background-color: var(--navy-light);
}

.transition-colors[b-9rerz128n1] {
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}


/* ============================================================ */
/* FLEX & GRID — Utilidades de layout                           */
/* ============================================================ */
.flex[b-9rerz128n1] {
    display: flex;
}

.inline-flex[b-9rerz128n1] {
    display: inline-flex;
}

.inline-block[b-9rerz128n1] {
    display: inline-block;
}

.block[b-9rerz128n1] {
    display: block;
}

.grid[b-9rerz128n1] {
    display: grid;
}

.flex-col[b-9rerz128n1] {
    flex-direction: column;
}

.flex-wrap[b-9rerz128n1] {
    flex-wrap: wrap;
}

.flex-1[b-9rerz128n1] {
    flex: 1 1 0%;
}

.flex-shrink-0[b-9rerz128n1] {
    flex-shrink: 0;
}

.items-center[b-9rerz128n1] {
    align-items: center;
}

.items-end[b-9rerz128n1] {
    align-items: flex-end;
}

.items-start[b-9rerz128n1] {
    align-items: flex-start;
}

.justify-between[b-9rerz128n1] {
    justify-content: space-between;
}

.justify-center[b-9rerz128n1] {
    justify-content: center;
}

.gap-2[b-9rerz128n1] {
    gap: 0.5rem;
}

.gap-3[b-9rerz128n1] {
    gap: 0.75rem;
}

.gap-4[b-9rerz128n1] {
    gap: 1rem;
}

.gap-6[b-9rerz128n1] {
    gap: 1.5rem;
}

.space-y-3>*+*[b-9rerz128n1] {
    margin-top: 0.75rem;
}

.space-y-6>*+*[b-9rerz128n1] {
    margin-top: 1.5rem;
}

.grid-cols-2[b-9rerz128n1] {
    grid-template-columns: repeat(2, 1fr);
}


/* ============================================================ */
/* POSICIONAMIENTO                                               */
/* ============================================================ */
.relative[b-9rerz128n1] {
    position: relative;
}

.absolute[b-9rerz128n1] {
    position: absolute;
}

.fixed[b-9rerz128n1] {
    position: fixed;
}

.sticky[b-9rerz128n1] {
    position: sticky;
}

.top-0[b-9rerz128n1] {
    top: 0;
}

.right-0[b-9rerz128n1] {
    right: 0;
}

.inset-0[b-9rerz128n1] {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.inset-y-0[b-9rerz128n1] {
    top: 0;
    bottom: 0;
}

.left-0[b-9rerz128n1] {
    left: 0;
}

.pl-10[b-9rerz128n1] {
    padding-left: 2.5rem;
}

.z-10[b-9rerz128n1] {
    z-index: 10;
}

.z-50[b-9rerz128n1] {
    z-index: 50;
}

.transform[b-9rerz128n1] {
    transform: translateZ(0);
}

.translate-x-0[b-9rerz128n1] {
    transform: translateX(0);
}

.max-w-full[b-9rerz128n1] {
    max-width: 100%;
}

.max-w-md[b-9rerz128n1] {
    max-width: 28rem;
}

.max-w-xs[b-9rerz128n1] {
    max-width: 20rem;
}

.w-screen[b-9rerz128n1] {
    width: 100vw;
}

.w-full[b-9rerz128n1] {
    width: 100%;
}

.w-48[b-9rerz128n1] {
    width: 12rem;
}

.w-64[b-9rerz128n1] {
    width: 16rem;
}

.w-4[b-9rerz128n1],
.h-4[b-9rerz128n1] {
    width: 1rem;
    height: 1rem;
}

.w-5[b-9rerz128n1],
.h-5[b-9rerz128n1] {
    width: 1.25rem;
    height: 1.25rem;
}

.w-6[b-9rerz128n1],
.h-6[b-9rerz128n1] {
    width: 1.5rem;
    height: 1.5rem;
}

.w-8[b-9rerz128n1] {
    width: 2rem;
}

.w-12[b-9rerz128n1],
.h-12[b-9rerz128n1] {
    width: 3rem;
    height: 3rem;
}

.w-16[b-9rerz128n1] {
    width: 4rem;
}

.w-24[b-9rerz128n1] {
    width: 6rem;
}

.h-3[b-9rerz128n1] {
    height: 0.75rem;
}

.h-20[b-9rerz128n1] {
    height: 5rem;
}

.h-32[b-9rerz128n1] {
    height: 8rem;
}

.h-40[b-9rerz128n1] {
    height: 10rem;
}

.min-w-\[250px\][b-9rerz128n1] {
    min-width: 250px;
}


/* ============================================================ */
/* ESPACIADO                                                     */
/* ============================================================ */
.p-3[b-9rerz128n1] {
    padding: 0.75rem;
}

.p-4[b-9rerz128n1] {
    padding: 1rem;
}

.px-1\.5[b-9rerz128n1] {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

.px-2[b-9rerz128n1] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-3[b-9rerz128n1] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-6[b-9rerz128n1] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-3[b-9rerz128n1] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.py-0\.5[b-9rerz128n1] {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.py-1[b-9rerz128n1] {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-2[b-9rerz128n1] {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-4[b-9rerz128n1] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-6[b-9rerz128n1] {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-12[b-9rerz128n1] {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.pl-3[b-9rerz128n1] {
    padding-left: 0.75rem;
}

.pr-3[b-9rerz128n1] {
    padding-right: 0.75rem;
}

.pb-2[b-9rerz128n1] {
    padding-bottom: 0.5rem;
}

.pt-2[b-9rerz128n1] {
    padding-top: 0.5rem;
}

.pl-10[b-9rerz128n1] {
    padding-left: 2.5rem;
}

.mb-1[b-9rerz128n1] {
    margin-bottom: 0.25rem;
}

.mb-2[b-9rerz128n1] {
    margin-bottom: 0.5rem;
}

.mb-3[b-9rerz128n1] {
    margin-bottom: 0.75rem;
}

.mb-6[b-9rerz128n1] {
    margin-bottom: 1.5rem;
}

.mt-0\.5[b-9rerz128n1] {
    margin-top: 0.125rem;
}

.mt-1[b-9rerz128n1] {
    margin-top: 0.25rem;
}

.mx-auto[b-9rerz128n1] {
    margin-left: auto;
    margin-right: auto;
}

.ml-auto[b-9rerz128n1] {
    margin-left: auto;
}


/* ============================================================ */
/* TIPOGRAFÍA                                                    */
/* ============================================================ */
.text-lg[b-9rerz128n1] {
    font-size: 1.125rem;
}

.text-xs[b-9rerz128n1] {
    font-size: 0.75rem;
}

.font-medium[b-9rerz128n1] {
    font-weight: 500;
}

.font-semibold[b-9rerz128n1] {
    font-weight: 600;
}

.font-mono[b-9rerz128n1] {
    font-family: 'Courier New', 'Lucida Console', monospace;
}

.italic[b-9rerz128n1] {
    font-style: italic;
}

.uppercase[b-9rerz128n1] {
    text-transform: uppercase;
}

.tracking-wider[b-9rerz128n1] {
    letter-spacing: 0.05em;
}

.leading-relaxed[b-9rerz128n1] {
    line-height: 1.625;
}

.truncate[b-9rerz128n1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.whitespace-nowrap[b-9rerz128n1] {
    white-space: nowrap;
}

.text-left[b-9rerz128n1] {
    text-align: left;
}

.text-right[b-9rerz128n1] {
    text-align: right;
}

.text-center[b-9rerz128n1] {
    text-align: center;
}


/* ============================================================ */
/* OVERFLOW / VISIBILIDAD                                        */
/* ============================================================ */
.overflow-hidden[b-9rerz128n1] {
    overflow: hidden;
}

.overflow-x-auto[b-9rerz128n1] {
    overflow-x: auto;
}

.overflow-y-auto[b-9rerz128n1] {
    overflow-y: auto;
}

.cursor-pointer[b-9rerz128n1] {
    cursor: pointer;
}

.cursor-not-allowed[b-9rerz128n1] {
    cursor: not-allowed;
}

.pointer-events-none[b-9rerz128n1] {
    pointer-events: none;
}

.opacity-80[b-9rerz128n1] {
    opacity: 0.8;
}

.opacity-75[b-9rerz128n1] {
    opacity: 0.75;
}

.opacity-50[b-9rerz128n1] {
    opacity: 0.5;
}

.sr-only[b-9rerz128n1] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ============================================================ */
/* BARRA DE FILTROS (STICKY)                                     */
/* ============================================================ */
.filters-panel[b-9rerz128n1],
.sticky.top-0.z-10.bg-white.rounded-xl[b-9rerz128n1] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface);
    border-radius: 14px;
    border: 1px solid var(--border);
    padding: 0.9rem 1.2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

/* Etiqueta de filtro */
.text-xs.font-semibold.text-gray-600[b-9rerz128n1] {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.45px;
    display: block;
    margin-bottom: 0.25rem;
}

/* Inputs y selects del filter bar */
.filters-panel input[type="text"][b-9rerz128n1],
.filters-panel input[type="date"][b-9rerz128n1],
.filters-panel select[b-9rerz128n1],
.w-full.px-3.py-2.border.border-gray-300.rounded-lg[b-9rerz128n1],
.w-full.pl-10.pr-3.py-2.border.border-gray-300.rounded-lg[b-9rerz128n1],
.text-sm.border-gray-300.rounded-md.py-1.px-2[b-9rerz128n1] {
    height: 36px;
    padding: 0 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: 9px;
    font-size: 0.855rem;
    font-family: inherit;
    color: var(--navy);
    background: var(--bg-alt);
    box-sizing: border-box;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

.w-full.pl-10.pr-3.py-2.border.border-gray-300.rounded-lg[b-9rerz128n1] {
    padding-left: 2.25rem;
}

.filters-panel input:focus[b-9rerz128n1],
.filters-panel select:focus[b-9rerz128n1],
.focus\:ring-2:focus[b-9rerz128n1],
.focus\:border-blue-500:focus[b-9rerz128n1] {
    outline: none;
    border-color: var(--blue);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.filters-panel input[b-9rerz128n1]::placeholder {
    color: var(--text-subtle);
}

/* Icono de búsqueda dentro del input */
.absolute.inset-y-0.left-0.pl-3.flex.items-center.pointer-events-none[b-9rerz128n1] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    padding-left: 0.65rem;
    display: flex;
    align-items: center;
    pointer-events: none;
}


/* ============================================================ */
/* BLOQUE TABLA PRINCIPAL                                        */
/* ============================================================ */
.bg-white.rounded-xl.shadow-sm.border.border-gray-200.overflow-hidden[b-9rerz128n1] {
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* Encabezado de tabla */
.bg-gray-50.border-b.border-gray-200[b-9rerz128n1] {
    background-color: var(--navy);
}

.bg-gray-50.border-b.border-gray-200 th[b-9rerz128n1],
.text-xs.uppercase.tracking-wider.text-gray-500.font-semibold[b-9rerz128n1] {
    padding: 0.7rem 1.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.7);
    text-align: left;
    border: none;
    white-space: nowrap;
}

.text-right[b-9rerz128n1] {
    text-align: right;
}

.text-center[b-9rerz128n1] {
    text-align: center;
}

/* Filas del tbody */
.divide-y.divide-gray-100>tr[b-9rerz128n1] {
    border-bottom: 1px solid var(--border-light);
}

.divide-y.divide-gray-100>tr:last-child[b-9rerz128n1] {
    border-bottom: none;
}

/* Fila hover */
.hover\:bg-blue-50:hover[b-9rerz128n1] {
    background-color: #eff6ff;
}

.group:hover .group-hover\:text-blue-600[b-9rerz128n1] {
    color: var(--blue-dark);
}

/* Celdas de datos */
.px-6.py-4[b-9rerz128n1] {
    padding: 0.82rem 1.5rem;
    vertical-align: middle;
}

.px-6.py-4.whitespace-nowrap[b-9rerz128n1] {
    white-space: nowrap;
}

/* Columna Pedido */
.text-sm.font-medium.text-gray-900[b-9rerz128n1] {
    font-size: 0.855rem;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
}

.text-xs.text-gray-500.mt-1[b-9rerz128n1] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* Columna Producto */
.text-sm.text-gray-900.truncate.max-w-xs.font-medium[b-9rerz128n1] {
    font-size: 0.855rem;
    font-weight: 600;
    color: var(--navy);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Chips ASIN / SKU */
.bg-gray-100.px-1\.5.py-0\.5.rounded.border.border-gray-200[b-9rerz128n1] {
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 5px;
    border: 1px solid var(--border);
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
}


/* ============================================================ */
/* COLUMNA RENTABILIDAD — SEMÁFORO DE MARGEN                     */
/* ============================================================ */
.text-green-600[b-9rerz128n1] {
    color: #16a34a;
}

.text-purple-600[b-9rerz128n1] {
    color: #7c3aed;
}

.text-orange-500[b-9rerz128n1] {
    color: #f97316;
}

.text-red-600[b-9rerz128n1] {
    color: #dc2626;
}

.text-blue-600[b-9rerz128n1] {
    color: var(--blue-dark);
}

.text-sm.font-bold[b-9rerz128n1] {
    font-size: 0.855rem;
    font-weight: 700;
}

.text-xs.text-gray-400.italic[b-9rerz128n1] {
    color: var(--text-subtle);
    font-style: italic;
}


/* ============================================================ */
/* BADGES DE MODALIDAD (FBA / FBM / ONSITE)                      */
/* ============================================================ */
.inline-flex.items-center.px-2.py-0\.5.rounded.text-xs.font-medium[b-9rerz128n1] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

/* FBA — naranja cálido */
.bg-orange-100.text-orange-700[b-9rerz128n1] {
    background: #ffedd5;
    color: #c2410c;
}

/* FBM — amarillo */
.bg-yellow-100.text-yellow-800[b-9rerz128n1] {
    background: #fef9c3;
    color: #854d0e;
}

/* ONSITE — azul */
.bg-blue-100.text-blue-700[b-9rerz128n1] {
    background: #dbeafe;
    color: #1d4ed8;
}

/* Default */
.bg-gray-100.text-gray-800[b-9rerz128n1] {
    background: #f1f5f9;
    color: #334155;
}


/* ============================================================ */
/* COLUMNA LOGÍSTICA — ICONOS SVG                                */
/* ============================================================ */
.w-5.h-5.text-green-500.mx-auto[b-9rerz128n1] {
    color: #22c55e;
    display: block;
    margin: 0 auto;
}

.w-5.h-5.text-amber-500.mx-auto[b-9rerz128n1] {
    color: var(--amber);
    display: block;
    margin: 0 auto;
}

.w-12.h-12.mx-auto.text-gray-300.mb-3[b-9rerz128n1] {
    color: #d1d5db;
    display: block;
    margin: 0 auto 0.75rem;
}

/* Estado vacío */
.px-6.py-12.text-center.text-gray-500[b-9rerz128n1] {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.855rem;
}


/* ============================================================ */
/* SKELETON / SHIMMER DE CARGA                                   */
/* ============================================================ */
@keyframes pulse-shimmer-b-9rerz128n1 {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

.animate-pulse[b-9rerz128n1] {
    animation: pulse-shimmer-b-9rerz128n1 1.6s ease-in-out infinite;
}

.h-4.bg-gray-200.rounded.w-24.animate-pulse[b-9rerz128n1],
.h-3.bg-gray-100.rounded.w-16.animate-pulse[b-9rerz128n1],
.h-4.bg-gray-200.rounded.w-48.animate-pulse[b-9rerz128n1],
.h-4.bg-gray-200.rounded.w-8[b-9rerz128n1],
.h-3.bg-gray-100.rounded.w-16[b-9rerz128n1],
.h-6.bg-gray-200.rounded-full.w-16[b-9rerz128n1],
.h-3.bg-gray-100.rounded.w-12[b-9rerz128n1],
.h-5.w-5.bg-gray-200.rounded-full[b-9rerz128n1] {
    background-color: #e9edf2;
    border-radius: 6px;
}

.h-20.bg-gray-200.rounded-xl[b-9rerz128n1],
.h-32.bg-gray-200.rounded-xl[b-9rerz128n1],
.h-40.bg-gray-200.rounded-xl[b-9rerz128n1] {
    background-color: #e9edf2;
    border-radius: 12px;
}

.bg-gray-200[b-9rerz128n1] {
    background-color: #e9edf2;
}

.bg-gray-100[b-9rerz128n1] {
    background-color: #f1f5f9;
}

.ml-auto[b-9rerz128n1] {
    margin-left: auto;
}

.w-24[b-9rerz128n1] {
    width: 6rem;
}

.w-16[b-9rerz128n1] {
    width: 4rem;
}

.w-48[b-9rerz128n1] {
    width: 12rem;
}

.w-8[b-9rerz128n1] {
    width: 2rem;
}

.w-12[b-9rerz128n1] {
    width: 3rem;
}


/* ============================================================ */
/* PAGINACIÓN                                                    */
/* ============================================================ */
.px-6.py-4.border-t.border-gray-200.flex.items-center.justify-between.bg-gray-50[b-9rerz128n1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.9rem 1.5rem;
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
}

.flex.items-center.gap-4[b-9rerz128n1] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.text-sm.text-gray-500[b-9rerz128n1] {
    font-size: 0.825rem;
    color: var(--text-muted);
}

/* Select de filas por página */
.text-sm.border-gray-300.rounded-md.py-1.px-2.focus\:ring-blue-500[b-9rerz128n1] {
    height: 30px;
    padding: 0 0.6rem;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--navy);
    background: var(--surface);
    cursor: pointer;
    box-sizing: border-box;
}

/* Botones Anterior / Siguiente */
.px-3.py-1.border.border-gray-300.rounded-md.bg-white.text-sm.font-medium.text-gray-700[b-9rerz128n1] {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 0.85rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    transition: background 0.13s, border-color 0.13s, transform 0.1s;
}

.px-3.py-1.border.border-gray-300.rounded-md.bg-white.text-sm.font-medium.text-gray-700:hover[b-9rerz128n1] {
    background: var(--bg-alt);
    border-color: #94a3b8;
}

.disabled\:opacity-50:disabled[b-9rerz128n1] {
    opacity: 0.4;
}

.disabled\:cursor-not-allowed:disabled[b-9rerz128n1] {
    cursor: not-allowed;
}

.flex.gap-2[b-9rerz128n1] {
    display: flex;
    gap: 0.5rem;
}


/* ============================================================ */
/* PANEL LATERAL (DRAWER)                                        */
/* ============================================================ */

/* Overlay backdrop */
.fixed.inset-0.overflow-hidden.z-50[b-9rerz128n1] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 50;
}

.absolute.inset-0.bg-gray-500.bg-opacity-75.transition-opacity.backdrop-blur-sm[b-9rerz128n1] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(30, 42, 56, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.3s;
}

/* Contenedor del drawer */
.fixed.inset-y-0.right-0.pl-10.max-w-full.flex[b-9rerz128n1] {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    max-width: 100%;
    display: flex;
}

/* Panel deslizante */
.w-screen.max-w-md.transform.transition.ease-in-out.duration-300.translate-x-0.bg-white.shadow-2xl.flex.flex-col[b-9rerz128n1] {
    width: 100vw;
    max-width: 28rem;
    background: var(--surface);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(0);
}

/* Cabecera del drawer */
.flex.items-center.justify-between.px-6.py-4.border-b.border-gray-200[b-9rerz128n1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.text-lg.font-bold.text-gray-900[b-9rerz128n1] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0;
}

/* Botón cerrar */
.rounded-md.text-gray-400.hover\:text-gray-500.focus\:outline-none[b-9rerz128n1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text-subtle);
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
    padding: 0;
}

.rounded-md.text-gray-400.hover\:text-gray-500.focus\:outline-none:hover[b-9rerz128n1] {
    background: var(--bg-alt);
    color: var(--text-muted);
}

.rounded-md.text-gray-400.hover\:text-gray-500.focus\:outline-none:focus[b-9rerz128n1] {
    outline: none;
}

/* Cuerpo scrollable del drawer */
.flex-1.overflow-y-auto.px-6.py-6[b-9rerz128n1] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}


/* ============================================================ */
/* SECCIONES INTERNAS DEL DRAWER                                 */
/* ============================================================ */

/* Bloque ID de pedido */
.bg-gray-50.rounded-xl.p-4.mb-6.border.border-gray-100[b-9rerz128n1] {
    background: var(--bg-alt);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-light);
    margin-bottom: 1.5rem;
}

.text-xs.font-semibold.text-gray-500.uppercase.tracking-wider.mb-1[b-9rerz128n1] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.55px;
    display: block;
    margin-bottom: 0.25rem;
}

.text-lg.font-mono.font-medium.text-gray-900[b-9rerz128n1] {
    font-size: 1rem;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--navy);
    display: block;
}

.text-sm.text-gray-500.mt-1[b-9rerz128n1] {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Subtítulos de sección */
.text-sm.font-bold.text-gray-900.mb-3.border-b.pb-2[b-9rerz128n1] {
    font-size: 0.855rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

/* Filas financieras */
.flex.justify-between.items-center[b-9rerz128n1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-sm.text-gray-600[b-9rerz128n1] {
    font-size: 0.855rem;
    color: #475569;
}

.text-sm.font-medium.text-gray-900[b-9rerz128n1] {
    font-size: 0.855rem;
    font-weight: 500;
    color: var(--navy);
}

.text-sm.text-red-600[b-9rerz128n1] {
    font-size: 0.855rem;
    color: #dc2626;
}

.text-sm.font-bold.text-gray-900[b-9rerz128n1] {
    font-size: 0.855rem;
    font-weight: 700;
    color: var(--navy);
}

.text-sm.font-bold.text-green-600[b-9rerz128n1] {
    font-size: 0.855rem;
    font-weight: 700;
    color: #16a34a;
}

.text-sm.font-bold.text-blue-600[b-9rerz128n1] {
    font-size: 0.855rem;
    font-weight: 700;
    color: var(--blue);
}

/* Separador punteado */
.pt-2.border-t.border-dashed.border-gray-200[b-9rerz128n1] {
    padding-top: 0.6rem;
    border-top: 1.5px dashed var(--border);
    margin-top: 0.15rem;
}

/* Bloque estado logístico */
.flex.items-center.gap-3.bg-blue-50.text-blue-800.p-3.rounded-lg.text-sm.border.border-blue-100[b-9rerz128n1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #eff6ff;
    color: #1e40af;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.855rem;
    border: 1px solid #bfdbfe;
}

.font-bold.block[b-9rerz128n1] {
    font-weight: 700;
    display: block;
}

.text-xs.opacity-80[b-9rerz128n1] {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Skeleton del drawer */
.animate-pulse.space-y-6[b-9rerz128n1] {
    animation: pulse-shimmer-b-9rerz128n1 1.6s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}


/* ============================================================ */
/* BOTONES DE ACCIÓN (CABECERA DE PÁGINA)                        */
/* ============================================================ */
.px-4.py-2.bg-white.border.border-gray-300.rounded-lg.shadow-sm.text-sm.font-medium.text-gray-700[b-9rerz128n1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 36px;
    padding: 0 1rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 9px;
    font-size: 0.855rem;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: background 0.13s, border-color 0.13s, transform 0.1s;
}

.px-4.py-2.bg-white.border.border-gray-300.rounded-lg.shadow-sm.text-sm.font-medium.text-gray-700:hover[b-9rerz128n1] {
    background: var(--bg-alt);
    border-color: #94a3b8;
    transform: translateY(-1px);
}

.px-4.py-2.bg-gray-900.text-white.rounded-lg.shadow-sm.text-sm.font-medium[b-9rerz128n1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 36px;
    padding: 0 1rem;
    background: var(--navy);
    border: none;
    border-radius: 9px;
    font-size: 0.855rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(30, 42, 56, 0.22);
    transition: background 0.13s, transform 0.1s, box-shadow 0.13s;
}

.px-4.py-2.bg-gray-900.text-white.rounded-lg.shadow-sm.text-sm.font-medium:hover[b-9rerz128n1] {
    background: var(--navy-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(30, 42, 56, 0.3);
}

.px-4.py-2.bg-gray-900.text-white.rounded-lg.shadow-sm.text-sm.font-medium:active[b-9rerz128n1],
.px-4.py-2.bg-white.border.border-gray-300.rounded-lg.shadow-sm.text-sm.font-medium.text-gray-700:active[b-9rerz128n1] {
    transform: translateY(0);
}


/* ============================================================ */
/* TABLA — ESTILOS BASE                                          */
/* ============================================================ */
.w-full.text-left.border-collapse[b-9rerz128n1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.855rem;
}

/* Columna de info dual en celdas */
.text-sm.font-medium.text-gray-900.group-hover\:text-blue-600[b-9rerz128n1] {
    font-size: 0.855rem;
    font-weight: 600;
    color: var(--navy);
    transition: color 0.13s;
}


/* ============================================================ */
/* RESPONSIVIDAD                                                  */
/* ============================================================ */
@media (max-width: 1200px) {
    .monitor-container[b-9rerz128n1] {
        padding: 1.5rem 1.75rem;
    }
}

@media (max-width: 900px) {
    .monitor-container[b-9rerz128n1] {
        padding: 1.25rem;
    }

    .filters-panel[b-9rerz128n1],
    .sticky.top-0.z-10.bg-white.rounded-xl[b-9rerz128n1] {
        flex-direction: column;
        align-items: stretch;
    }

    .w-48[b-9rerz128n1] {
        width: 100%;
    }

    .w-64[b-9rerz128n1] {
        width: 100%;
    }

    .flex-1.min-w-\[250px\][b-9rerz128n1] {
        min-width: 100%;
        width: 100%;
    }

    .flex.items-center.justify-between[b-9rerz128n1] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .monitor-container[b-9rerz128n1] {
        padding: 1rem;
        gap: 1rem;
    }

    .text-3xl[b-9rerz128n1] {
        font-size: 1.35rem;
    }

    /* Header apilado */
    .flex.justify-between.items-center.mb-6[b-9rerz128n1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .flex.gap-3[b-9rerz128n1] {
        width: 100%;
    }

    .px-4.py-2.bg-white.border.border-gray-300.rounded-lg.shadow-sm.text-sm.font-medium.text-gray-700[b-9rerz128n1],
    .px-4.py-2.bg-gray-900.text-white.rounded-lg.shadow-sm.text-sm.font-medium[b-9rerz128n1] {
        flex: 1;
        justify-content: center;
    }

    /* Paginación apilada */
    .px-6.py-4.border-t.border-gray-200.flex.items-center.justify-between.bg-gray-50[b-9rerz128n1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* Drawer full width en móvil */
    .w-screen.max-w-md.transform.transition.ease-in-out.duration-300.translate-x-0.bg-white.shadow-2xl.flex.flex-col[b-9rerz128n1] {
        max-width: 100vw;
    }

    .fixed.inset-y-0.right-0.pl-10.max-w-full.flex[b-9rerz128n1] {
        padding-left: 0;
    }
}

@media (max-width: 480px) {
    .text-sm.font-bold.text-gray-900.mb-3.border-b.pb-2[b-9rerz128n1] {
        font-size: 0.82rem;
    }

    .flex-1.overflow-y-auto.px-6.py-6[b-9rerz128n1] {
        padding: 1rem;
    }

    .flex.items-center.justify-between.px-6.py-4.border-b.border-gray-200[b-9rerz128n1] {
        padding: 0.85rem 1rem;
    }
}
/* /Pages/Sells/Sales_Speed.razor.rz.scp.css */
/* ============================================================ */
/* TOKENS — Variables compartidas con el design system          */
/* ============================================================ */
:root[b-spl8ba0cq8] {
    --navy:        #1e2a38;
    --navy-light:  #2d3e52;
    --blue:        #3B82F6;
    --teal:        #0ea5e9;
    --accent:      #3B82F6;
    --oliva:       #16a34a;
    --amber:       #d97706;
    --amber-soft:  #fffbeb;
    --rose-soft:   #fef2f2;
    --border:      #e2e8f0;
    --bg:          #f0f2f5;
    --surface:     #ffffff;
    --text-primary: #1e2a38;
    --text-muted:   #64748b;
    --text-subtle:  #94a3b8;
}

/* ============================================================ */
/* CONTENEDOR PRINCIPAL                                          */
/* ============================================================ */
.view[b-spl8ba0cq8] {
    padding: 2rem 2.5rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg);
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    color: var(--text-primary);
}

/* ============================================================ */
/* CABECERA DE PÁGINA                                            */
/* ============================================================ */
.page-header[b-spl8ba0cq8] {
    margin-bottom: 1.75rem;
}

.breadcrumb[b-spl8ba0cq8] {
    font-size: 0.75rem;
    color: var(--text-subtle);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.breadcrumb a[b-spl8ba0cq8] {
    color: var(--text-subtle);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}

.breadcrumb a:hover[b-spl8ba0cq8] {
    color: var(--navy);
}

.page-header-row[b-spl8ba0cq8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-title[b-spl8ba0cq8] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 0.25rem;
    line-height: 1.2;
}

.page-subtitle[b-spl8ba0cq8] {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    max-width: 560px;
}

.page-content[b-spl8ba0cq8] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ============================================================ */
/* GRID DE STAT CARDS                                           */
/* ============================================================ */
.grid[b-spl8ba0cq8] {
    display: grid;
    gap: 1rem;
}

.grid-4[b-spl8ba0cq8] { grid-template-columns: repeat(4, 1fr); }
.grid-3[b-spl8ba0cq8] { grid-template-columns: repeat(3, 1fr); }
.grid-2[b-spl8ba0cq8] { grid-template-columns: repeat(2, 1fr); }

.stat-card[b-spl8ba0cq8] {
    background: var(--surface);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: relative;
    overflow: hidden;
}

.stat-card[b-spl8ba0cq8]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--blue);
    border-radius: 3px 0 0 3px;
}

.stat-label[b-spl8ba0cq8] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-subtle);
}

.stat-value[b-spl8ba0cq8] {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
}

/* ============================================================ */
/* FILTER BAR                                                    */
/* ============================================================ */
.filter-bar[b-spl8ba0cq8] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.85rem 1.1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.input[b-spl8ba0cq8] {
    padding: 0.45rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--navy);
    background: #f8fafc;
    transition: border-color 0.15s, box-shadow 0.15s;
    height: 34px;
    box-sizing: border-box;
}

.input:focus[b-spl8ba0cq8] {
    outline: none;
    border-color: var(--blue);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input[b-spl8ba0cq8]::placeholder {
    color: var(--text-subtle);
}

/* ============================================================ */
/* BOTONES                                                       */
/* ============================================================ */
.btn[b-spl8ba0cq8] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, transform 0.12s, box-shadow 0.15s, border-color 0.15s;
    height: 34px;
    box-sizing: border-box;
}

.btn:hover[b-spl8ba0cq8] { transform: translateY(-1px); }
.btn:active[b-spl8ba0cq8] { transform: translateY(0); }

.btn-primary[b-spl8ba0cq8] {
    background-color: var(--navy);
    color: #fff;
    box-shadow: 0 2px 8px rgba(30, 42, 56, 0.2);
}

.btn-primary:hover[b-spl8ba0cq8] {
    background-color: #0f1a24;
    box-shadow: 0 4px 14px rgba(30, 42, 56, 0.3);
}

.btn-secondary[b-spl8ba0cq8] {
    background-color: #f1f5f9;
    color: var(--navy);
    border: 1.5px solid var(--border);
}

.btn-secondary:hover[b-spl8ba0cq8] {
    background-color: #e2e8f0;
    border-color: #94a3b8;
}

.btn-secondary:disabled[b-spl8ba0cq8] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.btn-ghost[b-spl8ba0cq8] {
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid var(--border);
}

.btn-ghost:hover[b-spl8ba0cq8] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: var(--navy);
}

.btn-sm[b-spl8ba0cq8] {
    font-size: 0.8rem;
    padding: 0.38rem 0.85rem;
    height: 30px;
}

/* ============================================================ */
/* TABLA                                                         */
/* ============================================================ */
.table-wrapper[b-spl8ba0cq8] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.table[b-spl8ba0cq8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.855rem;
}

.table thead tr[b-spl8ba0cq8] {
    background-color: var(--navy);
}

.table th[b-spl8ba0cq8] {
    padding: 0.72rem 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.55px;
    color: rgba(255, 255, 255, 0.75);
    text-align: left;
    border: none;
    white-space: nowrap;
}

.table th.num[b-spl8ba0cq8],
.table td.num[b-spl8ba0cq8] {
    text-align: right;
}

.table tbody tr[b-spl8ba0cq8] {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.12s;
}

.table tbody tr:last-child[b-spl8ba0cq8] {
    border-bottom: none;
}

.table td[b-spl8ba0cq8] {
    padding: 0.78rem 1rem;
    color: #374151;
    vertical-align: middle;
}

.table tbody tr.clickable[b-spl8ba0cq8] {
    cursor: pointer;
}

.table tbody tr.clickable:hover[b-spl8ba0cq8] {
    background-color: #f8fafc;
}

/* ============================================================ */
/* BADGES                                                        */
/* ============================================================ */
.badge[b-spl8ba0cq8] {
    display: inline-block;
    font-size: 0.71rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* Modalidades */
.badge-primary[b-spl8ba0cq8]   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.badge-secondary[b-spl8ba0cq8] { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.badge-tertiary[b-spl8ba0cq8]  { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.badge-default[b-spl8ba0cq8]   { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }

/* FBA específico */
.badge-fba[b-spl8ba0cq8]  { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.badge-fbm[b-spl8ba0cq8]  { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

/* Riesgo / Velocidad */
.badge-danger[b-spl8ba0cq8]    { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.badge-warning[b-spl8ba0cq8]   { background: var(--amber-soft); color: #92400e; border-color: #fde68a; }
.badge-success[b-spl8ba0cq8]   { background: #dcfce7; color: #14532d; border-color: #bbf7d0; }

/* ============================================================ */
/* STATUS INDICATORS                                             */
/* ============================================================ */
.status-indicator[b-spl8ba0cq8] {
    font-size: 0.8rem;
    font-weight: 700;
}

.status-success[b-spl8ba0cq8] { color: #16a34a; }
.status-warning[b-spl8ba0cq8] { color: var(--amber); }
.status-danger[b-spl8ba0cq8]  { color: #dc2626; }
.status-neutral[b-spl8ba0cq8] { color: var(--text-subtle); }

.text-success[b-spl8ba0cq8] { color: #16a34a; }
.text-warning[b-spl8ba0cq8] { color: var(--amber); }
.text-danger[b-spl8ba0cq8]  { color: #dc2626; }

/* ============================================================ */
/* UTILIDADES DE TEXTO                                           */
/* ============================================================ */
.mono[b-spl8ba0cq8],
.font-mono[b-spl8ba0cq8] { font-family: 'Courier New', 'Lucida Console', monospace; }

.font-medium[b-spl8ba0cq8] { font-weight: 500; }
.font-bold[b-spl8ba0cq8]   { font-weight: 700; }

.text-sm[b-spl8ba0cq8]   { font-size: 0.85rem; }
.text-xs[b-spl8ba0cq8]   { font-size: 0.75rem; }
.text-muted[b-spl8ba0cq8]  { color: var(--text-muted); }
.text-subtle[b-spl8ba0cq8] { color: var(--text-subtle); }
.text-center[b-spl8ba0cq8] { text-align: center; }

/* ============================================================ */
/* UTILIDADES FLEX                                               */
/* ============================================================ */
.flex[b-spl8ba0cq8]           { display: flex; }
.items-center[b-spl8ba0cq8]   { align-items: center; }
.justify-between[b-spl8ba0cq8] { justify-content: space-between; }
.gap-2[b-spl8ba0cq8] { gap: 0.5rem; }
.gap-3[b-spl8ba0cq8] { gap: 0.75rem; }

/* ============================================================ */
/* UTILIDADES DE ESPACIADO                                       */
/* ============================================================ */
.mb-4[b-spl8ba0cq8] { margin-bottom: 1rem; }
.mt-4[b-spl8ba0cq8] { margin-top: 1rem; }

/* ============================================================ */
/* RESPONSIVIDAD                                                 */
/* ============================================================ */
@media (max-width: 1100px) {
    .grid-4[b-spl8ba0cq8] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .view[b-spl8ba0cq8] { padding: 1.25rem; }
    .grid-4[b-spl8ba0cq8] { grid-template-columns: repeat(2, 1fr); }
    .filter-bar[b-spl8ba0cq8] { flex-direction: column; align-items: stretch; }
    .filter-bar .input[b-spl8ba0cq8] { width: 100%; }
    .page-header-row[b-spl8ba0cq8] { flex-direction: column; }
}

@media (max-width: 480px) {
    .grid-4[b-spl8ba0cq8] { grid-template-columns: 1fr; }
}
/* /Pages/Sells/Ventas.razor.rz.scp.css */
/* Estilos movidos a wwwroot/css/ventas-dashboard.css */
/* /Pages/Sells/VentasRegistro.razor.rz.scp.css */
/* ============================================================ */
/* VENTAS REGISTRO — FormTab: Ventas / Pestaña Registro         */
/* ============================================================ */

.ventas-reg-container[b-o5fg0lus4d] {
    padding: 2rem 3rem;
    background-color: #f0f2f5;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ---- Título + botón importar ---- */
.page-title-row[b-o5fg0lus4d] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.page-title[b-o5fg0lus4d] {
    font-weight: 800;
    color: #1e2a38;
    letter-spacing: -0.5px;
    margin: 0;
    font-size: 1.6rem;
}

.btn-import-api[b-o5fg0lus4d] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px dashed #94a3b8;
    border-radius: 10px;
    padding: 6px 16px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.btn-import-api:hover[b-o5fg0lus4d] {
    background: #f0f2f5;
    border-color: #3B82F6;
    color: #3B82F6;
}

/* ============================================================ */
/* FORMULARIO                                                   */
/* ============================================================ */
.reg-form-card[b-o5fg0lus4d] {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    padding: 2rem;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.reg-row[b-o5fg0lus4d] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.reg-field[b-o5fg0lus4d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.reg-field-wide[b-o5fg0lus4d]   { flex: 2; }
.reg-field-narrow[b-o5fg0lus4d] { flex: 0.6; }

.field-label[b-o5fg0lus4d] {
    display: flex;
    align-items: center;
    padding: 0 14px;
    height: 36px;
    font-size: 0.78rem;
    font-weight: 700;
    background: #f8fafc;
    border: 1px solid #e8edf2;
    border-bottom: none;
    color: #64748b;
    border-radius: 8px 8px 0 0;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.dark-label[b-o5fg0lus4d] {
    background: #1e2a38;
    color: rgba(255, 255, 255, 0.9);
    border-color: #1e2a38;
}

.field-input[b-o5fg0lus4d] {
    border: 1px solid #e8edf2;
    border-radius: 0 0 8px 8px;
    padding: 0 12px;
    height: 40px;
    font-size: 0.88rem;
    color: #1e2a38;
    background: #f8fafc;
    outline: none;
    width: 100%;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}

.field-input:focus[b-o5fg0lus4d] {
    background: #fff;
    border-color: #3B82F6;
}

/* ============================================================ */
/* SELECTOR DE MÉTODO DE ASIGNACIÓN                            */
/* ============================================================ */
.assignment-section[b-o5fg0lus4d] {
    background: #f8fafc;
    border: 1px solid #e8edf2;
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

.assignment-section-title[b-o5fg0lus4d] {
    font-size: 0.75rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 0.75rem;
}

.assignment-options[b-o5fg0lus4d] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.assign-opt[b-o5fg0lus4d] {
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1.5px solid #e8edf2;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    text-align: left;
}

.assign-opt:hover[b-o5fg0lus4d] {
    border-color: #94a3b8;
    background: #f8fafc;
}

.assign-opt-active[b-o5fg0lus4d] {
    border-color: #1e2a38 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(30, 42, 56, 0.08);
}

.assign-opt-defer.assign-opt-active[b-o5fg0lus4d] {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

.assign-opt-icon[b-o5fg0lus4d] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.icon-green[b-o5fg0lus4d]  { background: #dcfce7; color: #16a34a; }
.icon-blue[b-o5fg0lus4d]   { background: #eff6ff; color: #3B82F6; }
.icon-orange[b-o5fg0lus4d] { background: #fffbeb; color: #d97706; }

.assign-opt-text[b-o5fg0lus4d] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    flex: 1;
}

.assign-opt-title[b-o5fg0lus4d] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e2a38;
}

.assign-opt-sub[b-o5fg0lus4d] {
    font-size: 0.7rem;
    color: #94a3b8;
}

.assign-check[b-o5fg0lus4d] { font-size: 0.9rem; }

/* ============================================================ */
/* PANELES DE INSTANCIA                                         */
/* ============================================================ */
.instance-panel[b-o5fg0lus4d] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-radius: 10px;
    padding: 14px 18px;
    flex-wrap: wrap;
}

.panel-fifo[b-o5fg0lus4d] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 4px solid #16a34a;
}

.panel-manual[b-o5fg0lus4d] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3B82F6;
}

.panel-defer[b-o5fg0lus4d] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
}

.panel-badge[b-o5fg0lus4d] {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    margin-top: 2px;
    flex-shrink: 0;
}

.badge-green[b-o5fg0lus4d]  { background: #16a34a; color: #fff; }
.badge-blue[b-o5fg0lus4d]   { background: #3B82F6; color: #fff; }
.badge-orange[b-o5fg0lus4d] { background: #f59e0b; color: #fff; }

/* ---- Fifo/Manual: grilla de datos ---- */
.instance-info-grid[b-o5fg0lus4d] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    flex: 1;
}

.iinfo-row[b-o5fg0lus4d] {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 0.82rem;
}

.iinfo-row-full[b-o5fg0lus4d] { flex-basis: 100%; }

.iinfo-label[b-o5fg0lus4d] { color: #64748b; font-weight: 600; white-space: nowrap; }
.iinfo-val[b-o5fg0lus4d]   { color: #1e2a38; font-weight: 700; }

/* ---- Desglose de utilidad ---- */
.utilidad-desglose[b-o5fg0lus4d] {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 4px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.desglose-item[b-o5fg0lus4d] {
    font-size: 0.76rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.desglose-sep[b-o5fg0lus4d] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #94a3b8;
}

.desglose-total[b-o5fg0lus4d] {
    font-size: 0.82rem;
    font-weight: 800;
}

/* ---- Manual: área de búsqueda ---- */
.manual-search-area[b-o5fg0lus4d] { flex: 1; }

.manual-search-row[b-o5fg0lus4d] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.scan-input-wrapper[b-o5fg0lus4d] {
    display: flex;
    align-items: center;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    height: 40px;
    background-color: #ffffff;
    flex: 1;
}

.scan-input-box[b-o5fg0lus4d] {
    border: none;
    outline: none;
    flex: 1;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    font-family: inherit;
    background: transparent;
    color: #1e2a38;
}

.btn-buscar-inst[b-o5fg0lus4d] {
    background: #3B82F6;
    border: none;
    border-radius: 8px;
    color: #fff;
    padding: 0 18px;
    height: 40px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.13s;
    white-space: nowrap;
}

.btn-buscar-inst:hover[b-o5fg0lus4d] { background: #2563eb; transform: translateY(-1px); }

.manual-hint[b-o5fg0lus4d] {
    font-size: 0.78rem;
    color: #64748b;
    margin: 8px 0 0 0;
}

/* ---- Diferir: cuerpo ---- */
.defer-body[b-o5fg0lus4d] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
}

.defer-icon-wrap[b-o5fg0lus4d] { flex-shrink: 0; }

.defer-icon[b-o5fg0lus4d] {
    width: 42px;
    height: 42px;
    background: #fde68a;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #92400e;
}

.defer-text[b-o5fg0lus4d] { flex: 1; }

.defer-title[b-o5fg0lus4d] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #92400e;
    margin: 0 0 4px 0;
}

.defer-sub[b-o5fg0lus4d] {
    font-size: 0.78rem;
    color: #78350f;
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.defer-meta[b-o5fg0lus4d] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.defer-tag[b-o5fg0lus4d] {
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid #fde68a;
    border-radius: 20px;
    padding: 3px 10px;
    color: #78350f;
    white-space: nowrap;
}

/* ============================================================ */
/* ACCIONES                                                     */
/* ============================================================ */
.reg-actions[b-o5fg0lus4d] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 0.75rem;
    border-top: 1px solid #e8edf2;
    margin-top: 0.25rem;
}

.btn-cancel[b-o5fg0lus4d] {
    background: transparent;
    border: 1.5px solid #e8edf2;
    border-radius: 10px;
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.btn-cancel:hover[b-o5fg0lus4d] { background: #f0f2f5; }

.btn-save[b-o5fg0lus4d] {
    background: #1e2a38;
    border: none;
    border-radius: 10px;
    padding: 8px 24px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(30, 42, 56, 0.25);
}

.btn-save:hover[b-o5fg0lus4d] {
    background: #0f1a24;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(30, 42, 56, 0.32);
}

/* ============================================================ */
/* MODULE NAV + FORMTAB TABS                                   */
/* ============================================================ */
.module-nav[b-o5fg0lus4d] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}

.btn-back-dash[b-o5fg0lus4d] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e2a38;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.btn-back-dash:hover[b-o5fg0lus4d] { background: #f0f2f5; border-color: #94a3b8; }

.module-breadcrumb[b-o5fg0lus4d] { display: flex; align-items: center; gap: 6px; }

.module-tag[b-o5fg0lus4d] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.tag-sells[b-o5fg0lus4d] { background: #dcfce7; color: #15803d; }

.breadcrumb-current[b-o5fg0lus4d] { font-size: 0.8rem; font-weight: 700; color: #1e2a38; }

.flow-hint[b-o5fg0lus4d] {
    margin-left: auto;
    font-size: 0.72rem;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 12px;
    white-space: nowrap;
    transition: color 0.2s;
}

.formtab-tabs[b-o5fg0lus4d] {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #e2e8f0;
}

.tab-btn[b-o5fg0lus4d] {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 8px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    border-radius: 6px 6px 0 0;
    font-family: inherit;
}

.tab-btn:hover[b-o5fg0lus4d] { color: #1e2a38; background: #f8fafc; }

.tab-btn.active[b-o5fg0lus4d] {
    color: #1e2a38;
    border-bottom-color: #1e2a38;
}
/* /Pages/Storage/Almacen.razor.rz.scp.css */
/* Estilos movidos a wwwroot/css/almacen-dashboard.css */
/* /Pages/Storage/Entry.razor.rz.scp.css */
/* Estilos movidos a wwwroot/css/entry.css */
/* ============================================================ */
/* VARIABLES LOCALES & BASE                                     */
/* ============================================================ */
.entry-main[b-td4rejvp3s] {
    --surface-alt: #f8fafc;
    --oliva: #65a30d;
    --rose: #e11d48;
    --amber: #d97706;
    --rose-soft: #ffe4e6;
    --amber-soft: #fef3c7;
    --accent: #0284c7;
    --accent-soft: #e0f2fe;

    background-color: #f0f2f5;
    min-height: 100vh;
    padding: 24px 32px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #1e293b;
}

.entry-view[b-td4rejvp3s] {
    max-width: 1400px;
    margin: 0 auto;
}

/* ============================================================ */
/* UTILS                                                        */
/* ============================================================ */
.mt-2[b-td4rejvp3s] {
    margin-top: 0.5rem;
}

.mt-3[b-td4rejvp3s] {
    margin-top: 0.75rem;
}

.mt-4[b-td4rejvp3s] {
    margin-top: 1rem;
}

.mt-6[b-td4rejvp3s] {
    margin-top: 1.5rem;
}

.mb-1[b-td4rejvp3s] {
    margin-bottom: 0.25rem;
}

.mb-2[b-td4rejvp3s] {
    margin-bottom: 0.5rem;
}

.mb-6[b-td4rejvp3s] {
    margin-bottom: 1.5rem;
}

.text-xs[b-td4rejvp3s] {
    font-size: 0.75rem;
}

.text-sm[b-td4rejvp3s] {
    font-size: 0.875rem;
}

.text-2xl[b-td4rejvp3s] {
    font-size: 1.5rem;
    font-weight: 700;
}

.text-muted[b-td4rejvp3s] {
    color: #64748b;
}

.mono[b-td4rejvp3s] {
    font-family: 'Courier New', Courier, monospace;
}

.font-display[b-td4rejvp3s] {
    font-family: system-ui, -apple-system, sans-serif;
}

.text-priority[b-td4rejvp3s] {
    color: var(--rose);
}

.text-noinfo[b-td4rejvp3s] {
    color: var(--amber);
}

/* ============================================================ */
/* HEADER                                                       */
/* ============================================================ */
.breadcrumb[b-td4rejvp3s] {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.breadcrumb a[b-td4rejvp3s] {
    color: #1e293b;
    text-decoration: none;
    font-weight: 600;
}

.page-title[b-td4rejvp3s] {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 0.25rem 0;
}

.page-subtitle[b-td4rejvp3s] {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
    max-width: 800px;
}

.page-content[b-td4rejvp3s] {
    margin-top: 1.5rem;
}

/* ============================================================ */
/* ALERTS                                                       */
/* ============================================================ */
.alert[b-td4rejvp3s] {
    display: flex;
    gap: 12px;
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.alert-info[b-td4rejvp3s] {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
}

.alert-icon[b-td4rejvp3s] {
    font-size: 1.2rem;
    line-height: 1;
}

/* ============================================================ */
/* GRID LAYOUT                                                  */
/* ============================================================ */
.entry-grid[b-td4rejvp3s] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    align-items: start;
}

/* ============================================================ */
/* CARDS & SCANNER                                              */
/* ============================================================ */
.card[b-td4rejvp3s] {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.card-alt[b-td4rejvp3s] {
    background: var(--surface-alt);
}

.card-section-title[b-td4rejvp3s] {
    font-weight: 700;
    font-size: 1.1rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

.label[b-td4rejvp3s] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.input[b-td4rejvp3s] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.input:focus[b-td4rejvp3s] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.mono-input[b-td4rejvp3s] {
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* ============================================================ */
/* METRICS                                                      */
/* ============================================================ */
.section-subtitle[b-td4rejvp3s] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.metrics-grid[b-td4rejvp3s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.metric-label[b-td4rejvp3s] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.dot[b-td4rejvp3s] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot-normal[b-td4rejvp3s] {
    background: var(--oliva);
}

.dot-priority[b-td4rejvp3s] {
    background: var(--rose);
}

.dot-noinfo[b-td4rejvp3s] {
    background: var(--amber);
}

.seller-stat[b-td4rejvp3s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

/* ============================================================ */
/* BUTTONS                                                      */
/* ============================================================ */
.flex-col-gap[b-td4rejvp3s] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn[b-td4rejvp3s] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.btn-sm[b-td4rejvp3s] {
    font-size: 0.8rem;
}

.btn-secondary[b-td4rejvp3s] {
    background: #e2e8f0;
    color: #1e293b;
}

.btn-secondary:hover[b-td4rejvp3s] {
    background: #cbd5e1;
}

.btn-ghost[b-td4rejvp3s] {
    background: transparent;
    border-color: #e2e8f0;
    color: #64748b;
}

.btn-ghost:hover[b-td4rejvp3s] {
    background: #f1f5f9;
    color: #1e293b;
}

/* ============================================================ */
/* TABS & TABLE                                                 */
/* ============================================================ */
.tabs[b-td4rejvp3s] {
    display: flex;
    gap: 4px;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.tab[b-td4rejvp3s] {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #64748b;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.tab.active[b-td4rejvp3s] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.tab:hover:not(.active)[b-td4rejvp3s] {
    color: #1e293b;
}

.table-wrapper[b-td4rejvp3s] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.table[b-td4rejvp3s] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.table th[b-td4rejvp3s] {
    background: #f8fafc;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
}

.table td[b-td4rejvp3s] {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    border-bottom: 1px solid #f1f5f9;
}

.table tbody tr:last-child td[b-td4rejvp3s] {
    border-bottom: none;
}

.clickable[b-td4rejvp3s] {
    cursor: pointer;
    transition: background 0.15s;
}

.clickable:hover[b-td4rejvp3s] {
    filter: brightness(0.97);
}

.row-priority[b-td4rejvp3s] {
    background: var(--rose-soft);
}

.row-noinfo[b-td4rejvp3s] {
    background: var(--amber-soft);
}

/* ============================================================ */
/* BADGES                                                       */
/* ============================================================ */
.badge[b-td4rejvp3s] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
}

.badge-neutral[b-td4rejvp3s] {
    background: #e2e8f0;
    color: #334155;
}

.badge-accent[b-td4rejvp3s] {
    background: #e0f2fe;
    color: #0284c7;
}

.badge-warning[b-td4rejvp3s] {
    background: #fef3c7;
    color: #b45309;
}

.badge-success[b-td4rejvp3s] {
    background: #dcfce7;
    color: #166534;
}

.badge-danger[b-td4rejvp3s] {
    background: #fee2e2;
    color: #b91c1c;
}

/* ============================================================ */
/* INFO CARD (Bottom Right)                                     */
/* ============================================================ */
.info-card[b-td4rejvp3s] {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    padding: 1rem;
    border-radius: 8px;
}

.info-card-title[b-td4rejvp3s] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 8px;
}

/* ============================================================ */
/* RESPONSIVE                                                   */
/* ============================================================ */
@media (max-width: 992px) {
    .entry-grid[b-td4rejvp3s] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Storage/For_Sales.razor.rz.scp.css */
/* Estilos movidos a wwwroot/css/for-sales.css */
/* /Pages/Storage/Kittin_Process.razor.rz.scp.css */
/* Estilos movidos a wwwroot/css/kitting-process.css */
/* /Pages/Storage/Labels_Print.razor.rz.scp.css */
/* Estilos movidos a wwwroot/css/labels-print.css */
/* /Pages/Tools/ToolsHome.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════ */
/* BENTO GRID PREMIUM - HERRAMIENTAS DASHBOARD                    */
/* ══════════════════════════════════════════════════════════════ */

.herr-page[b-i6tllynppv] {
    padding: 36px 48px;
    background-color: #f8fafc; /* Color de fondo suave (slate-50) */
    min-height: calc(100vh - 60px);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #0f172a;
}

.herr-header[b-i6tllynppv] {
    margin-bottom: 48px;
}

.herr-title[b-i6tllynppv] {
    font-size: 2.25rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px 0;
    letter-spacing: -0.03em;
}

.herr-subtitle[b-i6tllynppv] {
    font-size: 1.1rem;
    color: #64748b;
    margin: 0;
    max-width: 650px;
    line-height: 1.6;
}

.herr-bento-container[b-i6tllynppv] {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.herr-section[b-i6tllynppv] {
    background: transparent;
    margin-bottom: 40px;
}

.herr-section-header[b-i6tllynppv] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.herr-section-icon[b-i6tllynppv] {
    font-size: 1.4rem;
    color: #4f46e5;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.15);
}

.herr-section-title[b-i6tllynppv] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.02em;
}

.herr-grid[b-i6tllynppv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 28px;
}

.herr-card[b-i6tllynppv] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 30px;
    position: relative;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px -8px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

/* Efecto de borde degradado animado */
.herr-card[b-i6tllynppv]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 2px; 
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.6), rgba(16, 185, 129, 0.4));
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.herr-card:hover[b-i6tllynppv] {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -10px rgba(79, 70, 229, 0.15);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-color: transparent;
}

.herr-card:hover[b-i6tllynppv]::before {
    opacity: 1;
}

.herr-card-icon-wrap[b-i6tllynppv] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 24px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.6), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.herr-card:hover .herr-card-icon-wrap[b-i6tllynppv] {
    transform: scale(1.15) rotate(5deg);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8), 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Colores de íconos estilizados con gradientes */
.herr-icon-blue[b-i6tllynppv] { background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); color: #4338ca; }
.herr-icon-green[b-i6tllynppv] { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); color: #047857; }
.herr-icon-orange[b-i6tllynppv] { background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%); color: #c2410c; }
.herr-icon-red[b-i6tllynppv] { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #b91c1c; }
.herr-icon-purple[b-i6tllynppv] { background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); color: #6d28d9; }

.herr-card-body[b-i6tllynppv] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.herr-card-title[b-i6tllynppv] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 12px 0;
    letter-spacing: -0.01em;
}

.herr-card-desc[b-i6tllynppv] {
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

.herr-card-arrow[b-i6tllynppv] {
    position: absolute;
    bottom: 28px;
    right: 28px;
    font-size: 1.4rem;
    color: #4f46e5;
    opacity: 0;
    transform: translateX(-15px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    background: #e0e7ff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.herr-card:hover .herr-card-arrow[b-i6tllynppv] {
    opacity: 1;
    transform: translateX(0);
}

/* Estado deshabilitado premium */
.herr-card-disabled[b-i6tllynppv] {
    cursor: not-allowed;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    box-shadow: none;
}

.herr-card-disabled:hover[b-i6tllynppv] {
    transform: none;
    box-shadow: none;
    background: #f8fafc;
    border-color: #cbd5e1;
}

.herr-card-disabled[b-i6tllynppv]::before {
    display: none;
}

.herr-card-disabled .herr-card-icon-wrap[b-i6tllynppv] {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    box-shadow: none;
}

.herr-card-disabled .herr-card-title[b-i6tllynppv] {
    color: #64748b;
}

.herr-card-disabled .herr-card-desc[b-i6tllynppv] {
    color: #94a3b8;
}

.herr-card-disabled:hover .herr-card-icon-wrap[b-i6tllynppv] {
    transform: none;
}

.herr-card-disabled .herr-card-arrow[b-i6tllynppv] {
    display: none;
}

.herr-badge[b-i6tllynppv] {
    position: absolute;
    top: 26px;
    right: 26px;
    background: #ffffff;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

@media (max-width: 768px) {
    .herr-page[b-i6tllynppv] {
        padding: 24px;
    }
    .herr-grid[b-i6tllynppv] {
        grid-template-columns: 1fr;
    }
}