/* Set estándar de íconos para las acciones de fila .erp-btn-icon (Bootstrap Icons,
   siempre la variante OUTLINE, nunca -fill, por consistencia). Cada acción
   tiene también un color universal (ver reglas ":has()" junto a .erp-btn-icon
   más abajo) — el color se aplica automáticamente según el ícono, no requiere
   ninguna clase extra en el botón:
     Ver/View              bi-eye                 azul cielo
     Editar/Edit           bi-pencil              índigo (color primario)
     Eliminar/Delete       bi-trash               rojo
     Confirmar/Aprobar     bi-check-circle        verde
     Cancelar/Rechazar     bi-x-circle            rojo
     Copiar/Copy           bi-copy                gris (neutro)
     Facturar/Invoice      bi-file-earmark-text   índigo (color primario)
     Ajustar stock/Stock   bi-box-seam            ámbar
     Contabilizar/Post     bi-send-check          verde azulado (teal)
     Descargar/Download    bi-download            azul cielo
   Al agregar una nueva acción de fila, reutiliza uno de estos si la acción es
   semánticamente la misma (mismo ícono = mismo color automáticamente); solo
   introduce un ícono nuevo para un tipo de acción genuinamente nuevo, y
   agrégalo a la lista de colores de abajo.

   El mismo criterio aplica a los botones completos (.erp-btn) de exportar:
     Excel   bi-file-earmark-excel   verde
     PDF     bi-file-earmark-pdf     rojo
   No requieren clase extra tampoco — solo usa ese ícono dentro del botón. */

/* VARIABLES DE DISEÑO
   Colores, tipografía y tamaños de texto reutilizados en todo el sistema. */
:root {
    --erp-font-sans: 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --erp-font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --erp-text-xs: 0.75rem;
    --erp-text-sm: 0.875rem;
    --erp-text-md: 1rem;
    --erp-text-lg: 1.125rem;
    --erp-text-3xl: 1.875rem;
    --erp-primary: #4f46e5;
    --erp-primary-hover: #4338ca;
    --erp-primary-soft: #eef2ff;
    --erp-primary-contrast-text: #ffffff;
    --erp-primary-text-on-soft: var(--erp-primary);
    --erp-secondary: #0891b2;
    --erp-secondary-hover: #0e7490;
    --erp-secondary-soft: #ecfeff;
    --erp-secondary-contrast-text: #ffffff;
    --erp-secondary-text-on-soft: var(--erp-secondary);
    --erp-danger: #dc2626;
    --erp-success: #10b981;
    --erp-warning: #f59e0b;
    --erp-info: #0ea5e9;
    --erp-text-primary: #111827;
    --erp-text-secondary: #374151;
    --erp-text-muted: #6b7280;
    --erp-border: #e5e7eb;
    --erp-border-strong: #d1d5db;
    --erp-bg: #f9fafb;
    --erp-surface: #ffffff;
    --erp-surface-subtle: #f9fafb;
    --erp-surface-muted: #f3f4f6;
    --erp-table-row-hover-bg: #f9fafb;
    --erp-shadow: rgba(15, 23, 42, 0.08);
    --erp-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --erp-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10);
    --erp-shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.18);
}

/* MODO CLARO EXPLÍCITO
   :root ya son los valores de modo claro por defecto, pero eso solo ayuda cuando NADA
   en el árbol puso [data-theme="dark"] en un ancestro. Si un contenedor necesita forzarse
   a modo claro DENTRO de una página que está en modo oscuro (p. ej. el panel de vista previa
   "Modo Claro" en /settings/branding), las variables heredadas del ancestro oscuro ganan a
   menos que exista este selector [data-theme="light"] explícito para volver a fijarlas. */
[data-theme="light"] {
    --erp-primary: #4f46e5;
    --erp-primary-hover: #4338ca;
    --erp-primary-soft: #eef2ff;
    --erp-primary-contrast-text: #ffffff;
    --erp-primary-text-on-soft: var(--erp-primary);
    --erp-secondary: #0891b2;
    --erp-secondary-hover: #0e7490;
    --erp-secondary-soft: #ecfeff;
    --erp-secondary-contrast-text: #ffffff;
    --erp-secondary-text-on-soft: var(--erp-secondary);
    --erp-danger: #dc2626;
    --erp-success: #10b981;
    --erp-warning: #f59e0b;
    --erp-info: #0ea5e9;
    --erp-text-primary: #111827;
    --erp-text-secondary: #374151;
    --erp-text-muted: #6b7280;
    --erp-border: #e5e7eb;
    --erp-border-strong: #d1d5db;
    --erp-bg: #f9fafb;
    --erp-surface: #ffffff;
    --erp-surface-subtle: #f9fafb;
    --erp-surface-muted: #f3f4f6;
    --erp-table-row-hover-bg: #f9fafb;
    --erp-shadow: rgba(15, 23, 42, 0.08);
    --erp-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --erp-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10);
    --erp-shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.18);
}

/* MODO OSCURO
   Estos son los valores por defecto (sin personalizar por tenant). --erp-primary/-hover/-soft
   y --erp-secondary/-hover/-soft se sobreescriben en tiempo de ejecución vía JS (theme.js)
   con la variante oscura calculada del color de marca del tenant (ver ColorTheme.cs); los
   valores de aquí son solo el respaldo antes de que ese script corra o si el tenant no
   personalizó ningún color. Los neutros y los colores semánticos (éxito/peligro) sí son fijos
   siempre, por diseño - no son personalizables por tenant. */
[data-theme="dark"] {
    --erp-primary: #818cf8;
    --erp-primary-hover: #a5b4fc;
    --erp-primary-soft: #312e81;
    --erp-secondary: #22d3ee;
    --erp-secondary-hover: #67e8f9;
    --erp-secondary-soft: #164e63;
    --erp-danger: #f87171;
    --erp-success: #34d399;
    --erp-warning: #fbbf24;
    --erp-info: #38bdf8;
    --erp-text-primary: #f9fafb;
    --erp-text-secondary: #d1d5db;
    --erp-text-muted: #9ca3af;
    --erp-border: #374151;
    --erp-border-strong: #4b5563;
    --erp-bg: #0b1220;
    --erp-surface: #111827;
    --erp-surface-subtle: #1f2937;
    --erp-surface-muted: #243244;
    --erp-table-row-hover-bg: #243244;
    --erp-shadow: rgba(0, 0, 0, 0.35);
    --erp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28);
    --erp-shadow-md: 0 8px 22px rgba(0, 0, 0, 0.34);
    --erp-shadow-lg: 0 24px 54px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] body {
    background: var(--erp-surface);
    color: var(--erp-text-primary);
}

/* ESTRUCTURA DE PÁGINA
   Contenedor general, encabezado con título/subtítulo y botones de acción. */
.erp-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem;
    color: var(--erp-text-primary);
    font-family: var(--erp-font-sans);
    font-size: var(--erp-text-sm);
    animation: erpFadeIn 0.3s ease-out;
}

.erp-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.erp-page-title {
    margin: 0;
    color: var(--erp-text-primary);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Fila auxiliar para cuando el título va acompañado de un badge de estado
   en la misma línea (páginas de detalle: PO/GR/PR/Recibo de Caja). No se
   agrega directo a .erp-title-section porque ese contenedor también se usa
   con un <p class="erp-page-subtitle"> debajo del título (listas/formularios),
   y forzarlo a fila rompería ese apilado vertical en todas esas páginas. */
.erp-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.erp-page-subtitle {
    margin: 0.375rem 0 0;
    color: var(--erp-text-muted);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

.erp-page-actions,
.erp-pagination-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* BOTÓN VOLVER
   Fila arriba del encabezado, en páginas de detalle/edición que navegan
   de vuelta a un listado (p. ej. ItemEdit, OrderDetails). Sin fondo ni
   borde — solo texto + ícono, se resalta en el color primario al pasar
   el mouse. */
.erp-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.erp-btn-back {
    background: none;
    border: none;
    color: var(--erp-text-secondary);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: var(--erp-text-sm);
}

.erp-btn-back:hover {
    color: var(--erp-primary);
}

/* BOTONES
   .erp-btn es la base; se combina con una variante de color
   (primary/secondary/danger/success/ghost) y opcionalmente .erp-btn-sm.
   .erp-btn-icon es el botón circular solo-ícono usado en filas de tabla. */
.erp-btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 0.875rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: var(--erp-text-sm);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.erp-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.erp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.erp-btn-primary {
    background: var(--erp-primary);
    border-color: var(--erp-primary);
    color: var(--erp-primary-contrast-text, white);
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.12);
}

.erp-btn-primary:hover:not(:disabled) {
    background: var(--erp-primary-hover);
    border-color: var(--erp-primary-hover);
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.18);
}

.erp-btn-secondary {
    background: var(--erp-surface);
    border-color: var(--erp-border-strong);
    color: var(--erp-text-secondary);
}

.erp-btn-secondary:hover:not(:disabled) {
    background: var(--erp-surface-subtle);
    border-color: var(--erp-border-strong);
}

.erp-btn-danger {
    background: var(--erp-danger);
    border-color: var(--erp-danger);
    color: white;
}

.erp-btn-danger:hover:not(:disabled) {
    background: #b91c1c;
    border-color: #b91c1c;
}

.erp-btn-success {
    background: var(--erp-success);
    border-color: var(--erp-success);
    color: white;
}

.erp-btn-success:hover:not(:disabled) {
    background: #059669;
    border-color: #059669;
}

.erp-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--erp-primary);
}

.erp-btn-ghost:hover:not(:disabled) {
    color: var(--erp-primary-hover);
}

.erp-btn-sm {
    min-height: 32px;
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    font-size: var(--erp-text-xs);
}

.erp-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: var(--erp-text-muted);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.erp-btn-icon:hover:not(:disabled) {
    background: var(--erp-surface-subtle);
}

.erp-btn-icon-placeholder {
    display: inline-flex;
    width: 32px;
    height: 32px;
}

/* Menú kebab genérico (⋮) — botón de icono que abre un dropdown de acciones.
   Usar cuando hay 1-2 acciones secundarias que no ameritan su propio botón
   visible en el header (ej. exportar PDF de una vista de detalle). */
.kebab-menu-wrapper { display: flex; position: relative; flex-shrink: 0; align-self: stretch; }
.kebab-menu-overlay { position: fixed; inset: 0; z-index: 20; background: transparent; }
.kebab-menu-dropdown { position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 21; background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: 10px; min-width: 190px; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.15rem; }
.kebab-menu-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; background: none; border: none; text-align: left; padding: 0.55rem 0.7rem; border-radius: 7px; font-size: 0.85rem; font-weight: 600; color: var(--erp-text-secondary); margin: 0; cursor: pointer; }
.kebab-menu-item:hover:not(:disabled) { background: color-mix(in srgb, var(--erp-primary) 10%, transparent); color: var(--erp-primary); }
.kebab-menu-item:disabled { opacity: 0.6; cursor: not-allowed; }

/* Colores universales por acción — se aplican solos según el ícono que
   contenga el botón, sin necesidad de agregar ninguna clase en la página.
   Se aplican tanto a los botones de ícono suelto (.erp-btn-icon) como a
   los ítems de un menú kebab (.kebab-menu-item), para que un mismo ícono
   siempre tenga el mismo color sin importar en qué componente aparezca. */
.erp-btn-icon:has(.bi-eye),
.erp-btn-icon:has(.bi-download),
.kebab-menu-item:has(.bi-eye),
.kebab-menu-item:has(.bi-download) {
    color: #0ea5e9;
}

.erp-btn-icon:has(.bi-eye):hover:not(:disabled),
.erp-btn-icon:has(.bi-download):hover:not(:disabled),
.kebab-menu-item:has(.bi-eye):hover:not(:disabled),
.kebab-menu-item:has(.bi-download):hover:not(:disabled) {
    background: rgba(14, 165, 233, 0.1);
}

.erp-btn-icon:has(.bi-pencil),
.erp-btn-icon:has(.bi-file-earmark-text),
.kebab-menu-item:has(.bi-pencil),
.kebab-menu-item:has(.bi-file-earmark-text) {
    color: var(--erp-primary);
}

.erp-btn-icon:has(.bi-pencil):hover:not(:disabled),
.erp-btn-icon:has(.bi-file-earmark-text):hover:not(:disabled),
.kebab-menu-item:has(.bi-pencil):hover:not(:disabled),
.kebab-menu-item:has(.bi-file-earmark-text):hover:not(:disabled) {
    background: var(--erp-primary-soft);
}

.erp-btn-icon:has(.bi-trash),
.erp-btn-icon:has(.bi-x-circle),
.erp-btn-icon:has(.bi-x-lg),
.kebab-menu-item:has(.bi-trash),
.kebab-menu-item:has(.bi-x-circle),
.kebab-menu-item:has(.bi-x-lg) {
    color: var(--erp-danger);
}

.erp-btn-icon:has(.bi-trash):hover:not(:disabled),
.erp-btn-icon:has(.bi-x-circle):hover:not(:disabled),
.erp-btn-icon:has(.bi-x-lg):hover:not(:disabled),
.kebab-menu-item:has(.bi-trash):hover:not(:disabled),
.kebab-menu-item:has(.bi-x-circle):hover:not(:disabled),
.kebab-menu-item:has(.bi-x-lg):hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.1);
}

.erp-btn-icon:has(.bi-check-circle),
.erp-btn-icon:has(.bi-check-circle-fill),
.erp-btn-icon:has(.bi-check-lg),
.erp-btn-icon:has(.bi-cart-check),
.kebab-menu-item:has(.bi-check-circle),
.kebab-menu-item:has(.bi-check-circle-fill),
.kebab-menu-item:has(.bi-check-lg),
.kebab-menu-item:has(.bi-cart-check) {
    color: var(--erp-success);
}

.erp-btn-icon:has(.bi-check-circle):hover:not(:disabled),
.erp-btn-icon:has(.bi-check-circle-fill):hover:not(:disabled),
.erp-btn-icon:has(.bi-check-lg):hover:not(:disabled),
.erp-btn-icon:has(.bi-cart-check):hover:not(:disabled),
.kebab-menu-item:has(.bi-check-circle):hover:not(:disabled),
.kebab-menu-item:has(.bi-check-circle-fill):hover:not(:disabled),
.kebab-menu-item:has(.bi-check-lg):hover:not(:disabled),
.kebab-menu-item:has(.bi-cart-check):hover:not(:disabled) {
    background: rgba(16, 185, 129, 0.1);
}

.erp-btn-icon:has(.bi-box-seam),
.kebab-menu-item:has(.bi-box-seam) {
    color: #d97706;
}

.erp-btn-icon:has(.bi-box-seam):hover:not(:disabled),
.kebab-menu-item:has(.bi-box-seam):hover:not(:disabled) {
    background: rgba(217, 119, 6, 0.1);
}

.erp-btn-icon:has(.bi-send-check),
.erp-btn-icon:has(.bi-send),
.erp-btn-icon:has(.bi-briefcase),
.kebab-menu-item:has(.bi-send-check),
.kebab-menu-item:has(.bi-send),
.kebab-menu-item:has(.bi-briefcase) {
    color: #0d9488;
}

.erp-btn-icon:has(.bi-send-check):hover:not(:disabled),
.erp-btn-icon:has(.bi-send):hover:not(:disabled),
.erp-btn-icon:has(.bi-briefcase):hover:not(:disabled),
.kebab-menu-item:has(.bi-send-check):hover:not(:disabled),
.kebab-menu-item:has(.bi-send):hover:not(:disabled),
.kebab-menu-item:has(.bi-briefcase):hover:not(:disabled) {
    background: rgba(13, 148, 136, 0.1);
}

/* Botones de exportar (Excel/PDF) — mismo criterio: el color sale solo
   del ícono que contenga el botón, sin necesidad de una clase aparte. */
.erp-btn:has(.bi-file-earmark-excel),
.erp-btn:has(.bi-file-earmark-excel-fill) {
    background: #f0fdf4;
    border-color: #86efac;
    color: #15803d;
}

.erp-btn:has(.bi-file-earmark-excel):hover:not(:disabled),
.erp-btn:has(.bi-file-earmark-excel-fill):hover:not(:disabled) {
    background: #dcfce7;
    border-color: #4ade80;
    color: #15803d;
}

.erp-btn:has(.bi-file-earmark-pdf),
.erp-btn:has(.bi-file-earmark-pdf-fill) {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

.erp-btn:has(.bi-file-earmark-pdf):hover:not(:disabled),
.erp-btn:has(.bi-file-earmark-pdf-fill):hover:not(:disabled) {
    background: #fee2e2;
    border-color: #f87171;
    color: #dc2626;
}

/* Mismos colores por tipo de archivo, versión solo-ícono (erp-btn-icon) y
   versión ítem-de-menú-kebab (kebab-menu-item) — usada en columnas de
   acciones de tablas (ej. CfdiDocuments, CfdiPayroll) y en menús kebab
   (ej. DocumentActions). */
.erp-btn-icon:has(.bi-file-earmark-excel),
.erp-btn-icon:has(.bi-file-earmark-excel-fill),
.kebab-menu-item:has(.bi-file-earmark-excel),
.kebab-menu-item:has(.bi-file-earmark-excel-fill) {
    color: #15803d;
}

.erp-btn-icon:has(.bi-file-earmark-excel):hover:not(:disabled),
.erp-btn-icon:has(.bi-file-earmark-excel-fill):hover:not(:disabled),
.kebab-menu-item:has(.bi-file-earmark-excel):hover:not(:disabled),
.kebab-menu-item:has(.bi-file-earmark-excel-fill):hover:not(:disabled) {
    background: rgba(21, 128, 61, 0.1);
}

.erp-btn-icon:has(.bi-file-earmark-pdf),
.erp-btn-icon:has(.bi-file-earmark-pdf-fill),
.kebab-menu-item:has(.bi-file-earmark-pdf),
.kebab-menu-item:has(.bi-file-earmark-pdf-fill) {
    color: #dc2626;
}

.erp-btn-icon:has(.bi-file-earmark-pdf):hover:not(:disabled),
.erp-btn-icon:has(.bi-file-earmark-pdf-fill):hover:not(:disabled),
.kebab-menu-item:has(.bi-file-earmark-pdf):hover:not(:disabled),
.kebab-menu-item:has(.bi-file-earmark-pdf-fill):hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.1);
}

.erp-btn-icon:has(.bi-file-earmark-code),
.erp-btn-icon:has(.bi-filetype-xml),
.kebab-menu-item:has(.bi-file-earmark-code),
.kebab-menu-item:has(.bi-filetype-xml) {
    color: #0ea5e9;
}

.erp-btn-icon:has(.bi-file-earmark-code):hover:not(:disabled),
.erp-btn-icon:has(.bi-filetype-xml):hover:not(:disabled),
.kebab-menu-item:has(.bi-file-earmark-code):hover:not(:disabled),
.kebab-menu-item:has(.bi-filetype-xml):hover:not(:disabled) {
    background: rgba(14, 165, 233, 0.1);
}

/* TABS
   Tabs tipo botón usadas en páginas de detalle/edición con varias secciones
   (p. ej. ItemEdit, TenantEdit, OrderDetails): fondo gris claro, botones
   redondeados, la tab activa se despega con fondo blanco y sombra suave. */
.erp-tabs {
    display: inline-flex;
    gap: 0.25rem;
    background: var(--erp-surface-subtle);
    padding: 0.3rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.erp-tab-button {
    background: none;
    border: none;
    padding: 0.55rem 1.4rem;
    font-weight: 600;
    color: var(--erp-text-muted);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.erp-tab-button:hover:not(.active) {
    color: var(--erp-text-secondary);
}

.erp-tab-button.active {
    color: var(--erp-primary);
    background: var(--erp-surface);
    box-shadow: var(--erp-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.12));
}

@media (max-width: 768px) {
    .erp-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .erp-tab-button {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
        flex-shrink: 0;
    }
}

/* FILTROS
   Panel colapsable de filtros arriba de cada tabla/lista: buscador,
   selects, fechas y el dropdown de estado con checkboxes. */
.erp-filters {
    margin-bottom: 1.5rem;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 1rem 1.25rem;
}

.erp-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0 0.75rem;
}

.erp-section-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--erp-primary);
    font-size: var(--erp-text-sm);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
}

.erp-filters-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.erp-filters-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.875rem 1.25rem;
    padding: 0 0 0.25rem;
    animation: erpSlideDown 0.2s ease-out;
}

.erp-filter-group {
    display: flex;
    flex: 1 1 160px;
    min-width: 160px;
    flex-direction: column;
    gap: 0.375rem;
}

.erp-filter-group-wide {
    flex: 2 1 260px;
}

.erp-filter-group-status {
    flex: 1 1 220px;
}

.erp-filter-label {
    color: var(--erp-text-muted);
    font-size: var(--erp-text-xs);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.erp-input-shell {
    position: relative;
}

.erp-input-shell .bi {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    color: var(--erp-text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.erp-input,
.erp-select,
.erp-date-input,
.erp-page-size {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--erp-border);
    border-radius: 6px;
    background: var(--erp-surface);
    color: var(--erp-text-secondary);
    font-size: var(--erp-text-sm);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.erp-input,
.erp-select {
    padding: 0.55rem 0.75rem;
}

.erp-input-with-icon {
    padding-left: 2.5rem;
}

.erp-input:focus,
.erp-select:focus,
.erp-date-input:focus,
.erp-page-size:focus {
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.erp-select:disabled,
.erp-input:disabled,
.erp-date-input:disabled,
textarea.erp-input:disabled {
    background: var(--erp-surface-subtle);
    color: var(--erp-text-muted);
    cursor: not-allowed;
}

.erp-file-input {
    font-size: var(--erp-text-sm);
    color: var(--erp-text-secondary);
}

.erp-file-input::file-selector-button {
    margin-right: 0.75rem;
    min-height: 32px;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--erp-border-strong);
    border-radius: 6px;
    background: var(--erp-surface);
    color: var(--erp-text-secondary);
    font-size: var(--erp-text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.erp-file-input::file-selector-button:hover {
    background: var(--erp-surface-subtle);
    border-color: var(--erp-border-strong);
}

.erp-date-input {
    padding: 0.5rem 0.625rem;
}

.erp-status-dropdown {
    position: relative;
}

.erp-status-toggle {
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: 6px;
    color: var(--erp-text-secondary);
    font-size: var(--erp-text-sm);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.erp-status-toggle span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-status-toggle:hover {
    border-color: var(--erp-border-strong);
}

.erp-status-overlay {
    position: fixed;
    inset: 0;
    z-index: 10;
}

.erp-status-menu {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
}

.erp-status-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
}

.erp-status-menu-item:hover {
    background: var(--erp-surface-subtle);
}

.erp-status-menu-item input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--erp-primary);
    cursor: pointer;
}

/* TARJETAS DE INDICADORES (KPIs)
   Fila de tarjetas con un número resumen arriba de una tabla de reportes
   (ej. "Ingreso Total", "Margen Promedio"). */
.erp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.erp-stat-card {
    background: var(--erp-surface);
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--erp-border);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
}

.erp-stat-card:hover {
    transform: translateY(-2px);
}

.erp-stat-label {
    font-size: var(--erp-text-xs);
    color: var(--erp-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.erp-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--erp-text-primary);
    font-family: var(--erp-font-mono);
}

.erp-stat-value.highlight {
    color: var(--erp-primary);
}

.erp-stat-value.positive {
    color: var(--erp-success);
}

.erp-stat-value.negative {
    color: var(--erp-danger);
}

.erp-stat-value.warning {
    color: var(--erp-warning);
}

.erp-stat-value.info {
    color: var(--erp-info);
}

/* TABLAS / LISTAS
   El contenedor con borde+sombra (.erp-table-shell) envuelve la tabla
   (.erp-table): encabezados, filas, columna de acciones adaptable y
   la fila de "sin resultados"/inactivos. */
.erp-table-shell {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Espacio reservado abajo para la barra de scroll personalizada
       (.erp-custom-scrollbar-track), que reemplaza al scrollbar nativo. */
    padding-bottom: 16px;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Se oculta el scrollbar nativo del sistema operativo/navegador — varios
   Chrome/Safari en Mac ignoran la personalización de ::-webkit-scrollbar
   y usan su propio "overlay" que solo aparece durante el gesto de scroll
   activo, sin importar el CSS. En su lugar, custom-scrollbar.js dibuja una
   barra propia (.erp-custom-scrollbar-track/-thumb) que siempre está
   visible cuando hay overflow, sin depender del navegador/SO. */
.erp-table-shell,
.erp-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.erp-table-shell::-webkit-scrollbar,
.erp-scroll::-webkit-scrollbar {
    display: none;
}

.erp-scroll {
    position: relative;
}

.erp-custom-scrollbar-track {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 4px;
    height: 8px;
    background: var(--erp-surface-subtle);
    border-radius: 4px;
    cursor: pointer;
    z-index: 2;
}

.erp-custom-scrollbar-thumb {
    position: absolute;
    top: 0;
    height: 100%;
    min-width: 30px;
    background: var(--erp-primary);
    border-radius: 4px;
    cursor: grab;
}

.erp-custom-scrollbar-thumb:hover {
    background: var(--erp-primary-hover);
}

.erp-custom-scrollbar-thumb:active {
    cursor: grabbing;
}

.erp-table {
    width: 100%;
    border-collapse: collapse;
}

.erp-table th {
    padding: 0.625rem 0.75rem;
    background: var(--erp-surface-subtle);
    border-bottom: 1px solid var(--erp-border);
    color: var(--erp-text-muted);
    font-size: var(--erp-text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
    text-transform: uppercase;
}

.erp-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.erp-table th.sortable:hover {
    background: color-mix(in srgb, var(--erp-primary) 8%, var(--erp-surface-subtle));
    color: var(--erp-text-primary);
}

.erp-table th.text-right {
    text-align: right;
}

.erp-table td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--erp-border);
    color: var(--erp-text-secondary);
    font-size: var(--erp-text-sm);
    line-height: 1.35;
    vertical-align: middle;
}

.erp-table td.text-right {
    text-align: right;
}

.erp-table td.text-center {
    text-align: center;
}

/* Contextual Hover Actions (estilo Gmail): no existe columna de acciones
   — nunca reserva espacio, en ningún tamaño de pantalla.
   La celda (<th>/<td>) permanece SIEMPRE display:none (nunca se muestra
   como celda de tabla). Al hacer hover/foco sobre la fila, la CELDA
   COMPLETA (no cada botón por separado) pasa a position:absolute con
   display:flex, ANCLADA al <tr> (que tiene position:relative) — así es
   UN solo elemento posicionado que actúa de contenedor flex para todos
   los botones (evita que boones sueltos sin <div> envolvente se apilen
   unos sobre otros, que es lo que pasaría si cada <button> se
   posicionara con position:absolute de forma individual).
   Por qué no se recalcula el ancho de la tabla: en display:none la celda
   no aporta nada; en el estado "hover" pasa directo a position:absolute,
   que saca al elemento del flujo normal de la tabla (no ocupa columna),
   así que en NINGÚN estado participa del cálculo de ancho de columnas.
   (Intentos previos que dejaban la celda en flujo normal —
   display:table-cell/inline-flex con overflow:visible, o position:sticky—
   sí hacían que el navegador recalculara el ancho de la tabla de forma
   inconsistente entre hovers, porque esos modos SÍ cuentan para el
   layout de la tabla). */
.erp-table th.col-actions {
    display: none;
}

.erp-table tbody tr {
    position: relative;
}

.erp-table td.actions,
.erp-table td.erp-actions-cell {
    display: none;
}

.erp-table tbody tr:hover td.actions,
.erp-table tbody tr:hover td.erp-actions-cell,
.erp-table tbody tr:focus-within td.actions,
.erp-table tbody tr:focus-within td.erp-actions-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    position: absolute;
    /* top:0/bottom:0 en vez de top:50%+transform: estira la caja a la
       altura exacta de la fila sin depender de cálculos porcentuales,
       que en la primera fila (o combinados con border-collapse) podían
       salirse de los límites de la fila y sobresalir del borde de la
       tabla. align-items:center ya centra los botones dentro de esa
       altura completa. */
    top: 0;
    bottom: 0;
    right: 0.75rem;
    z-index: 1;
}

.erp-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--erp-surface-subtle) 55%, var(--erp-surface));
}

.erp-table tbody tr:hover td {
    background: var(--erp-surface-subtle);
}

.erp-table tbody tr:last-child td {
    border-bottom: none;
}

.erp-table tbody tr.inactive-row td {
    opacity: 0.6;
    background: var(--erp-surface-subtle);
}

/* Columna Estado (col-status): en tablas con auto-layout, sin esto la
   columna termina tan ancha como el resto del espacio sobrante de la
   tabla, dejando un hueco vacío junto a la badge. width:1% + nowrap hace
   que el navegador le asigne solo el ancho mínimo necesario para el
   contenido más ancho (la etiqueta de estado más larga), en vez de
   repartirle espacio extra que no necesita. */
.erp-table .col-status {
    width: 1%;
    white-space: nowrap;
}

/* Columnas Familia/Categoría: en cualquier tabla que las tenga (marcadas
   con las clases col-family/col-category en su <th>/<td>), se ocultan
   debajo de 1454px de ancho para que la tabla siga cabiendo sin necesitar
   scroll horizontal tan pronto. */
@media (max-width: 1454px) {
    .erp-table .col-family,
    .erp-table .col-category {
        display: none;
    }
}

/* CELDAS DE DATOS
   Estilos para contenido dentro de celdas de tabla: códigos/links (.erp-link-code),
   montos (.erp-number), nombre+dato secundario apilados (.erp-stack) y
   nombre con avatar circular (.erp-name-cell + .erp-avatar). */
.erp-link-code,
.erp-number {
    font-family: var(--erp-font-mono);
    font-weight: 700;
    white-space: nowrap;
}

.erp-link-code {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.125rem 0.375rem;
    background: var(--erp-primary-soft);
    border-radius: 6px;
    color: var(--erp-primary);
}

.erp-number {
    text-align: right;
}

.erp-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.125rem;
}

.erp-stack span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.erp-stack small {
    color: var(--erp-text-muted);
    font-size: var(--erp-text-xs);
}

.erp-name-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.erp-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--erp-primary);
    color: var(--erp-primary-contrast-text, white);
    font-size: var(--erp-text-xs);
    font-weight: 700;
}

.erp-strong {
    color: var(--erp-text-primary);
    font-weight: 700;
}

.erp-icon-primary {
    color: var(--erp-primary);
}

/* BADGES DE ESTADO
   .erp-badge es la base (forma/tamaño); cada .erp-badge-* solo cambia el color
   según el estado (Borrador, Activo, Cancelado, Pagado, etc). */
.erp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.3rem 0.625rem;
    border-radius: 6px;
    font-size: var(--erp-text-xs);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.erp-badge-draft,
.badge-draft {
    background: #f1f5f9;
    color: #334155;
}

.erp-badge-completed,
.erp-badge-confirmed,
.badge-confirmed {
    background: #dcfce7;
    color: #166534;
}

.erp-badge-cancelled,
.badge-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

/* NOMBRE COLOREADO SEGÚN ESTADO ACTIVO/INACTIVO
   Para tablas de catálogos simples (Activo/Inactivo puro), en vez de una
   columna de Estado dedicada, el nombre/código se pinta directamente.
   En modo claro usa un verde más fuerte que el --erp-success genérico
   (que se queda igual en badges/botones); en modo oscuro el --erp-success
   normal ya se ve bien, así que ahí sí se reutiliza. */
.erp-name-active {
    color: #059669;
}

[data-theme="dark"] .erp-name-active {
    color: var(--erp-success);
}

.erp-name-inactive {
    color: var(--erp-danger);
}

.erp-badge-active {
    background: #dcfce7;
    color: #166534;
}

.erp-badge-inactive {
    background: #f1f5f9;
    color: #334155;
}

.erp-badge-type {
    background: var(--erp-primary-soft);
    color: var(--erp-primary-text-on-soft, var(--erp-primary));
}

.erp-badge-posted {
    background: #dcfce7;
    color: #166534;
}

.erp-badge-reconciled {
    background: #e0f2fe;
    color: #0369a1;
}

.erp-badge-pending {
    background: #fef3c7;
    color: #d97706;
}

.erp-badge-approved {
    background: #d1fae5;
    color: #065f46;
}

.erp-badge-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.erp-badge-void {
    background: #f3f4f6;
    color: #4b5563;
}

.erp-badge-warning {
    background: #fef3c7;
    color: #b45309;
}

.erp-badge-info {
    background: #e0f2fe;
    color: #0369a1;
}

.erp-badge-partial {
    background: #fef3c7;
    color: #92400e;
}

.erp-badge-paid {
    background: #e0f2fe;
    color: #0369a1;
}

.erp-badge-invoiced {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.erp-badge-expired {
    background: #fef3c7;
    color: #92400e;
}

.erp-badge-renewed {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}

.erp-badge-pending-termination {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #ffedd5;
}

/* ESTADOS VACÍOS
   Mensaje que se muestra cuando una tabla/lista no tiene resultados. */
.erp-empty-cell {
    padding: 2.5rem 1rem !important;
    color: var(--erp-text-muted) !important;
    text-align: center;
}

.erp-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.erp-empty-state .bi {
    font-size: 1.75rem;
    color: var(--erp-border-strong);
}

/* PAGINACIÓN
   Barra inferior de la tabla: texto "Mostrando X de Y", selector de
   tamaño de página y los botones de número de página. */
.erp-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--erp-border);
}

.erp-pagination-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--erp-text-muted);
    font-size: var(--erp-text-sm);
}

.erp-page-size {
    width: auto;
    padding: 0.375rem 0.625rem;
}

.erp-page-btn {
    min-width: 34px;
    min-height: 34px;
    padding: 0 0.625rem;
    border: 1px solid var(--erp-border-strong);
    border-radius: 6px;
    background: var(--erp-surface);
    color: var(--erp-text-secondary);
    font-size: var(--erp-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.erp-page-btn:hover {
    background: var(--erp-surface-subtle);
    border-color: var(--erp-border-strong);
}

.erp-page-btn.active {
    background: var(--erp-primary);
    border-color: var(--erp-primary);
    color: var(--erp-primary-contrast-text, white);
}

.erp-pagination-ellipsis {
    color: var(--erp-text-muted);
    padding: 0 0.25rem;
}

/* ESTADO DE CARGA
   Spinner + texto que se muestra mientras se cargan los datos. */
.erp-loading-state {
    padding: 4rem;
    color: var(--erp-text-muted);
    text-align: center;
}

.erp-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    border: 3px solid var(--erp-border);
    border-top: 3px solid var(--erp-primary);
    border-radius: 50%;
    animation: erpSpin 1s linear infinite;
}

@keyframes erpSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes erpFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes erpSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* AJUSTES PARA CELULAR (listas/tablas)
   En pantallas angostas, la tabla deja de verse como tabla y cada fila
   se convierte en una tarjeta con etiquetas (usa el atributo data-label). */
@media (max-width: 768px) {
    .erp-page {
        padding: 1rem;
    }

    .erp-page-header,
    .erp-filters-header,
    .erp-pagination,
    .erp-pagination-info {
        align-items: stretch;
        flex-direction: column;
    }

    .erp-page-title {
        font-size: 1.5rem;
    }

    .erp-page-actions,
    .erp-page-actions .erp-btn,
    .erp-pagination-controls,
    .erp-pagination-controls .erp-btn {
        width: 100%;
    }

    .erp-filter-group {
        min-width: 100%;
    }

    .erp-table-shell {
        border: none;
        background: transparent;
    }

    /* La tarjeta-por-fila de móvil nunca necesita scroll horizontal (cada
       td ya es 100% de ancho, apilado), así que la barra de scroll
       personalizada (custom-scrollbar.js, pensada para tablas anchas de
       escritorio) no debe dibujarse aquí. Sin esto queda flotando encimada
       al borde inferior de la tarjeta en cuanto una página quita el
       padding-bottom reservado para ella en modo tarjeta. */
    .erp-custom-scrollbar-track,
    .erp-custom-scrollbar-thumb {
        display: none !important;
    }

    .erp-table thead {
        display: none;
    }

    .erp-table,
    .erp-table tbody,
    .erp-table tr,
    .erp-table td {
        display: block;
        width: 100%;
    }

    .erp-table tr {
        margin-bottom: 1rem;
        padding: 0.875rem;
        background: var(--erp-surface);
        border: 1px solid var(--erp-border);
        border-radius: 12px;
    }

    .erp-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.625rem 0;
        text-align: right;
    }

    .erp-table td::before {
        content: attr(data-label);
        color: var(--erp-text-muted);
        font-size: var(--erp-text-xs);
        font-weight: 700;
        letter-spacing: 0.03em;
        text-align: left;
        text-transform: uppercase;
    }

    .erp-table td[colspan]::before {
        content: none;
    }
}

/* ACORDEÓN (Bootstrap Accordion recoloreado)
   Secciones colapsables en páginas de edición largas (VendorEdit, CustomerEdit).
   El bootstrap.min.css incluido en este proyecto es v5.1.0 — anterior a que
   Bootstrap introdujera las variables --bs-accordion-* (5.2+) — así que sus
   reglas .accordion-button/.accordion-item/.accordion-body tienen los colores
   escritos directo (color:#212529;background-color:#fff, etc.), sin leer
   ninguna variable CSS. Por eso aquí NO se puede "recolorear" con variables:
   hay que sobreescribir cada selector de Bootstrap directamente, con más
   especificidad (prefijo .erp-accordion) para ganarle a la regla original.
   Esto incluye el ícono de flecha, que es un SVG de fondo con el color
   "quemado" en el propio data-URI (no puede leer variables CSS tampoco), fijo
   en negro/azul de Bootstrap sin importar el tema — de ahí que quedara
   invisible en modo oscuro y sin relación con nuestro índigo en modo claro. */
.erp-accordion {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--erp-border);
}

.erp-accordion .accordion-item {
    background-color: var(--erp-surface);
    border-color: var(--erp-border);
}

.erp-accordion .accordion-button {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--erp-text-primary);
    background-color: var(--erp-surface);
}

.erp-accordion .accordion-button:not(.collapsed) {
    color: var(--erp-primary);
    background-color: var(--erp-primary-soft);
    box-shadow: inset 0 -1px 0 var(--erp-border);
}

.erp-accordion .accordion-button:focus {
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--erp-primary) 20%, transparent);
}

.erp-accordion .accordion-body {
    background-color: var(--erp-surface);
    color: var(--erp-text-secondary);
    padding: 2rem;
}

.erp-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23374151'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.erp-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234f46e5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-theme="dark"] .erp-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d1d5db'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-theme="dark"] .erp-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23818cf8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Encabezado de acordeón con una acción extra (checkbox, toggle) a la
   derecha del botón — ej. "Activo" en Información Básica de ItemEdit,
   "Igual que Facturación" en Envío de CustomerEdit. */
.accordion-header-with-action {
    position: relative;
}

.accordion-header-with-action .accordion-header-action {
    position: absolute;
    top: 50%;
    right: 3.25rem;
    transform: translateY(-50%);
    z-index: 5;
    margin-bottom: 0;
}

.accordion-header-with-action .accordion-header-action label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--erp-text-secondary);
    margin: 0;
    cursor: pointer;
}

/* FORMULARIOS ERP
   Grupos de campos, etiquetas, validación, texto de ayuda
   (los inputs/selects/fechas reutilizan .erp-input/.erp-select/.erp-date-input
   de la sección de filtros de arriba — los mismos campos en todas partes)*/

.erp-form-section {
    margin-bottom: 2rem;
}

.erp-form-section-title {
    margin: 0 0 1.25rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--erp-text-primary);
}

/* Section title + a right-aligned control (ej. checkbox de Activo) en formularios
   sin acordeón — misma idea que .accordion-header-with-action pero para un
   <div class="erp-form-section"> plano. */
.erp-form-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.erp-form-section-header .erp-form-section-title {
    margin-bottom: 0;
}

/* Same idea, but for a container with no section title of its own (ej. tarjeta
   con pestañas propias) — solo empuja el control a la esquina superior derecha. */
.erp-form-corner-action {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}

.erp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
}

.erp-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.erp-form-group-wide {
    grid-column: 1 / -1;
}

.erp-form-label {
    color: var(--erp-text-muted);
    font-size: var(--erp-text-xs);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.erp-form-required {
    color: var(--erp-danger);
    margin-left: 0.125rem;
}

.erp-form-help {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    color: var(--erp-text-muted);
    font-size: var(--erp-text-xs);
    line-height: 1.4;
}

.erp-form-help .bi {
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.erp-form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.erp-form-checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--erp-primary);
    cursor: pointer;
}

/* VALIDACIÓN DE CAMPOS
   Cuando un campo es inválido (clase "invalid", agregada automáticamente
   por Blazor), se marca con borde y mensaje en rojo. */
.erp-input.invalid,
.erp-select.invalid,
.erp-date-input.invalid,
textarea.erp-input.invalid {
    border-color: var(--erp-danger);
}

.erp-input.invalid:focus,
.erp-select.invalid:focus,
.erp-date-input.invalid:focus,
textarea.erp-input.invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.erp-form-validation-message {
    color: var(--erp-danger);
    font-size: var(--erp-text-xs);
}

/* AJUSTES PARA CELULAR (formularios)
   El formulario de 2 columnas pasa a 1 sola columna. */
@media (max-width: 768px) {
    .erp-form-grid {
        grid-template-columns: 1fr;
    }
}

/* COMPATIBILIDAD GLOBAL PARA VISTAS LEGACY
   Muchas pantallas antiguas usan clases genéricas locales (.modal-content,
   .form-control, .card, .stat-card, etc.) con colores fijos. Esta capa evita
   corregir cada uso individualmente y fuerza sólo colores/fondos/bordes al
   sistema de tema, sin cambiar tamaños, espaciados ni estructura. */
.card,
.card-body,
.card-footer,
.customer-form,
.contact-form,
.lead-form,
.quote-form,
.bank-form,
.currency-form,
.tax-form,
.vendor-form,
.item-form,
.employee-form,
.role-form,
.user-form,
.receipt-form,
.policy-form,
.edit-form,
.form-card,
.main-form-card,
.form-container,
.form-section,
.content-card,
.settings-card,
.report-card,
.filter-card,
.filters-section,
.filter-panel,
.service-form-inline,
.assignment-add-inline,
.assignments-expanded-panel,
.no-assignments-message,
.service-lines-section,
.period-details-box,
.cancellation-info-panel,
.expanded-details,
.time-modal-dialog,
.time-entries-panel,
.table-container,
.table-responsive,
.table-shell,
.modern-table,
.view-table,
.detail-table,
.items-table,
.error-table,
.lines-table,
.allocation-table,
.alloc-table,
.errors-table,
.conceptos-table,
.ai-data-table,
.data-table,
.preview-table,
.stat-card,
.summary-card,
.metric-card,
.kpi-card,
.kpi-card-custom,
.info-card,
.details-card,
.glass-card,
.main-card,
.components-card,
.lines-card,
.kanban-card,
.stage-card,
.activity-card,
.task-card,
.customer-card,
.invoice-card,
.payment-card,
.assignment-chip,
.side-panel,
.detail-panel,
.master-pane,
.detail-pane,
.header-section,
.allocation-panel,
.date-input-wrapper,
.input-wrapper,
.input-group-text,
.drop-zone-attach,
.drop-zone,
.dropzone,
.upload-zone,
.file-badge,
.import-errors-container,
.suggestions-panel,
.suggestion-card,
.status-panel,
.expense-suggestion-panel,
.modal-content,
.modal-dialog,
.modal-body,
.modal-card,
.modal-panel,
.renewal-modal,
.termination-modal,
.conciliation-modal,
.preview-dialog,
.import-dialog,
.copy-item-dialog,
.bank-import-dialog,
.email-dialog,
.payment-dialog,
.cfdi-cancel-dialog,
.custom-modal-content,
.task-modal-dialog,
.profile-modal {
    background-color: var(--erp-surface) !important;
    color: var(--erp-text-primary) !important;
    border-color: var(--erp-border) !important;
}

/* Sombra suave proyectada hacia arriba (offset negativo) para darle a las
   tarjetas un poco de profundidad por encima, en vez de la sombra hacia
   abajo típica. Incluye las variantes de "stat card" (KPIs, resúmenes)
   que usan las mismas clases genéricas de la capa de compatibilidad de
   arriba. */
.card,
.stat-card,
.summary-card,
.metric-card,
.kpi-card,
.kpi-card-custom,
.info-card,
.details-card,
.main-card {
    box-shadow: 0 -4px 12px var(--erp-shadow, rgba(15, 23, 42, 0.08));
}

.modal-header,
.modal-footer,
.dialog-header,
.dialog-footer,
.preview-header,
.preview-footer,
.import-header,
.import-footer,
.pane-header,
.time-modal-header,
.time-modal-footer,
.custom-modal-header,
.custom-modal-footer,
.task-modal-header,
.task-modal-footer,
.card-header,
.panel-header,
.form-actions,
.action-bar,
.actions-bar,
.pagination-bar,
.pagination,
.page-footer,
.modern-table th,
.table thead th,
.table th,
.detail-table th,
.items-table th,
.error-table th,
.errors-table th,
.conceptos-table th,
.add-line-row,
.add-line-form,
.assignments-expanded-row,
.assignments-expanded-cell,
.warning-banner,
.info-banner,
.warning-row td,
.readonly-field {
    background-color: var(--erp-surface-subtle) !important;
    color: var(--erp-text-primary) !important;
    border-color: var(--erp-border) !important;
}

.bottom-section,
.tabs,
.assignments-expanded-cell,
.assignments-expanded-row td,
.expanded-row,
.row-expanded td,
.modern-table td,
.table td,
.detail-table td,
.items-table td,
.error-table td,
.errors-table td,
.conceptos-table td,
.preview-item,
.info-row,
.detail-row {
    border-color: var(--erp-border) !important;
}

.tabs {
    background-color: var(--erp-surface-subtle) !important;
}

.modal-header h1,
.modal-header h2,
.modal-header h3,
.dialog-header h1,
.dialog-header h2,
.dialog-header h3,
.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-title,
.dialog-title,
.preview-header h3,
.import-title,
.card h1,
.card h2,
.card h3,
.header h1,
.title-section h1,
.form-section h2,
.section-title,
.form-label,
.card-title,
.services-header h2,
.attachments-header h2,
.service-form-inline h3,
.assignment-add-inline h5,
.assignments-expanded-panel h4,
.service-lines-section h3,
.time-modal-title,
.task-modal-title,
.small-title,
.section-heading,
.panel-title,
.table-title,
.panel-header h2,
.info-value,
.info-item span,
.detail-row .val,
.preview-item-total,
.task-name,
.item-name,
.emp-name,
.employee-name,
.kpi-value-custom,
.customer-form h1,
.customer-form h2,
.customer-form h3,
.stat-card .value,
.summary-item .value,
.total-row.grand-total {
    color: var(--erp-text-primary) !important;
}

.form-group label,
.field-label,
.filter-label,
.filter-group label,
.filter-item label,
.notes-section label,
.stat-card .label,
.text-muted,
.help-text,
.subtext,
.secondary-text,
.description,
.empty-state,
.loading-state,
.compact-description,
.total-row,
.info-row,
.info-item label,
.address-line,
.customer-info-line,
.tab-button,
.subtitle,
.card-meta,
.panel-account,
.info-grid-small label,
.summary-item .label,
.detail-row .label,
.preview-item-desc .sub,
.emp-no,
.empty-hint,
.pagination-info,
.page-info,
.date-input-label,
.user-cell,
.employee-cost,
.kpi-label-custom,
.modal-intro,
.modal-subtitle,
.time-modal-close,
.task-modal-close,
.custom-modal-close {
    color: var(--erp-text-muted) !important;
}

.tab-button:hover:not(.active) {
    background-color: color-mix(in srgb, var(--erp-primary) 8%, transparent) !important;
    color: var(--erp-text-primary) !important;
}

.tab-button.active {
    color: var(--erp-primary) !important;
    border-color: var(--erp-primary) !important;
}

.form-control,
.form-select,
.form-control-sm,
.form-control-plaintext,
.form-input-sm,
.form-input-lg,
.input-control,
.input-field,
.filter-input,
.filter-select,
.table-input,
.table-select,
.rate-input,
.text-filter,
.date-picker,
.page-size-selector,
.btn-page,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
select,
textarea {
    background-color: var(--erp-surface) !important;
    color: var(--erp-text-primary) !important;
    border-color: var(--erp-border) !important;
}

option,
optgroup {
    background-color: var(--erp-surface) !important;
    color: var(--erp-text-primary) !important;
}

.form-control:disabled,
.form-select:disabled,
.form-input-sm:disabled,
.form-input-lg:disabled,
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
input[type="number"]:disabled,
input[type="date"]:disabled,
input[type="search"]:disabled,
input[type="password"]:disabled,
input[type="url"]:disabled,
input[type="time"]:disabled,
input[type="datetime-local"]:disabled,
input[type="month"]:disabled,
input[type="week"]:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--erp-surface-subtle) !important;
    color: var(--erp-text-muted) !important;
}

.form-control::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
input[type="date"]::placeholder,
input[type="search"]::placeholder,
input[type="password"]::placeholder,
input[type="url"]::placeholder,
input[type="time"]::placeholder,
input[type="datetime-local"]::placeholder,
input[type="month"]::placeholder,
input[type="week"]::placeholder,
textarea::placeholder {
    color: var(--erp-text-muted) !important;
}

.btn-secondary,
.btn-secondary-action,
.btn-outline,
.btn-clear-filters,
.btn-page,
.page-btn,
.btn-cancel,
.btn-back,
.btn-close-modal,
.btn-icon,
.btn-outline-secondary,
.btn-light {
    background-color: var(--erp-surface) !important;
    color: var(--erp-text-secondary) !important;
    border-color: var(--erp-border-strong) !important;
}

.btn-secondary:hover,
.btn-secondary-action:hover,
.btn-clear-filters:hover,
.btn-page:hover:not(:disabled),
.page-btn:hover:not(:disabled),
.btn-cancel:hover,
.btn-back:hover,
.btn-close-modal:hover,
.btn-icon:hover,
.btn-outline-secondary:hover,
.btn-light:hover {
    background-color: var(--erp-surface-subtle) !important;
    border-color: var(--erp-border-strong) !important;
}

.time-btn-secondary,
.btn-toggle-details {
    background-color: var(--erp-surface) !important;
    color: var(--erp-text-secondary) !important;
    border-color: var(--erp-border-strong) !important;
}

.time-btn-secondary:hover,
.btn-toggle-details:hover {
    background-color: var(--erp-surface-subtle) !important;
    color: var(--erp-text-primary) !important;
    border-color: var(--erp-border-strong) !important;
}

.time-btn-primary {
    background: var(--erp-primary) !important;
    color: var(--erp-primary-contrast-text, white) !important;
    border-color: var(--erp-primary) !important;
}

.time-btn-primary:hover {
    background: var(--erp-primary-hover) !important;
    border-color: var(--erp-primary-hover) !important;
}

.btn-close {
    color: var(--erp-text-muted) !important;
}

.bg-light,
.bg-white {
    background-color: var(--erp-surface-subtle) !important;
    color: var(--erp-text-primary) !important;
}

.text-dark,
.text-body,
.text-body-secondary {
    color: var(--erp-text-primary) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--erp-border) !important;
}

.table,
.table-sm {
    color: var(--erp-text-secondary) !important;
    border-color: var(--erp-border) !important;
}

.table > :not(caption) > * > * {
    background-color: var(--erp-surface) !important;
    color: var(--erp-text-secondary) !important;
    border-color: var(--erp-border) !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--erp-table-row-hover-bg) !important;
    color: var(--erp-text-primary) !important;
}

.modern-table tbody tr:hover td,
.lines-table tbody tr:hover td,
.items-table tbody tr:hover td,
.detail-table tbody tr:hover td,
.errors-table tbody tr:hover td,
.conceptos-table tbody tr:hover td {
    background-color: var(--erp-table-row-hover-bg) !important;
    color: var(--erp-text-primary) !important;
}

/* Subtotal/tax/total summary rows are static labels, not interactive data rows -
   cancel the generic hover highlight above so they don't flash bright on cursor-over.
   These rows live in <tbody> on some pages and <tfoot> on others, so match both. */
.modern-table tr.subtotal-row:hover td,
.modern-table tr.total-row:hover td,
.lines-table tr.subtotal-row:hover td,
.lines-table tr.total-row:hover td,
.items-table tr.subtotal-row:hover td,
.items-table tr.total-row:hover td,
.detail-table tr.subtotal-row:hover td,
.detail-table tr.total-row:hover td,
.errors-table tr.subtotal-row:hover td,
.errors-table tr.total-row:hover td,
.conceptos-table tr.subtotal-row:hover td,
.conceptos-table tr.total-row:hover td {
    background-color: transparent !important;
    color: inherit !important;
}

.attachments-table th,
.service-lines-table th,
.services-table th,
.schedules-table th,
.invoices-table th,
.conciliation-table th,
.renewal-lines-table th {
    background-color: var(--erp-surface-subtle) !important;
    color: var(--erp-text-muted) !important;
    border-color: var(--erp-border) !important;
}

.attachments-table td,
.service-lines-table td,
.services-table td,
.schedules-table td,
.invoices-table td,
.conciliation-table td,
.renewal-lines-table td {
    background-color: var(--erp-surface) !important;
    color: var(--erp-text-secondary) !important;
    border-color: var(--erp-border) !important;
}

.attachments-table tbody tr:hover td,
.service-lines-table tbody tr:hover td,
.services-table tbody tr:hover td,
.schedules-table tbody tr:hover td,
.invoices-table tbody tr:hover td,
.conciliation-table tbody tr:hover td,
.renewal-lines-table tbody tr:hover td {
    background-color: var(--erp-table-row-hover-bg) !important;
    color: var(--erp-text-primary) !important;
}

.erp-btn-icon.active-toggle,
.badge-count,
.renewal-lineage-badge {
    background-color: var(--erp-primary-soft) !important;
    color: var(--erp-primary) !important;
    border-color: color-mix(in srgb, var(--erp-primary) 32%, var(--erp-border)) !important;
}

.badge-mini {
    background-color: var(--erp-primary) !important;
    color: var(--erp-primary-contrast-text, white) !important;
    border-color: var(--erp-primary) !important;
}

.checkbox-checkmark {
    background-color: var(--erp-surface) !important;
    border-color: var(--erp-border-strong) !important;
}

.checkbox-container:hover input ~ .checkbox-checkmark {
    background-color: var(--erp-surface-subtle) !important;
}

.checkbox-container input:checked ~ .checkbox-checkmark {
    background-color: var(--erp-primary) !important;
    border-color: var(--erp-primary) !important;
}

.btn-close:hover {
    color: var(--erp-text-primary) !important;
}

.modal-backdrop,
.cfdi-cancel-overlay,
.custom-modal-backdrop,
.time-modal-overlay {
    background: rgba(2, 6, 23, 0.68) !important;
    backdrop-filter: blur(6px);
}

.spinner,
.erp-spinner {
    border-color: var(--erp-border) !important;
    border-top-color: var(--erp-primary) !important;
}

/* MODAL DE ESCANEO (código de barras / QR)
   Usado por el componente compartido BarcodeScanModal: vista de cámara
   (cuando el navegador la soporta) + un campo de texto donde un lector
   físico "escribe" el código y presiona Enter. */
.erp-scan-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.erp-scan-modal {
    background: var(--erp-surface);
    border-radius: 12px;
    padding: 1.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

.erp-scan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.erp-scan-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--erp-text-primary);
}

.erp-scan-camera {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #111827;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.erp-scan-camera video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.erp-scan-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--erp-text-muted);
    font-size: var(--erp-text-sm);
    background: var(--erp-surface-subtle);
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.erp-scan-manual {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* CAPA FINAL DE TEMA
   Cubre componentes definidos después de la compatibilidad anterior y estilos inline
   legacy que no se pueden alcanzar con clases normales. Se limita a colores/fondos. */
.erp-scan-modal,
.login-card,
.profile-popup,
.warehouse-selector,
.options-group,
.details-section,
.filter-bar,
.vendor-group,
.empty-state,
.loading-state,
.status-banner,
.period-details-box,
.invoice-summary-details,
.preview-container,
.swatch-card,
.timeline-card,
.gantt-wrap,
.cal-grid {
    background-color: var(--erp-surface) !important;
    color: var(--erp-text-primary) !important;
    border-color: var(--erp-border) !important;
}

.warehouse-selector:hover:not(.disabled),
.btn-toggle.active,
.preview-body-mock,
.status-banner.pending {
    background-color: var(--erp-surface-subtle) !important;
    color: var(--erp-text-primary) !important;
    border-color: var(--erp-border) !important;
}

[style*="background: white"],
[style*="background:white"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: #ffffff"],
[style*="background:#ffffff"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #ffffff"],
[style*="background-color:#ffffff"] {
    background-color: var(--erp-surface) !important;
}

[style*="background: #f9"],
[style*="background:#f9"],
[style*="background: #f8"],
[style*="background:#f8"],
[style*="background: #f3"],
[style*="background:#f3"],
[style*="background-color: #f9"],
[style*="background-color:#f9"],
[style*="background-color: #f8"],
[style*="background-color:#f8"],
[style*="background-color: #f3"],
[style*="background-color:#f3"] {
    background-color: var(--erp-surface-subtle) !important;
}

[style*="color: #111827"],
[style*="color:#111827"],
[style*="color: #1f2937"],
[style*="color:#1f2937"],
[style*="color: #374151"],
[style*="color:#374151"],
[style*="color: #334155"],
[style*="color:#334155"] {
    color: var(--erp-text-primary) !important;
}

[style*="color: #4b5563"],
[style*="color:#4b5563"],
[style*="color: #475569"],
[style*="color:#475569"],
[style*="color: #64748b"],
[style*="color:#64748b"],
[style*="color: #6b7280"],
[style*="color:#6b7280"],
[style*="color: #9ca3af"],
[style*="color:#9ca3af"] {
    color: var(--erp-text-muted) !important;
}

[style*="border: 1px solid #e5"],
[style*="border:1px solid #e5"],
[style*="border: 1px solid #d1"],
[style*="border:1px solid #d1"],
[style*="border-color: #e5"],
[style*="border-color:#e5"],
[style*="border-color: #d1"],
[style*="border-color:#d1"] {
    border-color: var(--erp-border) !important;
}

/* BLOQUEO DE SCROLL DE FONDO CON MODAL ABIERTO
   modal-scroll-lock.js agrega/quita esta clase en <body> según haya o no
   algún backdrop [data-modal-lock] presente en el DOM - funciona para
   cualquier modal existente o futuro sin tocar cada componente. */
body.modal-open {
    overflow: hidden;
}

/* MODAL MINIMALISTA
   Patrón reutilizable para diálogos (ej. WarehouseLocationDialog): superficie
   plana y sólida con var(--erp-*), sin blur ni transparencia, línea divisoria
   simple entre header/body y body/footer en vez de sombras pesadas. Pensado
   para reemplazar los modales antiguos con colores fijos (background:white,
   #f8fafc, etc.) uno por uno según se toquen, sin necesitar !important ya
   que son clases nuevas (no colisionan con la capa de compatibilidad de
   arriba, que solo apunta a nombres genéricos como .modal-content). */
.erp-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: erpFadeIn 0.2s ease-out;
}

.erp-modal {
    background: var(--erp-surface);
    border-radius: 16px;
    width: 420px;
    max-width: calc(100vw - 2rem);
    padding: 1.5rem;
    border: 1px solid var(--erp-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.erp-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--erp-border);
}

.erp-modal-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--erp-primary);
}

.erp-modal-title h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--erp-text-primary);
}

.erp-modal-close {
    background: transparent;
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--erp-text-muted);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.erp-modal-close:hover {
    background: var(--erp-surface-subtle);
    color: var(--erp-text-primary);
}

.erp-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--erp-border);
}

/* Grupo de mini-tarjetas de estadísticas dentro de un modal (ej. Existencia/
   Disponible) - cada tarjeta queda transparente para no crear una "caja
   dentro de otra caja" contra el fondo ya coloreado del grupo. */
.erp-modal-stat-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--erp-surface-subtle);
    border-radius: 10px;
    border: 1px solid var(--erp-border);
}

.erp-modal-stat-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: transparent;
}

.erp-modal-stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--erp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.erp-modal-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--erp-text-primary);
    font-family: var(--erp-font-mono);
}