@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* ================================================
   BillWare Design Tokens
   ================================================ */
:root {
    --bw-bg:                    #f8fafc;
    --bw-surface:               #ffffff;
    --bw-surface-alt:           #f1f5f9;
    --bw-border:                #e2e8f0;
    --bw-text:                  #0f172a;
    --bw-text-secondary:        #475569;
    --bw-text-muted:            #94a3b8;
    --bw-sidebar-bg:            #0f172a;
    --bw-sidebar-hover:         #1e293b;

    /* Brand primary — navy corporativo (#003053). Hover/active son variaciones
       derivadas para dar feedback de interaccion; -bright/-light son tintes del
       mismo tono usados donde el navy puro no tendria contraste suficiente
       (ej. indicador activo sobre el sidebar oscuro). */
    --bw-primary:               #003053;
    --bw-primary-hover:         #0a4a73;
    --bw-primary-active:        #062338;
    --bw-primary-light:         #e3ebf0;
    --bw-primary-bright:        #1f6690;
    --bw-sidebar-active-bg:     rgba(31, 102, 144, 0.18);

    --bw-success:               #059669;
    --bw-warning:               #d97706;
    --bw-danger:                #dc2626;
    --bw-radius:                10px;
    --bw-radius-sm:             6px;
    --bw-shadow-sm:             0 1px 3px rgba(15, 23, 42, 0.07);
    --bw-shadow:                0 4px 12px rgba(15, 23, 42, 0.10);
    --bw-topbar-height:         64px;
    --bw-sidebar-width:         260px;
    --bw-sidebar-collapsed:     72px;
    --bw-transition:            0.25s ease;

    /* Tipografia - escala consistente (reemplaza tamanos sueltos por selector) */
    --bw-text-xs:               11px;
    --bw-text-sm:               12px;
    --bw-text-base:             13px;
    --bw-text-md:               14px;
    --bw-text-lg:               15px;
    --bw-text-xl:               17px;
    --bw-text-2xl:              20px;
    --bw-text-3xl:              22px;
    --bw-font-normal:           400;
    --bw-font-medium:           500;
    --bw-font-semibold:         600;
    --bw-font-bold:             700;

    /* Espaciado - escala de 4px */
    --bw-space-1:               4px;
    --bw-space-2:               8px;
    --bw-space-3:               12px;
    --bw-space-4:               16px;
    --bw-space-5:               20px;
    --bw-space-6:               24px;
    --bw-space-8:               32px;
    --bw-space-10:              40px;

    /* Z-index - documenta las capas ya usadas en el shell (MainLayout,
       LoadingOverlay, dialogos Radzen) para no repetir numeros magicos */
    --bw-z-sidebar:             50;
    --bw-z-sidebar-overlay:     45;
    --bw-z-topbar:              40;
    --bw-z-loading-overlay:     1000;
    --bw-z-modal-backdrop:      1049;
    --bw-z-modal:               1050;
    --bw-z-sticky-toolbar:      9000;
    --bw-z-system-banner:       9999;

    /* Foco - anillo visible para navegacion por teclado. -dark es para
       controles sobre superficies oscuras (sidebar), donde el ring normal
       no tendria contraste suficiente. */
    --bw-focus-ring:            0 0 0 3px rgba(0, 48, 83, 0.35);
    --bw-focus-ring-dark:       0 0 0 3px rgba(255, 255, 255, 0.45);
}

/* ================================================
   Base
   ================================================ */
html, body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--bw-text);
    background: var(--bw-bg);
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app {
    min-height: 100vh;
}

h1:focus { outline: none; }

/* ================================================
   Focus visible — navegación por teclado
   Solo aplica con :focus-visible (teclado), no con click de mouse.
   ================================================ */
:focus-visible {
    outline: none;
    box-shadow: var(--bw-focus-ring);
}

.bw-sidebar :focus-visible,
.bw-topbar :focus-visible {
    box-shadow: var(--bw-focus-ring-dark);
}

/* ================================================
   Scrollbar
   ================================================ */
::-webkit-scrollbar          { width: 5px; height: 5px; }
::-webkit-scrollbar-button   { display: none; }
::-webkit-scrollbar-track    { background: #f1f5f9; }
::-webkit-scrollbar-thumb    { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ================================================
   Links & Buttons
   ================================================ */
a, .btn-link { color: var(--bw-primary); }

.btn-primary {
    color: #fff;
    background-color: var(--bw-primary);
    border-color: var(--bw-primary);
}

/* ================================================
   Validation
   ================================================ */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--bw-success); }
.invalid                             { outline: 1px solid var(--bw-danger); }
.validation-message                  { color: var(--bw-danger); font-size: 12px; }

/* ================================================
   Blazor Error UI
   ================================================ */
#blazor-error-ui {
    background: #fef3c7;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.15);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after { content: "An error has occurred."; }

/* ================================================
   Admin UX/UI 4 — Page Headers, Tables, Badges
   ================================================ */

/* --- Page Header -------------------------------- */
.bw-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    flex-wrap: wrap;
}

.bw-page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--bw-text);
    margin: 0 0 4px 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.bw-page-subtitle {
    font-size: 13px;
    color: var(--bw-text-muted);
    margin: 0;
    line-height: 1.4;
}

.bw-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.bw-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bw-primary);
    color: #fff !important;
    border: none;
    border-radius: var(--bw-radius-sm);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--bw-transition);
    white-space: nowrap;
    text-decoration: none !important;
    line-height: 1.4;
}

.bw-btn-primary:hover,
.bw-btn-primary:focus {
    background: var(--bw-primary-hover);
    color: #fff !important;
    outline: none;
}

/* --- Toolbar ------------------------------------ */
.bw-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

/* --- Table Card --------------------------------- */
.bw-table-card {
    background: var(--bw-surface);
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius);
    box-shadow: var(--bw-shadow-sm);
    overflow: hidden;
    margin-bottom: 8px;
}

.bw-table-card .rz-datatable,
.bw-table-card .rz-data-grid {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.bw-table-card .rz-grid-table thead tr th {
    background: var(--bw-surface-alt) !important;
    color: var(--bw-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-bottom: 1px solid var(--bw-border) !important;
    padding: 10px 14px !important;
}

.bw-table-card .rz-grid-table tbody tr td {
    padding: 11px 14px !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--bw-border) !important;
    vertical-align: middle !important;
}

.bw-table-card .rz-grid-table tbody tr:last-child > td {
    border-bottom: none !important;
}

.bw-table-card .rz-grid-table tbody tr:hover > td {
    background: var(--bw-surface-alt) !important;
    transition: background 0.12s ease;
}

.bw-table-card .rz-pager {
    border-top: 1px solid var(--bw-border) !important;
    padding: 8px 14px !important;
    background: var(--bw-surface) !important;
}

/* --- Empty State -------------------------------- */
.bw-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 52px 24px;
    text-align: center;
    background: var(--bw-surface);
}

.bw-empty-state-icon {
    font-size: 42px;
    color: var(--bw-text-muted);
    margin-bottom: 14px;
    line-height: 1;
    opacity: 0.65;
}

.bw-empty-state-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--bw-text);
    margin: 0 0 6px 0;
}

.bw-empty-state-desc {
    font-size: 13px;
    color: var(--bw-text-muted);
    margin: 0 0 20px 0;
    max-width: 300px;
    line-height: 1.5;
}

/* --- Status Badges ------------------------------ */
.bw-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.4;
}

.bw-badge-default { background: #f1f5f9; color: #475569; }
.bw-badge-success { background: #d1fae5; color: #065f46; }
.bw-badge-warning { background: #fef3c7; color: #92400e; }
.bw-badge-danger  { background: #fee2e2; color: #991b1b; }
.bw-badge-info    { background: #dbeafe; color: #1d4ed8; }
.bw-badge-purple  { background: #ede9fe; color: #5b21b6; }
.bw-badge-dark    { background: #e2e8f0; color: #334155; }

/* --- Cell helpers ------------------------------- */
.bw-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bw-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

.bw-cell-with-avatar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bw-cell-primary {
    font-weight: 500;
    color: var(--bw-text);
    font-size: 13px;
    line-height: 1.3;
}

.bw-cell-secondary {
    font-size: 11px;
    color: var(--bw-text-muted);
    margin-top: 2px;
    line-height: 1.3;
}

/* --- Acciones (listados de facturas/documentos) -----------------
   Columna de acciones siempre visible y accesible: se fija (sticky)
   al borde derecho del contenedor con scroll propio de RadzenDataGrid
   (.rz-data-grid-data ya trae overflow-x:auto), y los botones usan
   flex-wrap para acomodarse en más de una línea en vez de desbordar
   horizontalmente cuando una factura acumula muchos botones de estado
   (Terminal/Pagar/Cancelar/Emitir, etc.). El orden visual (Ver →
   Imprimir → PDF → Cobro → otras) se fija por-botón con "order" desde
   el propio componente, sin alterar el comportamiento de cada uno. --- */
.bw-actions-col {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--bw-surface) !important;
}

th.bw-actions-col {
    z-index: 3;
}

.bw-actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
    max-width: 100%;
}

/* Anchos medianos/móviles: los botones con texto (Terminal, Pagar,
   Completar, Emitir) se reducen a solo-ícono para dejar espacio a
   Ver/Imprimir/PDF sin necesitar un menú aparte — mantienen su
   "title" como accesible name. */
@media (max-width: 1024px) {
    .bw-actions-cell .rz-button-text {
        display: none;
    }
    .bw-actions-cell .rz-button {
        min-width: 30px;
        padding: 4px 6px !important;
    }
}

/* --- Responsive --------------------------------- */
@media (max-width: 768px) {
    .bw-page-header {
        flex-direction: column;
        align-items: stretch;
    }
    .bw-page-actions {
        justify-content: stretch;
    }
    .bw-btn-primary {
        width: 100%;
        justify-content: center;
    }
    .bw-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .bw-table-card {
        border-left: none;
        border-right: none;
        border-radius: 0;
        overflow-x: auto;
    }
    .bw-empty-state {
        padding: 32px 16px;
    }

    /* Columnas secundarias (ej. Vendedor, Fecha, Método pago) se ocultan
       en mobile — quedan solo las columnas prioritarias de cada tabla,
       reduciendo el scroll horizontal en vez de eliminarlo por completo.
       !important: app.css carga antes que material-base.css (ver index.html),
       así que sin esto el layout responsive propio de Radzen (que también
       fija su propio "display" en el td) gana la cascada. */
    .bw-col-hide-mobile { display: none !important; }
}

/* ================================================
   Admin UX/UI 5 — Form Layout System
   ================================================ */

/* --- Document header (form pages) -------------- */
.bw-doc-header {
    background: var(--bw-surface);
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius);
    box-shadow: var(--bw-shadow-sm);
    padding: 14px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.bw-doc-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--bw-text);
    margin: 0 0 2px 0;
    letter-spacing: -0.01em;
}

.bw-doc-number {
    font-size: 12px;
    color: var(--bw-text-muted);
}

.bw-btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--bw-radius-sm);
    border: 1px solid var(--bw-border);
    background: var(--bw-surface);
    color: var(--bw-text-secondary);
    font-size: 18px;
    cursor: pointer;
    transition: background var(--bw-transition), color var(--bw-transition);
    flex-shrink: 0;
}

.bw-btn-back:hover {
    background: var(--bw-surface-alt);
    color: var(--bw-text);
}

/* --- Readonly banner ---------------------------- */
.bw-readonly-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--bw-radius);
    font-size: 13px;
    color: #92400e;
    margin-bottom: 16px;
}

.bw-readonly-banner i { font-size: 17px; flex-shrink: 0; }

/* --- 2-column form grid ------------------------- */
.bw-form-grid {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 20px;
    align-items: start;
    margin-bottom: 40px;
}

.bw-form-main { min-width: 0; }

.bw-sticky-summary {
    position: sticky;
    top: calc(var(--bw-topbar-height) + 16px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- Form section card -------------------------- */
.bw-form-section {
    background: var(--bw-surface);
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius);
    box-shadow: var(--bw-shadow-sm);
    overflow: hidden;
}

.bw-form-section + .bw-form-section { margin-top: 12px; }

.bw-form-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--bw-border);
    background: var(--bw-surface-alt);
    min-height: 42px;
}

.bw-form-section-icon {
    font-size: 15px;
    color: var(--bw-text-secondary);
    flex-shrink: 0;
}

.bw-form-section-titles {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.bw-form-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--bw-text);
    line-height: 1.3;
}

.bw-form-section-subtitle {
    font-size: 11px;
    color: var(--bw-text-muted);
    font-weight: 400;
}

.bw-form-section-body { padding: 16px; }

/* --- Field label -------------------------------- */
.bw-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--bw-text-secondary);
    margin-bottom: 5px;
    letter-spacing: 0.01em;
}

/* --- Field wrapper (spacing between stacked fields, ej. diálogos laterales) */
.bw-field { margin-bottom: var(--bw-space-4); }

/* --- Radzen inline validation messages (Popup="false") ---
   Alinea el mensaje de error nativo de Radzen con el resto del sistema
   en vez del rojo/tamaño por defecto del tema Material. */
.rz-message.rz-messages-error {
    color: var(--bw-danger);
    font-size: var(--bw-text-xs);
    margin-top: 4px;
}

/* --- Item picker area --------------------------- */
.bw-item-picker {
    background: var(--bw-surface-alt);
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius-sm);
    padding: 12px;
    margin-bottom: 12px;
}

/* --- Document totals (sidebar) ----------------- */
.bw-doc-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    font-size: 13px;
    border-bottom: 1px dashed var(--bw-border);
}

.bw-doc-total-row:last-of-type { border-bottom: none; }

.bw-doc-total-label { color: var(--bw-text-muted); }

.bw-doc-total-grand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 4px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--bw-text);
    border-top: 2px solid var(--bw-border);
    margin-top: 4px;
}

/* --- Form actions (sidebar) -------------------- */
.bw-form-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Status timeline --------------------------- */
.bw-status-timeline {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.bw-timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 72px;
}

.bw-timeline-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--bw-border);
    background: var(--bw-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--bw-text-muted);
    z-index: 1;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.bw-timeline-dot.active {
    background: var(--bw-primary);
    border-color: var(--bw-primary);
    color: #fff;
}

.bw-timeline-dot.done {
    background: #d1fae5;
    border-color: #059669;
    color: #059669;
}

.bw-timeline-dot.danger {
    background: #fee2e2;
    border-color: #dc2626;
    color: #dc2626;
}

.bw-timeline-label {
    font-size: 10px;
    color: var(--bw-text-muted);
    margin-top: 4px;
    white-space: nowrap;
    font-weight: 500;
}

.bw-timeline-line {
    flex: 1;
    height: 2px;
    background: var(--bw-border);
    margin-top: -14px;
    margin-bottom: 18px;
    min-width: 12px;
}

.bw-timeline-line.done { background: #059669; }

/* --- Responsive --------------------------------- */
@media (max-width: 960px) {
    .bw-form-grid {
        grid-template-columns: 1fr;
    }
    .bw-sticky-summary {
        position: static;
    }
    .bw-doc-total-grand {
        font-size: 18px;
    }
}

/* ================================================
   Admin UX/UI 6 — Inventory Module
   ================================================ */

/* --- Stats row ---------------------------------- */
.inv-stats-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.inv-stat-card {
    background: var(--bw-surface);
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius);
    box-shadow: var(--bw-shadow-sm);
    padding: 10px 16px;
    min-width: 110px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inv-stat-label {
    font-size: 11px;
    color: var(--bw-text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.inv-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--bw-text);
    line-height: 1.1;
}

.inv-stat-value-sm { font-size: 16px; }

.inv-stat-note {
    font-size: 10px;
    color: var(--bw-text-muted);
    margin-top: 1px;
}

.inv-stat-success { border-left: 3px solid #059669; }
.inv-stat-danger  { border-left: 3px solid #dc2626; }
.inv-stat-info    { border-left: 3px solid #2563eb; }
.inv-stat-warning { border-left: 3px solid #d97706; }

/* --- Toolbar extras ----------------------------- */
.inv-btn-clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--bw-surface-alt);
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--bw-text-secondary);
    cursor: pointer;
    transition: background var(--bw-transition);
    white-space: nowrap;
}

.inv-btn-clear:hover { background: var(--bw-border); color: var(--bw-text); }
.inv-btn-clear i { font-size: 14px; }

/* --- Quantity helpers --------------------------- */
.inv-qty-ok      { font-weight: 600; color: #059669; font-size: 13px; }
.inv-qty-warning { font-weight: 600; color: #d97706; font-size: 13px; }

/* --- Form: margin display ----------------------- */
.inv-margin-display {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: var(--bw-radius-sm);
    margin-top: 6px;
}

.inv-margin-ok  { background: #d1fae5; color: #065f46; }
.inv-margin-bad { background: #fee2e2; color: #991b1b; }

/* --- Form: flag hints --------------------------- */
.inv-flag-label-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.inv-flag-hint {
    font-size: 11px;
    color: var(--bw-text-muted);
    line-height: 1.3;
}

/* --- Responsive: inventory stats ---------------- */
@media (max-width: 640px) {
    .inv-stats-row { gap: 8px; }
    .inv-stat-card { min-width: 120px; padding: 8px 12px; }
    .inv-stat-value { font-size: 18px; }
}

/* ================================================
   Admin UX/UI 7 — Quotation & Billing module
   ================================================ */

/* --- Print: hide admin shell -------------------- */
@media print {
    .bw-sidebar,
    .bw-topbar,
    .bw-page-header,
    .bw-toolbar,
    .bw-form-actions,
    .inv-stats-row,
    .rz-pager,
    .rz-datatable-pager,
    .rz-button:not(.bw-print-keep),
    .LoadingOverlay {
        display: none !important;
    }

    .bw-main-content,
    .bw-content-wrapper {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .bw-layout-body {
        display: block !important;
    }

    .bw-print-area {
        display: block !important;
    }

    .no-print { display: none !important; }

    .bw-btn-print { display: none !important; }
    .bw-btn-back  { display: none !important; }
}

/* --- Print area (quotation detail) -------------- */
.bw-print-area { display: contents; }

/* --- Quotation/Billing print button ------------ */
.bw-btn-print {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bw-surface);
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--bw-text-secondary);
    cursor: pointer;
    transition: background var(--bw-transition);
    text-decoration: none;
}

.bw-btn-print:hover {
    background: var(--bw-surface-alt);
    color: var(--bw-text);
}

/* --- Document header: action row improvements -- */
.bw-doc-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- Stat card: converted (purple) variant ------ */
.inv-stat-purple {
    border-left: 3px solid #7c3aed;
}

.inv-stat-purple .inv-stat-label { color: #7c3aed; }
.inv-stat-purple .inv-stat-value { color: #7c3aed; }

/* --- Billing: comprobante highlight ------------- */
.bw-proof-pending {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--bw-radius-sm);
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
}

/* --- Responsive: quotation/billing -------------- */
@media (max-width: 640px) {
    .bw-doc-header-actions { width: 100%; }
}

/* ================================================
   Admin UX/UI 9 — Auth pages (SignIn, RegisterCompany, SelectCompany)
   El markup de estas páginas vive dentro del ChildContent de AuthShell,
   así que estas clases deben ser globales: el CSS isolation de Blazor
   solo alcanza el árbol que el propio componente renderiza, no el
   contenido inyectado por la página que lo consume.
   ================================================ */
.bw-auth-title {
    font-size: var(--bw-text-2xl);
    font-weight: 700;
    color: var(--bw-text);
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}

.bw-auth-subtitle {
    font-size: var(--bw-text-base);
    color: var(--bw-text-muted);
    margin: 0 0 var(--bw-space-6) 0;
}

.bw-auth-field { margin-bottom: var(--bw-space-4); }

.bw-auth-field-error {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--bw-danger);
    font-size: var(--bw-text-xs);
    margin-top: 4px;
}

.bw-auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--bw-space-5);
    font-size: var(--bw-text-base);
    color: var(--bw-text-secondary);
    cursor: pointer;
}

.bw-auth-submit {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    font-size: var(--bw-text-md);
}

.bw-auth-footer {
    margin-top: var(--bw-space-5);
    text-align: center;
    font-size: var(--bw-text-base);
    color: var(--bw-text-secondary);
}

.bw-auth-footer a {
    color: var(--bw-primary);
    font-weight: 600;
    text-decoration: none;
}

.bw-auth-footer a:hover { text-decoration: underline; }

.bw-auth-section-label {
    font-size: var(--bw-text-sm);
    font-weight: 600;
    color: var(--bw-text-secondary);
    margin: var(--bw-space-6) 0 var(--bw-space-3);
}

/* ================================================
   Admin UX/UI 10 — Skeleton loaders
   Reemplaza el LoadingOverlay bloqueante en los listados principales.
   .skeleton/.h-100/.h-300 vivían solo en Dahsboard/Index.razor.css;
   se promueven aquí para que TableSkeleton.razor (y cualquier otra
   página) los reutilice sin duplicar la definición.
   ================================================ */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bw-surface-alt) 25%,
        var(--bw-border) 50%,
        var(--bw-surface-alt) 75%
    );
    background-size: 200% 100%;
    animation: bw-shimmer 1.4s infinite;
    border-radius: var(--bw-radius);
}

.skeleton.h-100 { height: 100px; }
.skeleton.h-300 { height: 300px; }

@keyframes bw-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Table skeleton (TableSkeleton.razor) ------- */
.bw-table-skeleton { padding: 4px 14px; }

.bw-skeleton-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--bw-border);
}

.bw-skeleton-row:last-child { border-bottom: none; }

.bw-skeleton-cell {
    height: 14px;
    border-radius: 4px;
}

@media (max-width: 640px) {
    .bw-skeleton-cell:nth-child(3),
    .bw-skeleton-cell:nth-child(4) {
        display: none;
    }
    .bw-skeleton-cell:nth-child(2) { width: 45% !important; }
}

/* ================================================
   Shared modal pattern (.bw-modal-overlay / .bw-modal)
   Used across pages (Billing Index, BillingForm, FiscalSequences, ...).
   Must live in global CSS, not a per-component .razor.css,
   since Blazor CSS isolation scopes .razor.css to its own component.
   ================================================ */
/* Radzen hardcodes its popup z-index to a fixed 2000 via JS
   (Radzen.Blazor.js: "popup.style.zIndex = 2000"), which is lower than our
   .bw-modal-overlay (9000). Any RadzenDropDown/autocomplete/multiselect
   opened inside one of our custom modals (FiscalSequences "Nueva secuencia",
   BillingForm credit/debit-note modals) was rendering invisibly underneath
   the modal — it opened (toggled in the DOM) but was never visible or
   clickable. !important is required to beat the inline style Radzen sets. */
.rz-dropdown-panel,
.rz-autocomplete-panel,
.rz-multiselect-panel,
.rz-splitbutton-menu {
    z-index: 9500 !important;
}

.bw-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(2px);
}

.bw-modal {
    background: var(--bw-surface, #fff);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bw-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--bw-border, #e5e7eb);
    flex-shrink: 0;
}

.bw-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--bw-text, #111827);
}

.bw-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--bw-bg, #f3f4f6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--bw-text-muted, #6b7280);
    transition: background 0.15s;
}

.bw-modal-close:hover { background: var(--bw-border, #e5e7eb); }

.bw-modal-body {
    padding: 18px 22px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bw-modal-footer {
    padding: 14px 22px 18px;
    border-top: 1px solid var(--bw-border, #e5e7eb);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
}

.bw-modal-textarea {
    width: 100%;
    border: 1.5px solid var(--bw-border, #e5e7eb);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    resize: vertical;
    min-height: 70px;
    color: var(--bw-text, #111827);
    background: var(--bw-surface, #fff);
    box-sizing: border-box;
    font-family: inherit;
}

.bw-modal-textarea:focus {
    outline: none;
    border-color: var(--bw-primary, #003053);
}

.bw-hint {
    font-size: 13px;
    color: var(--bw-text-muted, #6b7280);
    margin: 0;
}

.bw-modal-error {
    font-size: 13px;
    color: var(--bw-danger, #dc2626);
    margin: 8px 0 0;
}

@media (max-width: 640px) {
    .bw-modal {
        max-width: 100%;
        border-radius: 14px 14px 0 0;
        max-height: 92vh;
        align-self: flex-end;
    }

    .bw-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .bw-modal-footer {
        justify-content: stretch;
    }
}