:root,
html[data-speas-theme="verde"] {
    --speas-bg: #f5faf8;
    --speas-surface: #ffffff;
    --speas-surface-2: #eff8f4;
    --speas-elevated: #ffffff;
    --speas-sidebar: #f2f9f6;
    --speas-sidebar-2: #edf7f2;
    --speas-text: #18221f;
    --speas-muted: #63736d;
    --speas-border: #dce9e4;
    --speas-border-strong: #bfd5cc;
    --speas-accent: #12805c;
    --speas-accent-2: #27a979;
    --speas-accent-soft: #e7f7f0;
    --speas-accent-rgb: 18, 128, 92;
    --speas-table-head: #edf7f3;
    --speas-row-hover: #f4fbf8;
    --speas-focus-ring: 0 0 0 4px rgba(18, 128, 92, 0.15);
    --speas-browser-chrome: #f5faf8;
    --primary-color: var(--speas-accent);
    --primary-dark: #0b6346;
    --dark-color: var(--speas-text);
    --text-color-main: var(--speas-text);
    --text-color-secondary: var(--speas-muted);
    --border-color: var(--speas-border);
    --card-bg: var(--speas-surface);
    --body-bg: var(--speas-bg);
}

html[data-speas-theme="azul"] {
    --speas-bg: #f5f8fd;
    --speas-surface: #ffffff;
    --speas-surface-2: #eef4fd;
    --speas-elevated: #ffffff;
    --speas-sidebar: #f2f6fd;
    --speas-sidebar-2: #edf3fc;
    --speas-text: #182235;
    --speas-muted: #65728a;
    --speas-border: #dce5f2;
    --speas-border-strong: #bfcee2;
    --speas-accent: #2764d8;
    --speas-accent-2: #4d82e6;
    --speas-accent-soft: #eaf1ff;
    --speas-accent-rgb: 39, 100, 216;
    --speas-table-head: #edf3fc;
    --speas-row-hover: #f5f8fe;
    --speas-focus-ring: 0 0 0 4px rgba(39, 100, 216, 0.15);
    --speas-browser-chrome: #f5f8fd;
    --primary-color: var(--speas-accent);
    --primary-dark: #1d4ead;
    --dark-color: var(--speas-text);
    --text-color-main: var(--speas-text);
    --text-color-secondary: var(--speas-muted);
    --border-color: var(--speas-border);
    --card-bg: var(--speas-surface);
    --body-bg: var(--speas-bg);
}

html[data-speas-theme="rosa"] {
    --speas-bg: #fff9fb;
    --speas-surface: #ffffff;
    --speas-surface-2: #fff3f7;
    --speas-elevated: #ffffff;
    --speas-sidebar: #fff4f8;
    --speas-sidebar-2: #ffeff5;
    --speas-text: #39232f;
    --speas-muted: #7e6874;
    --speas-border: #eedde5;
    --speas-border-strong: #dbbdca;
    --speas-accent: #be507f;
    --speas-accent-2: #d97ca5;
    --speas-accent-soft: #fff0f5;
    --speas-accent-rgb: 190, 80, 127;
    --speas-table-head: #fff3f7;
    --speas-row-hover: #fff9fb;
    --speas-focus-ring: 0 0 0 4px rgba(190, 80, 127, 0.14);
    --speas-browser-chrome: #fff9fb;
    --primary-color: var(--speas-accent);
    --primary-dark: #98345f;
    --dark-color: var(--speas-text);
    --text-color-main: var(--speas-text);
    --text-color-secondary: var(--speas-muted);
    --border-color: var(--speas-border);
    --card-bg: var(--speas-surface);
    --body-bg: var(--speas-bg);
}

html[data-speas-theme="grafito"] {
    --speas-bg: #f9fafb;
    --speas-surface: #ffffff;
    --speas-surface-2: #f3f5f7;
    --speas-elevated: #ffffff;
    --speas-sidebar: #f5f6f8;
    --speas-sidebar-2: #eff1f4;
    --speas-text: #20242b;
    --speas-muted: #68707c;
    --speas-border: #dfe3e8;
    --speas-border-strong: #c6ccd4;
    --speas-accent: #68717e;
    --speas-accent-2: #8c95a1;
    --speas-accent-soft: #f0f2f5;
    --speas-accent-rgb: 104, 113, 126;
    --speas-table-head: #f3f5f7;
    --speas-row-hover: #fafbfc;
    --speas-focus-ring: 0 0 0 4px rgba(104, 113, 126, 0.14);
    --speas-browser-chrome: #f9fafb;
    --primary-color: var(--speas-accent);
    --primary-dark: #3e4651;
    --dark-color: var(--speas-text);
    --text-color-main: var(--speas-text);
    --text-color-secondary: var(--speas-muted);
    --border-color: var(--speas-border);
    --card-bg: var(--speas-surface);
    --body-bg: var(--speas-bg);
}

html:root:root[data-speas-theme="verde"] {
    --speas-bg: #f5faf8 !important;
    --speas-surface: #ffffff !important;
    --speas-surface-2: #eff8f4 !important;
    --speas-elevated: #ffffff !important;
    --speas-sidebar: #f2f9f6 !important;
    --speas-sidebar-2: #edf7f2 !important;
    --speas-text: #18221f !important;
    --speas-muted: #63736d !important;
    --speas-border: #dce9e4 !important;
    --speas-border-strong: #bfd5cc !important;
    --speas-accent: #12805c !important;
    --speas-accent-2: #27a979 !important;
    --speas-accent-soft: #e7f7f0 !important;
    --speas-accent-rgb: 18, 128, 92 !important;
    --speas-table-head: #edf7f3 !important;
    --speas-row-hover: #f4fbf8 !important;
    --speas-browser-chrome: #f5faf8 !important;
    --primary-color: #12805c !important;
}

html:root:root[data-speas-theme="azul"] {
    --speas-bg: #f5f8fd !important;
    --speas-surface: #ffffff !important;
    --speas-surface-2: #eef4fd !important;
    --speas-elevated: #ffffff !important;
    --speas-sidebar: #f2f6fd !important;
    --speas-sidebar-2: #edf3fc !important;
    --speas-text: #182235 !important;
    --speas-muted: #65728a !important;
    --speas-border: #dce5f2 !important;
    --speas-border-strong: #bfcee2 !important;
    --speas-accent: #2764d8 !important;
    --speas-accent-2: #4d82e6 !important;
    --speas-accent-soft: #eaf1ff !important;
    --speas-accent-rgb: 39, 100, 216 !important;
    --speas-table-head: #edf3fc !important;
    --speas-row-hover: #f5f8fe !important;
    --speas-browser-chrome: #f5f8fd !important;
    --primary-color: #2764d8 !important;
}

html:root:root[data-speas-theme="rosa"] {
    --speas-bg: #fff9fb !important;
    --speas-surface: #ffffff !important;
    --speas-surface-2: #fff3f7 !important;
    --speas-elevated: #ffffff !important;
    --speas-sidebar: #fff4f8 !important;
    --speas-sidebar-2: #ffeff5 !important;
    --speas-text: #39232f !important;
    --speas-muted: #7e6874 !important;
    --speas-border: #eedde5 !important;
    --speas-border-strong: #dbbdca !important;
    --speas-accent: #be507f !important;
    --speas-accent-2: #d97ca5 !important;
    --speas-accent-soft: #fff0f5 !important;
    --speas-accent-rgb: 190, 80, 127 !important;
    --speas-table-head: #fff3f7 !important;
    --speas-row-hover: #fff9fb !important;
    --speas-browser-chrome: #fff9fb !important;
    --primary-color: #be507f !important;
}

html:root:root[data-speas-theme="grafito"] {
    --speas-bg: #f9fafb !important;
    --speas-surface: #ffffff !important;
    --speas-surface-2: #f3f5f7 !important;
    --speas-elevated: #ffffff !important;
    --speas-sidebar: #f5f6f8 !important;
    --speas-sidebar-2: #eff1f4 !important;
    --speas-text: #20242b !important;
    --speas-muted: #68707c !important;
    --speas-border: #dfe3e8 !important;
    --speas-border-strong: #c6ccd4 !important;
    --speas-accent: #68717e !important;
    --speas-accent-2: #8c95a1 !important;
    --speas-accent-soft: #f0f2f5 !important;
    --speas-accent-rgb: 104, 113, 126 !important;
    --speas-table-head: #f3f5f7 !important;
    --speas-row-hover: #fafbfc !important;
    --speas-browser-chrome: #f9fafb !important;
    --primary-color: #68717e !important;
}

html:root:root[data-speas-theme="verde"] body.speas-auth-page {
    --auth-accent: #12805c !important;
    --auth-accent-strong: #0b6346 !important;
    --auth-hero-start: #07392c !important;
    --auth-hero-end: #117657 !important;
    --auth-hero-glow: #55d5a8 !important;
}

html:root:root[data-speas-theme="azul"] body.speas-auth-page {
    --auth-accent: #2764d8 !important;
    --auth-accent-strong: #1d4ead !important;
    --auth-hero-start: #102a5a !important;
    --auth-hero-end: #245fc0 !important;
    --auth-hero-glow: #77a8ff !important;
}

html:root:root[data-speas-theme="rosa"] body.speas-auth-page {
    --auth-accent: #be467b !important;
    --auth-accent-strong: #98345f !important;
    --auth-hero-start: #51213a !important;
    --auth-hero-end: #a43a6b !important;
    --auth-hero-glow: #ff9bc6 !important;
}

html:root:root[data-speas-theme="grafito"] body.speas-auth-page {
    --auth-accent: #525b68 !important;
    --auth-accent-strong: #3e4651 !important;
    --auth-hero-start: #262b32 !important;
    --auth-hero-end: #505966 !important;
    --auth-hero-glow: #aeb7c3 !important;
}

/* Los accesos públicos conservan una identidad fija por portal. Los temas solo
   se seleccionan dentro de la aplicación autenticada. */
html:root:root body.speas-auth-page[data-login-portal="erp"] {
    --auth-accent: #147f76 !important;
    --auth-accent-strong: #0d645e !important;
    --auth-hero-start: #073b3b !important;
    --auth-hero-end: #0d746c !important;
    --auth-hero-glow: #62d7c3 !important;
}

html:root:root body.speas-auth-page[data-login-portal="contable"],
html:root:root body.speas-auth-page[data-login-portal="mfa"] {
    --auth-accent: #5b5acb !important;
    --auth-accent-strong: #4544a8 !important;
    --auth-hero-start: #1c204f !important;
    --auth-hero-end: #514eb0 !important;
    --auth-hero-glow: #a2a2ff !important;
}

html:root:root body.speas-auth-page[data-login-portal="proveedores"] {
    --auth-accent: #2e6ccf !important;
    --auth-accent-strong: #2354a5 !important;
    --auth-hero-start: #0b315e !important;
    --auth-hero-end: #2368b7 !important;
    --auth-hero-glow: #79b5ff !important;
}

html {
    color-scheme: light;
    background: var(--speas-bg);
}

body.speas-app {
    background: var(--speas-bg) !important;
    color: var(--speas-text) !important;
}

body.speas-app:not(.portal-proveedores) {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body.speas-app :is(.sidebar, nav.sidebar),
body.portal-proveedores.speas-app .sidebar {
    background: var(--speas-sidebar) !important;
    border-color: var(--speas-border) !important;
    color: var(--speas-text) !important;
}

/* La hoja heredada declara el fondo del menu con un selector muy especifico y
   !important. Esta regla conserva el tinte pastel de cada paleta sin volver a
   introducir variantes oscuras. */
html:root:root[data-speas-theme] body.speas-app.speas-app :is(.sidebar.sidebar, nav.sidebar.sidebar),
html:root:root[data-speas-theme] body.portal-proveedores.speas-app.speas-app .sidebar.sidebar {
    background: var(--speas-sidebar) !important;
    background-color: var(--speas-sidebar) !important;
    border-color: var(--speas-border) !important;
    color: var(--speas-text) !important;
}

html:root:root[data-speas-theme] body.speas-app.speas-app .sidebar.sidebar :is(.menu-bar, header, .sidebar-header, .bottom-content, .profile-card, .logout-box) {
    background: var(--speas-sidebar-2) !important;
    background-color: var(--speas-sidebar-2) !important;
    color: var(--speas-text) !important;
}

body.speas-app .sidebar :is(.menu-bar, header, .sidebar-header, .bottom-content, .profile-card, .logout-box) {
    background: var(--speas-sidebar-2) !important;
    color: var(--speas-text) !important;
}

body.speas-app .sidebar :is(a, .nav-link, .nav-text, .text, .name, .profession, .proveedor-info) {
    color: var(--speas-muted) !important;
}

body.speas-app .sidebar :is(li.active a, a.active, a:hover, .nav-links li.active, .nav-links li:hover) {
    background: var(--speas-accent-soft) !important;
    color: var(--speas-accent) !important;
}

body.speas-app .sidebar :is(li.active a, a.active, a:hover, .nav-links li.active, .nav-links li:hover) :is(i, span) {
    color: var(--speas-accent) !important;
}

body.speas-app :is(.home, .main-content) {
    background: var(--speas-bg) !important;
    color: var(--speas-text) !important;
}

body.speas-app .home {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body.speas-app :is(.header-text, .topbar) {
    flex: 0 0 auto !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: var(--speas-border) !important;
    color: var(--speas-text) !important;
    backdrop-filter: blur(18px) saturate(130%);
}

body.speas-app :is(#contenedor-dinamico, .content-wrapper) {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
    scrollbar-gutter: stable;
}

/* Durante una navegacion asincrona se conserva el DOM anterior solo para poder
   recuperarlo si falla la descarga. La especificidad reforzada evita que un
   CSS heredado reactive visibility mientras se intercambian las hojas. */
html:root:root body.speas-app.speas-module-loading #contenedor-dinamico#contenedor-dinamico > *,
html:root:root body.portal-proveedores.speas-module-loading .content-wrapper.content-wrapper > * {
    visibility: hidden !important;
}

html:root:root body.speas-app.speas-module-loading #contenedor-dinamico#contenedor-dinamico {
    opacity: 0 !important;
    transition: none !important;
}

/* La paleta calculada se congela inline desde dashboard.js mientras dura la
   navegación. Aquí se cancela cualquier transición heredada para que esa
   declaración se aplique de forma atómica. */
html:root:root[data-speas-theme] body.speas-app.speas-module-loading,
html:root:root[data-speas-theme] body.speas-app.speas-module-loading .home {
    transition: none !important;
}

body.portal-proveedores.speas-app .main-content {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body.portal-proveedores.speas-app .content-wrapper {
    flex: 1 1 auto !important;
}

body.speas-app :is(.card, .panel, .module-header, .page-header, .header-section, .kpi-card, .summary-card, .filters-card) {
    background: var(--speas-surface) !important;
    border-color: var(--speas-border) !important;
    color: var(--speas-text) !important;
    box-shadow: 0 12px 34px rgba(20, 35, 55, 0.055) !important;
}

body.speas-app :is(input, select, textarea, .form-control, .form-select) {
    background: #ffffff !important;
    border-color: var(--speas-border) !important;
    color: var(--speas-text) !important;
}

body.speas-app :is(input, select, textarea, .form-control, .form-select):focus {
    border-color: var(--speas-accent) !important;
    box-shadow: var(--speas-focus-ring) !important;
    outline: none !important;
}

body.speas-app :is(.btn-primary, .primary-btn, .finance-primary-btn, .btn-save, .btn-guardar) {
    background: var(--speas-accent) !important;
    border-color: var(--speas-accent) !important;
    color: #ffffff !important;
}

body.speas-app :is(button, .btn, [role="button"], a) {
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease,
        box-shadow 180ms ease, transform 180ms ease !important;
}

body.speas-app :is(button, .btn, [role="button"]):not(:disabled):active {
    transform: translateY(1px) scale(0.99);
}

.speas-theme-switch {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto !important;
    padding: 4px !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 1px solid var(--speas-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 7px 22px rgba(20, 35, 55, 0.08) !important;
}

.speas-theme-switch .speas-theme-cycle {
    width: auto !important;
    min-width: 104px !important;
    height: 40px !important;
    padding: 0 14px !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: var(--speas-accent-soft) !important;
    color: var(--speas-accent) !important;
    cursor: pointer;
    white-space: nowrap !important;
}

.speas-theme-cycle i {
    font-size: 19px !important;
    flex: 0 0 auto !important;
}

.speas-theme-name {
    font-size: 12px;
    font-weight: 700;
    line-height: 1 !important;
}

.speas-theme-dot {
    flex: 0 0 auto !important;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--speas-accent);
    box-shadow: 0 0 0 3px rgba(var(--speas-accent-rgb), 0.13);
}

body.speas-app .speas-top-search + .speas-shell-actions {
    margin-left: 14px !important;
    margin-right: 2px !important;
    flex: 0 0 auto !important;
}

body.speas-app :is(.speas-table-scroll, .table-responsive, .table-container, .table-wrapper, .table-scroll, .finance-table-wrap, .responsive-table) {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    scrollbar-width: thin;
    scrollbar-color: var(--speas-border-strong) transparent;
}

body.speas-app table {
    width: 100% !important;
    background: #ffffff !important;
    color: var(--speas-text) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body.speas-app table thead,
body.speas-app table thead tr {
    background: var(--speas-table-head) !important;
}

body.speas-app table th {
    color: var(--speas-text) !important;
    border-color: var(--speas-border) !important;
}

body.speas-app table td {
    color: var(--speas-text) !important;
    background: #ffffff !important;
    border-color: var(--speas-border) !important;
}

body.speas-app table tbody tr:hover td {
    background: var(--speas-row-hover) !important;
}

body.speas-app :is(.modal-overlay, .finance-modal, .rend-modal, .g-modal, .auth-modal, .c-modal, .dispatch-dialog-layer, .pos-dialog-layer) {
    box-sizing: border-box !important;
    padding: clamp(12px, 3vw, 32px) !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
    background: rgba(24, 34, 53, 0.42) !important;
    backdrop-filter: blur(10px) saturate(115%) !important;
}

body.speas-app :is(.modal-content, .finance-modal-card, .rend-modal-box, .g-modal > div, .auth-modal > div, .c-modal > div),
body.speas-app [id^="modal-"][style*="position: fixed"] > div {
    box-sizing: border-box !important;
    width: min(100%, 760px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - clamp(24px, 6vw, 64px)) !important;
    margin: auto !important;
    background: #ffffff !important;
    color: var(--speas-text) !important;
    border: 1px solid var(--speas-border) !important;
    border-radius: 22px !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2) !important;
    overflow: auto !important;
}

body.speas-app :is(.modal-content, .finance-modal-card, .rend-modal-box):has(> :is(.modal-body, form.modal-body, .finance-modal-body, .rend-modal-body)) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body.speas-app :is(.modal-header, .modal-footer, .finance-modal-header, .finance-modal-actions, .rend-modal-head, .rend-modal-foot) {
    flex: 0 0 auto !important;
    background: #ffffff !important;
    color: var(--speas-text) !important;
    border-color: var(--speas-border) !important;
}

body.speas-app :is(.modal-body, form.modal-body, .finance-modal-body, .rend-modal-body) {
    flex: 0 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

body.speas-app :is(.modal-header, .finance-modal-header, .rend-modal-head) :is(h1, h2, h3, h4, i, button) {
    color: var(--speas-text) !important;
}

body.speas-app :is(.modal-header, .finance-modal-header, .rend-modal-head) :is(.btn-close, .close-modal, [aria-label*="Cerrar"], [title*="Cerrar"]) {
    background: var(--speas-surface-2) !important;
    color: var(--speas-muted) !important;
    border: 1px solid var(--speas-border) !important;
    border-radius: 12px !important;
}

@keyframes speas-design-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

body.speas-app :is(#contenedor-dinamico, .content-wrapper) > * {
    animation: speas-design-enter 260ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

@media (max-width: 1024px) {
    html:root:root,
    html:root:root body.speas-app.speas-app,
    html:root:root body.speas-app.speas-app .home,
    html:root:root body.speas-app.speas-app #contenedor-dinamico#contenedor-dinamico,
    html:root:root body.speas-app.speas-app .content-wrapper.content-wrapper {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    html:root:root body.speas-app.speas-app #contenedor-dinamico#contenedor-dinamico > *,
    html:root:root body.speas-app.speas-app .content-wrapper.content-wrapper > * {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
    }

    body.speas-app :is(#contenedor-dinamico, .content-wrapper) :is(.module-container, .module-content, .module-page, .module-shell, .dashboard-container, .finance-inbox-container, .consola-module-root) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html body.speas-app #contenedor-dinamico table,
    html body.speas-app .content-wrapper table {
        display: table !important;
        width: 100% !important;
    }

    html body.speas-app #contenedor-dinamico table thead,
    html body.speas-app .content-wrapper table thead {
        display: table-header-group !important;
    }

    html body.speas-app #contenedor-dinamico table tbody,
    html body.speas-app .content-wrapper table tbody {
        display: table-row-group !important;
    }

    html body.speas-app #contenedor-dinamico table tr,
    html body.speas-app .content-wrapper table tr {
        display: table-row !important;
    }

    html body.speas-app #contenedor-dinamico table :is(th, td),
    html body.speas-app .content-wrapper table :is(th, td) {
        display: table-cell !important;
        width: auto !important;
        max-width: none !important;
        position: static !important;
        text-align: left !important;
    }

    html body.speas-app #contenedor-dinamico table td::before,
    html body.speas-app .content-wrapper table td::before {
        content: none !important;
        display: none !important;
    }

    html body.speas-app :is(#contenedor-dinamico, .content-wrapper) table:has(tr > :nth-child(3)) {
        min-width: 580px !important;
    }

    html body.speas-app :is(#contenedor-dinamico, .content-wrapper) table:has(tr > :nth-child(4)) {
        min-width: 720px !important;
    }

    html body.speas-app :is(#contenedor-dinamico, .content-wrapper) table:has(tr > :nth-child(7)) {
        min-width: 980px !important;
    }

    html:root:root body.speas-app.speas-app #contenedor-dinamico#contenedor-dinamico .speas-table-scroll.speas-table-scroll,
    html:root:root body.speas-app.speas-app .content-wrapper.content-wrapper .speas-table-scroll.speas-table-scroll {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    html:root:root body.speas-app.speas-app #contenedor-dinamico#contenedor-dinamico .speas-table-scroll.speas-table-scroll table,
    html:root:root body.speas-app.speas-app .content-wrapper.content-wrapper .speas-table-scroll.speas-table-scroll table {
        display: table !important;
    }

    html:root:root body.speas-app.speas-app #contenedor-dinamico#contenedor-dinamico .speas-table-scroll.speas-table-scroll table thead,
    html:root:root body.speas-app.speas-app .content-wrapper.content-wrapper .speas-table-scroll.speas-table-scroll table thead {
        display: table-header-group !important;
    }

    html:root:root body.speas-app.speas-app #contenedor-dinamico#contenedor-dinamico .speas-table-scroll.speas-table-scroll table tbody,
    html:root:root body.speas-app.speas-app .content-wrapper.content-wrapper .speas-table-scroll.speas-table-scroll table tbody {
        display: table-row-group !important;
    }

    html:root:root body.speas-app.speas-app #contenedor-dinamico#contenedor-dinamico .speas-table-scroll.speas-table-scroll table tr,
    html:root:root body.speas-app.speas-app .content-wrapper.content-wrapper .speas-table-scroll.speas-table-scroll table tr {
        display: table-row !important;
    }

    html:root:root body.speas-app.speas-app #contenedor-dinamico#contenedor-dinamico .speas-table-scroll.speas-table-scroll table :is(th, td),
    html:root:root body.speas-app.speas-app .content-wrapper.content-wrapper .speas-table-scroll.speas-table-scroll table :is(th, td) {
        display: table-cell !important;
        width: auto !important;
        max-width: none !important;
        position: static !important;
    }
}

@media (max-width: 768px) {
    .speas-theme-name {
        display: none;
    }

    .speas-theme-switch .speas-theme-cycle {
        width: 42px !important;
        min-width: 42px !important;
        padding: 0 8px !important;
    }

    body.speas-app .speas-top-search + .speas-shell-actions {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    body.speas-app :is(#contenedor-dinamico, .content-wrapper) {
        scrollbar-gutter: auto;
    }

    body.speas-app :is(.modal-overlay, .finance-modal, .rend-modal, .g-modal, .auth-modal, .c-modal, .dispatch-dialog-layer, .pos-dialog-layer) {
        padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
        align-items: center !important;
    }

    body.speas-app :is(.modal-content, .finance-modal-card, .rend-modal-box, .g-modal > div, .auth-modal > div, .c-modal > div),
    body.speas-app [id^="modal-"][style*="position: fixed"] > div {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        border-radius: 20px !important;
    }

    body.speas-app :is(.modal-header, .modal-footer, .finance-modal-header, .finance-modal-actions, .rend-modal-head, .rend-modal-foot) {
        min-height: 0 !important;
        padding: 15px 17px !important;
    }

    body.speas-app :is(.modal-body, form.modal-body, .finance-modal-body, .rend-modal-body) {
        padding: 17px !important;
    }
}

html:root:root body.speas-app.speas-app #contenedor-dinamico#contenedor-dinamico .modal-overlay > .modal-content,
html:root:root body.speas-app.speas-app .content-wrapper.content-wrapper .modal-overlay > .modal-content,
html:root:root body.speas-app.speas-app #contenedor-dinamico#contenedor-dinamico :is(.finance-modal-card, .rend-modal-box) {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: auto !important;
}

html:root:root body.speas-app.speas-app #contenedor-dinamico#contenedor-dinamico .modal-overlay > .modal-content:has(> .modal-body),
html:root:root body.speas-app.speas-app .content-wrapper.content-wrapper .modal-overlay > .modal-content:has(> .modal-body) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

@media (min-width: 1920px) {
    body.speas-app :is(#contenedor-dinamico, .content-wrapper) > * {
        width: min(100%, 1800px) !important;
        margin-inline: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.speas-app *,
    body.speas-app *::before,
    body.speas-app *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

/* Normalizacion transversal de los modulos ERP heredados. Inicio, Ventas y
   Finanzas se excluyen deliberadamente de este barrido. */
html:root:root[data-speas-theme] body.speas-app[data-speas-module]:not([data-speas-module="inicio"]):not([data-speas-module="ventas"]):not([data-speas-module="finanzas"]) {
    --module-accent: var(--speas-accent);
    --module-accent-soft: var(--speas-accent-soft);
    --primary: var(--speas-accent);
    --primary-color: var(--speas-accent);
    --accent-color: var(--speas-accent);
    --text-main: var(--speas-text);
    --text-muted: var(--speas-muted);
    --border-color: var(--speas-border);
    --card-bg: var(--speas-surface);
}

html:root:root[data-speas-theme] body.speas-app[data-speas-module]:not([data-speas-module="inicio"]):not([data-speas-module="ventas"]):not([data-speas-module="finanzas"]) #contenedor-dinamico :is(
    .icon-header,
    .section-icon,
    .module-icon,
    .card-icon,
    .stat-icon,
    .metric-icon,
    .kpi-icon,
    .empty-icon,
    .icon-box,
    .icon-circle,
    .codigos-icon,
    .saldo-icon,
    .dispatch-dialog-icon,
    .historial-email-icon
) {
    background: var(--speas-accent-soft) !important;
    border-color: color-mix(in srgb, var(--speas-accent) 24%, var(--speas-border)) !important;
    color: var(--speas-accent) !important;
}

html:root:root[data-speas-theme] body.speas-app[data-speas-module]:not([data-speas-module="inicio"]):not([data-speas-module="ventas"]):not([data-speas-module="finanzas"]) #contenedor-dinamico :is(
    .btn-primary,
    .primary-btn,
    .btn-prime.primary,
    .btn-save,
    .btn-guardar,
    .btn-filter,
    .btn-refresh,
    .tab-btn.active,
    .tab-button.active,
    [role="tab"][aria-selected="true"]
) {
    background: var(--speas-accent) !important;
    border-color: var(--speas-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--speas-accent) 18%, transparent) !important;
}

html:root:root[data-speas-theme] body.speas-app[data-speas-module]:not([data-speas-module="inicio"]):not([data-speas-module="ventas"]):not([data-speas-module="finanzas"]) #contenedor-dinamico :is(
    .module-header,
    .header-section,
    .toolbar-container,
    .filters-bar,
    .content-card,
    .table-card,
    .chart-card,
    .module-card,
    .panel
) {
    background-color: var(--speas-surface) !important;
    border-color: var(--speas-border) !important;
    color: var(--speas-text) !important;
}

html:root:root[data-speas-theme] body.speas-app[data-speas-module]:not([data-speas-module="inicio"]):not([data-speas-module="ventas"]):not([data-speas-module="finanzas"]) #contenedor-dinamico :is(h1, h2, h3, h4, label, .title, .module-title) {
    color: var(--speas-text) !important;
}

html:root:root[data-speas-theme] body.speas-app[data-speas-module]:not([data-speas-module="inicio"]):not([data-speas-module="ventas"]):not([data-speas-module="finanzas"]) #contenedor-dinamico :is(.subtitle, .muted, small, .helper-text) {
    color: var(--speas-muted) !important;
}

/* Portales de dialogo: la regla vive fuera del contenedor porque muchos modulos
   mueven el modal a document.body. */
html:root:root[data-speas-theme] body.speas-app[data-speas-module]:not([data-speas-module="inicio"]):not([data-speas-module="ventas"]):not([data-speas-module="finanzas"]) :is(
    .modal-overlay,
    .modal-custom,
    .rend-modal,
    .dispatch-dialog-layer,
    .g-modal,
    .c-modal
) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10020 !important;
    width: 100vw !important;
    height: 100dvh !important;
    align-items: center !important;
    justify-content: center !important;
    place-items: center !important;
    padding: clamp(12px, 3vw, 30px) !important;
    overflow: hidden !important;
    background: rgba(24, 34, 53, 0.42) !important;
}

html:root:root[data-speas-theme] body.speas-app[data-speas-module]:not([data-speas-module="inicio"]):not([data-speas-module="ventas"]):not([data-speas-module="finanzas"]) :is(
    .modal-overlay.hidden,
    .modal-custom.hidden,
    .rend-modal[hidden],
    .dispatch-dialog-layer[hidden],
    .g-modal[hidden],
    .c-modal[hidden]
) {
    display: none !important;
}

html:root:root[data-speas-theme] body.speas-app[data-speas-module]:not([data-speas-module="inicio"]):not([data-speas-module="ventas"]):not([data-speas-module="finanzas"]) :is(
    .modal-content,
    .modal-panel,
    .rend-modal-box,
    .g-modal > div,
    .c-modal > div
) {
    position: relative !important;
    inset: auto !important;
    width: min(100%, 680px) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - clamp(24px, 6vw, 60px)) !important;
    margin: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--speas-surface) !important;
    color: var(--speas-text) !important;
    border: 1px solid var(--speas-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 28px 76px rgba(15, 23, 42, 0.22) !important;
    overflow: hidden !important;
}

html:root:root[data-speas-theme] body.speas-app[data-speas-module]:not([data-speas-module="inicio"]):not([data-speas-module="ventas"]):not([data-speas-module="finanzas"]) :is(
    .modal-header,
    .rend-modal-head,
    .modal-footer,
    .rend-modal-foot,
    .modal-content > .form-actions
) {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    background: var(--speas-surface) !important;
    border-color: var(--speas-border) !important;
}

html:root:root[data-speas-theme] body.speas-app[data-speas-module]:not([data-speas-module="inicio"]):not([data-speas-module="ventas"]):not([data-speas-module="finanzas"]) :is(
    .modal-body,
    .rend-modal-body,
    .modal-content > form
) {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 18px 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--speas-surface) !important;
    color: var(--speas-text) !important;
}

html:root:root[data-speas-theme] body.speas-app[data-speas-module]:not([data-speas-module="inicio"]):not([data-speas-module="ventas"]):not([data-speas-module="finanzas"]) :is(.modal-content, .rend-modal-box) :is(input, select, textarea) {
    background: var(--speas-surface) !important;
    border-color: var(--speas-border) !important;
    color: var(--speas-text) !important;
}

html:root:root[data-speas-theme] body.speas-app[data-speas-module="ordenes_compra"] #modal-crear-oc .modal-content {
    width: min(100%, 840px) !important;
}

html:root:root[data-speas-theme] body.speas-app[data-speas-module="ordenes_compra"] #modal-recepcion-oc .modal-content {
    width: min(100%, 720px) !important;
}

html:root:root[data-speas-theme] body.speas-app[data-speas-module="inventario"] #modal-kardex .modal-content {
    width: min(100%, 1180px) !important;
}

/* Formularios que la hoja historica convertia en cajones laterales. Se
   presentan como dialogos centrados y con desplazamiento interno coherente. */
html:root:root[data-speas-theme] body.speas-app.speas-app :is(
    #modal-crear-oc.modal-overlay,
    #modal-recepcion-oc.modal-overlay,
    #modal-anular-oc.modal-overlay,
    #modal-cliente.modal-overlay,
    #modal-producto.modal-overlay,
    #modal-proveedor.modal-overlay,
    #modal-factura.modal-overlay,
    #modal-detalles-ver.modal-overlay
) {
    align-items: center !important;
    justify-content: center !important;
    place-items: center !important;
    padding: clamp(12px, 3vw, 30px) !important;
}

html:root:root[data-speas-theme] body.speas-app.speas-app :is(
    #modal-crear-oc,
    #modal-recepcion-oc,
    #modal-anular-oc,
    #modal-cliente,
    #modal-producto,
    #modal-proveedor,
    #modal-factura,
    #modal-detalles-ver
) > .modal-content {
    position: relative !important;
    inset: auto !important;
    width: min(100%, 840px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - clamp(24px, 6vw, 60px)) !important;
    margin: auto !important;
    transform: none !important;
}

html:root:root[data-speas-theme] body.speas-app.speas-app #modal-cliente > .modal-content {
    width: min(100%, 760px) !important;
}

html:root:root[data-speas-theme] body.speas-app.speas-app :is(
    #modal-crear-oc,
    #modal-recepcion-oc,
    #modal-anular-oc,
    #modal-cliente,
    #modal-producto,
    #modal-proveedor,
    #modal-factura,
    #modal-detalles-ver
) :is(.modal-header, .modal-body, .modal-footer, .modal-content > form) {
    background: var(--speas-surface) !important;
    background-color: var(--speas-surface) !important;
    border-color: var(--speas-border) !important;
    color: var(--speas-text) !important;
}

/* Rendiciones porta el dialogo fuera de #rend-modulo; se restauran aqui sus
   tokens y su espaciado para que no pierda el boton principal ni los margenes. */
html:root:root[data-speas-theme] body.speas-app[data-speas-module="rendiciones"] .rend-modal {
    --r-border: var(--speas-border);
    --r-muted: var(--speas-muted);
    --r-surface: var(--speas-surface);
    --r-accent: var(--speas-accent);
}

html:root:root[data-speas-theme] body.speas-app[data-speas-module="rendiciones"] .rend-modal-box > h3 {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    color: var(--speas-text) !important;
    border-bottom: 1px solid var(--speas-border) !important;
}

html:root:root[data-speas-theme] body.speas-app[data-speas-module="rendiciones"] .rend-modal-box > .rend-form-grid {
    padding: 18px 20px !important;
}

html:root:root[data-speas-theme] body.speas-app[data-speas-module="rendiciones"] .rend-modal-box > .rend-modal-foot {
    margin: 0 !important;
    padding: 16px 20px !important;
    border-top: 1px solid var(--speas-border) !important;
}

html:root:root[data-speas-theme] body.speas-app[data-speas-module="rendiciones"] .rend-modal .rend-btn-primary {
    background: var(--speas-accent) !important;
    border-color: var(--speas-accent) !important;
    color: #ffffff !important;
}

html:root:root[data-speas-theme] body.speas-app.speas-app :is(
    #modal-crear-oc,
    #modal-recepcion-oc,
    #modal-anular-oc,
    #modal-cliente,
    #modal-producto,
    #modal-proveedor,
    #modal-factura,
    #modal-detalles-ver
) :is(.modal-header, .modal-body, .modal-footer) :is(h2, h3, h4, label, p, span:not(.status-badge)) {
    color: var(--speas-text) !important;
}

@media (max-width: 720px) {
    html:root:root[data-speas-theme] body.speas-app[data-speas-module]:not([data-speas-module="inicio"]):not([data-speas-module="ventas"]):not([data-speas-module="finanzas"]) :is(
        .modal-overlay,
        .modal-custom,
        .rend-modal,
        .dispatch-dialog-layer,
        .g-modal,
        .c-modal
    ) {
        align-items: flex-end !important;
        place-items: end center !important;
        padding: 0 !important;
    }

    html:root:root[data-speas-theme] body.speas-app[data-speas-module]:not([data-speas-module="inicio"]):not([data-speas-module="ventas"]):not([data-speas-module="finanzas"]) :is(
        .modal-content,
        .modal-panel,
        .rend-modal-box,
        .g-modal > div,
        .c-modal > div
    ) {
        width: 100% !important;
        max-width: none !important;
        max-height: 92dvh !important;
        border-radius: 20px 20px 0 0 !important;
    }

    html:root:root[data-speas-theme] body.speas-app.speas-app :is(
        #modal-crear-oc.modal-overlay,
        #modal-recepcion-oc.modal-overlay,
        #modal-anular-oc.modal-overlay,
        #modal-cliente.modal-overlay,
        #modal-producto.modal-overlay,
        #modal-proveedor.modal-overlay,
        #modal-factura.modal-overlay,
        #modal-detalles-ver.modal-overlay
    ) {
        align-items: flex-end !important;
        justify-content: center !important;
        place-items: end center !important;
        padding: 0 !important;
    }

    html:root:root[data-speas-theme] body.speas-app.speas-app :is(
        #modal-crear-oc,
        #modal-recepcion-oc,
        #modal-anular-oc,
        #modal-cliente,
        #modal-producto,
        #modal-proveedor,
        #modal-factura,
        #modal-detalles-ver
    ) > .modal-content {
        width: 100% !important;
        max-width: none !important;
        max-height: 92dvh !important;
        border-radius: 20px 20px 0 0 !important;
    }
}

/* Ventas POS: bloqueo de scroll del contenedor mientras hay una capa abierta.
   Vive aqui y no en ventas.css porque la regla de arriba pone
   `overflow-y: auto !important` sobre este mismo contenedor: desde la hoja del
   modulo no hay especificidad que gane a un !important. Antes esto se hacia con
   `content.style.setProperty('overflow-y','hidden','important')` desde ventas.js,
   que obligaba a guardar el valor previo Y su prioridad para devolverlos, y ese
   guardado se pierde en cuanto dos capas se abren y se cierran en distinto orden. */
html:root:root body.speas-app #contenedor-dinamico#contenedor-dinamico.pos-scroll-lock {
    overflow-y: hidden !important;
}

/* Ventas POS: aislamiento final frente a la capa heredada y temas SPEAS. */
html:root:root[data-speas-theme] body.speas-app .pos-shell {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--speas-text) !important;
    transform: none !important;
}

html:root:root[data-speas-theme] body.speas-app .pos-shell :is(
    .pos-toolbar,
    .pos-catalog,
    .pos-ticket,
    .pos-form-section
),
html:root:root[data-speas-theme] body.speas-app .pos-dialog {
    background-color: var(--speas-surface) !important;
    border-color: var(--speas-border) !important;
    color: var(--speas-text) !important;
}

html:root:root[data-speas-theme] body.speas-app.speas-app .pos-workspace .pos-ticket {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    border-radius: 20px !important;
}

html:root:root body.speas-app.speas-app .header-text.header-text .speas-theme-switch .speas-theme-cycle {
    width: auto !important;
    min-width: 104px !important;
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 14px !important;
    border-radius: 9px !important;
}

@media (max-width: 768px) {
    html:root:root body.speas-app.speas-app .header-text.header-text .speas-theme-switch .speas-theme-cycle {
        width: 42px !important;
        min-width: 42px !important;
        padding: 0 8px !important;
    }

    .speas-theme-switch .speas-theme-dot {
        display: none !important;
    }
}

html:root:root[data-speas-theme] body.speas-app .pos-shell .pos-toolbar {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--speas-accent) 10%, transparent), transparent 34%),
        var(--speas-surface) !important;
}

html:root:root[data-speas-theme] body.speas-app .pos-shell .pos-product-card {
    min-height: 126px !important;
    padding: 15px !important;
    background: var(--speas-surface) !important;
    border-color: var(--speas-border) !important;
    color: var(--speas-text) !important;
}

html:root:root[data-speas-theme] body.speas-app .pos-shell .pos-product-card:hover {
    background: color-mix(in srgb, var(--speas-accent) 2.5%, var(--speas-surface)) !important;
    border-color: color-mix(in srgb, var(--speas-accent) 38%, var(--speas-border)) !important;
}

html:root:root[data-speas-theme] body.speas-app .pos-shell .pos-ticket-footer,
html:root:root[data-speas-theme] body.speas-app .pos-dialog-body,
html:root:root[data-speas-theme] body.speas-app .pos-search-wrap kbd,
html:root:root[data-speas-theme] body.speas-app .pos-results-count {
    background: var(--speas-surface-2) !important;
    border-color: var(--speas-border) !important;
    color: var(--speas-muted) !important;
}

html:root:root[data-speas-theme] body.speas-app .pos-search-wrap {
    background: var(--speas-surface) !important;
    border-color: var(--speas-border) !important;
}

html:root:root[data-speas-theme] body.speas-app .pos-search-wrap:focus-within {
    border-color: var(--speas-accent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--speas-accent) 13%, transparent), 0 12px 28px rgba(24, 34, 53, 0.06) !important;
}

html:root:root[data-speas-theme] body.speas-app .pos-search-wrap input {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--speas-text) !important;
    box-shadow: none !important;
}

html:root:root[data-speas-theme] body.speas-app .pos-search-icon,
html:root:root[data-speas-theme] body.speas-app :is(.pos-product-icon, .pos-product-add, .pos-ticket-icon, .pos-empty-cart i),
html:root:root[data-speas-theme] body.speas-app .pos-form-section > header > i {
    background: var(--speas-accent-soft) !important;
    color: var(--speas-accent) !important;
}

html:root:root[data-speas-theme] body.speas-app :is(.pos-primary, .pos-floating-cart) {
    min-height: 43px !important;
    background: var(--speas-accent) !important;
    border-color: var(--speas-accent) !important;
    color: #ffffff !important;
}

html:root:root[data-speas-theme] body.speas-app :is(.pos-primary, .pos-floating-cart):hover {
    background: color-mix(in srgb, var(--speas-accent) 82%, #172033) !important;
}

html:root:root[data-speas-theme] body.speas-app :is(
    .pos-secondary,
    .pos-category-btn,
    .pos-icon-button,
    .pos-qty-button
) {
    min-height: 34px !important;
    border-color: var(--speas-border) !important;
}

html:root:root[data-speas-theme] body.speas-app .pos-category-btn.is-active,
html:root:root[data-speas-theme] body.speas-app :is(.pos-segmented, .pos-payment-grid, .pos-print-grid) input:checked + span {
    background: var(--speas-accent-soft) !important;
    border-color: var(--speas-accent) !important;
    color: var(--speas-accent) !important;
}

html:root:root[data-speas-theme] body.speas-app .pos-dialog-layer {
    background: rgba(24, 34, 53, 0.4) !important;
}

html:root:root[data-speas-theme] body.speas-app .pos-total-card {
    background: linear-gradient(120deg, var(--speas-accent-soft), var(--speas-surface)) !important;
    border-color: var(--speas-border) !important;
    color: var(--speas-text) !important;
}

html:root:root[data-speas-theme] body.speas-app .pos-dialog-layer :is(
    .pos-field input,
    .pos-field select,
    .pos-suffix-input input
) {
    height: 42px !important;
    min-height: 42px !important;
    background: var(--speas-surface) !important;
    border-color: var(--speas-border) !important;
    color: var(--speas-text) !important;
    box-shadow: none !important;
}

html:root:root[data-speas-theme] body.speas-app .pos-dialog-layer :is(
    .pos-field input,
    .pos-field select,
    .pos-suffix-input input
):focus {
    border-color: var(--speas-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--speas-accent) 13%, transparent) !important;
}

@media (max-width: 760px) {
    html:root:root[data-speas-theme] body.speas-app .pos-shell .pos-product-card {
        min-height: 112px !important;
        padding: 12px !important;
    }

    html:root:root[data-speas-theme] body.speas-app .pos-dialog-layer {
        align-items: end !important;
        padding: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:root:root[data-speas-theme] body.speas-app .pos-shell *,
    html:root:root[data-speas-theme] body.speas-app .pos-shell *::before,
    html:root:root[data-speas-theme] body.speas-app .pos-shell *::after,
    html:root:root[data-speas-theme] body.speas-app .pos-dialog-layer *,
    html:root:root[data-speas-theme] body.speas-app .pos-dialog-layer *::before,
    html:root:root[data-speas-theme] body.speas-app .pos-dialog-layer *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
    }
}

/* Modales en movil: panel inferior, como la orden de venta del POS.
   En un telefono todos los dialogos del ERP -los de cada modulo, los que
   arman dashboard.js y notifications.js y los que llevan estilo en linea-
   suben desde abajo, a todo el ancho, con las esquinas de arriba redondeadas,
   el fondo desenfocado y el pie por encima de la barra del sistema. Las reglas
   por identificador de speas-ui.css y del CSS de cada modulo (que carga
   despues) centran su modal, asi que este bloque necesita mas especificidad
   que dos identificadores: la dan los :not(#_s) repetidos. No toca `display`:
   abrir y cerrar sigue siendo cosa de cada modulo. */
@media (max-width: 640px) {
    html:root:root body.speas-app.speas-app:not(#_s):not(#_s):not(#_s):not(#_s) :is(
        .modal-overlay,
        .modal-custom,
        .rend-modal,
        .dispatch-dialog-layer,
        .finance-modal,
        .modulos-modal-overlay,
        .pos-dialog-layer,
        .calendar-detail-overlay,
        .erp-bank-review-overlay,
        .custom-confirm-overlay,
        .custom-alert-overlay,
        #modal-eliminar-usuario
    ) {
        place-items: end center !important;
        align-items: flex-end !important;
        /* stretch y no center: en las capas que son grid, center encoge la
           columna al ancho del contenido y la hoja no llega a los bordes. */
        justify-content: stretch !important;
        align-content: end !important;
        padding: max(18px, env(safe-area-inset-top, 0px)) 0 0 !important;
        background: rgba(24, 34, 53, 0.42) !important;
        backdrop-filter: blur(7px) !important;
        -webkit-backdrop-filter: blur(7px) !important;
        overflow: hidden !important;
    }

    html:root:root body.speas-app.speas-app:not(#_s):not(#_s):not(#_s):not(#_s) :is(
        .modal-overlay,
        .modal-custom,
        .rend-modal,
        .dispatch-dialog-layer,
        .finance-modal,
        .modulos-modal-overlay,
        .pos-dialog-layer,
        .calendar-detail-overlay,
        .erp-bank-review-overlay,
        .custom-confirm-overlay,
        .custom-alert-overlay,
        #modal-eliminar-usuario
    ) > :is(
        .modal-content,
        .modal-panel,
        .rend-modal-box,
        .finance-modal-card,
        .modulos-modal-card,
        .pos-dialog,
        .dispatch-dialog,
        .calendar-detail-card,
        .erp-bank-review-dialog,
        .confirm-box,
        .alert-box,
        [role="alertdialog"],
        [role="dialog"]
    ),
    html:root:root body.speas-app.speas-app:not(#_s):not(#_s):not(#_s):not(#_s) #modal-eliminar-usuario > div {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - max(18px, env(safe-area-inset-top, 0px))) !important;
        margin: auto 0 0 !important;
        border-bottom: 0 !important;
        border-radius: 22px 22px 0 0 !important;
        box-shadow: 0 -18px 48px rgba(15, 23, 42, 0.22) !important;
        transform: none !important;
        animation: speas-hoja-sube 180ms ease-out both !important;
    }

    /* Los que no tienen cuerpo propio que desplace, desplazan la hoja entera. */
    html:root:root body.speas-app.speas-app:not(#_s):not(#_s):not(#_s):not(#_s) :is(
        .rend-modal,
        .dispatch-dialog-layer,
        .finance-modal,
        .modulos-modal-overlay,
        .calendar-detail-overlay,
        .erp-bank-review-overlay,
        .custom-confirm-overlay,
        .custom-alert-overlay,
        #modal-eliminar-usuario
    ) > :is(
        .rend-modal-box,
        .finance-modal-card,
        .modulos-modal-card,
        .dispatch-dialog,
        .calendar-detail-card,
        .erp-bank-review-dialog,
        .confirm-box,
        .alert-box,
        [role="alertdialog"],
        [role="dialog"]
    ),
    html:root:root body.speas-app.speas-app:not(#_s):not(#_s):not(#_s):not(#_s) #modal-eliminar-usuario > div {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* El pie queda por encima del indicador de inicio del telefono. */
    html:root:root body.speas-app.speas-app:not(#_s):not(#_s):not(#_s):not(#_s) :is(.modal-content, .modal-panel, .pos-dialog) > :is(.modal-footer, .pos-dialog-footer):last-child,
    html:root:root body.speas-app.speas-app:not(#_s):not(#_s):not(#_s):not(#_s) .modal-content > form > .modal-footer:last-child {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    html:root:root body.speas-app.speas-app:not(#_s):not(#_s):not(#_s):not(#_s) :is(.modal-content, .modal-panel) > :is(.modal-body, form):last-child {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Una columna 1fr no baja del ancho minimo de su contenido: la tabla de
       lineas de la orden de compra la estiraba a 720 px y la hoja se cortaba
       por la derecha. Con min-width 0 la tabla desplaza dentro de su caja. */
    html:root:root body.speas-app.speas-app:not(#_s):not(#_s):not(#_s):not(#_s) :is(.modal-content, .modal-panel, .rend-modal-box, .finance-modal-card) :is(.form-grid, .form-row, .rend-form-grid) > * {
        min-width: 0 !important;
    }

    /* Botones del pie faciles de tocar, como el POS. Solo la altura: el
       reparto (fila o columna) lo decide cada modulo. */
    html:root:root body.speas-app.speas-app:not(#_s):not(#_s):not(#_s):not(#_s) :is(.modal-footer, .rend-modal-foot, .finance-modal-actions, .modulos-modal-actions, .dispatch-dialog-actions, .confirm-actions, .historial-dialog-actions) > :is(button, a) {
        min-height: 44px !important;
    }
}

@keyframes speas-hoja-sube {
    from { translate: 0 24px; opacity: 0; }
    to { translate: 0 0; opacity: 1; }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
    html:root:root body.speas-app.speas-app:not(#_s):not(#_s):not(#_s):not(#_s) :is(.modal-content, .modal-panel, .rend-modal-box, .finance-modal-card, .modulos-modal-card, .pos-dialog, .dispatch-dialog, .calendar-detail-card, .erp-bank-review-dialog, .confirm-box, .alert-box) {
        animation: none !important;
    }
}

/* Additional company palette; existing user choices remain available. */
html:root:root[data-speas-theme="lila"] {
    color-scheme: light;
    --speas-bg: #f8f5fc !important;
    --speas-surface: #ffffff !important;
    --speas-surface-2: #f1ebf9 !important;
    --speas-elevated: #ffffff !important;
    --speas-sidebar: #f2ecfa !important;
    --speas-sidebar-2: #ede5f7 !important;
    --speas-text: #2e243d !important;
    --speas-muted: #71647f !important;
    --speas-border: #e2d8ef !important;
    --speas-border-strong: #b9a5cf !important;
    --speas-accent: #7951ac !important;
    --speas-accent-2: #946cc7 !important;
    --speas-accent-soft: #eee5f8 !important;
    --speas-accent-rgb: 121, 81, 172 !important;
    --speas-table-head: #f1ebf9 !important;
    --speas-row-hover: #f7f2fc !important;
    --speas-browser-chrome: #f8f5fc !important;
    --speas-focus-ring: 0 0 0 3px rgba(121, 81, 172, .28);
    --primary-color: var(--speas-accent) !important;
    --primary-dark: #61408c;
    --bg-card: var(--speas-surface);
    --bg-body: var(--speas-bg);
    --text-main: var(--speas-text);
    --text-muted: var(--speas-muted);
}

/* Company themes: complete module palette and semantic states. */

@media screen {
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) {
 --speas-surface-muted:var(--speas-surface-2);
 --speas-accent-strong:var(--speas-accent);
 --speas-action:#7951ac;
 --speas-on-action:#fff;
 --speas-success:#176a43;
 --speas-success-soft:#e4f3eb;
 --speas-danger:#ae2945;
 --speas-danger-soft:#fbe9ee;
 --speas-warning:#805313;
 --speas-warning-soft:#fff2d8;
 --speas-info:#275f9c;
 --speas-info-soft:#e8f1fc;
}
html:root:root[data-speas-theme="rojo-oscuro"] {
 --speas-action:#b72b42;
 --speas-success:#82ddb4!important;
 --speas-success-soft:#193d32;
 --speas-danger:#ff9aa9!important;
 --speas-danger-soft:#442630;
 --speas-warning:#f4ce87!important;
 --speas-warning-soft:#3e3322;
 --speas-info:#a5caff!important;
 --speas-info-soft:#25364c;
}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) {
 --text-primary:var(--speas-text);--text-secondary:var(--speas-muted);--text-color:var(--speas-text);
 --card-bg:var(--speas-surface);--input-bg:var(--speas-elevated,var(--speas-surface));--border-color:var(--speas-border);
}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.fw,.cxc,.budgets,.contracts,.cash-forecast,.liquidaciones) {
 --fw-bg:var(--speas-surface);--fw-border:var(--speas-border);--fw-muted:var(--speas-muted);--fw-primary:var(--speas-action);
 --cx-card:var(--speas-surface);--cx-line:var(--speas-border);--cx-ink:var(--speas-text);--cx-accent:var(--speas-accent);
 --budget-accent:var(--speas-accent);--ct-accent:var(--speas-accent);--cf-accent:var(--speas-accent);--lq-accent:var(--speas-accent);
 color:var(--speas-text)!important;
}
/* Headers always pair their foreground with their surface, including nested legacy tokens. */
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.fw-header,.cxc-header,.budget-heading,.ct-header,.cf-header,.lq-header) {
 --speas-text:inherit;--speas-muted:inherit;
 background:var(--speas-surface)!important;border:1px solid var(--speas-border)!important;color:inherit!important;
}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.fw-header h2,.fw-header p,.fw-context,.fw-header .fw-eyebrow) {color:inherit!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.fw-context,.inventario-subnav,.period-tabs,.role-badge,.finance-eyebrow,.finance-glossary,.finance-status-bar,.cxc-kpi,.cxc-callout,.fw-note,.fw-empty,.budget-note,.ct-note,.cf-note,.lq-note,.fw-bar-track) {
 background:var(--speas-surface-2)!important;color:var(--speas-text)!important;border-color:var(--speas-border)!important;
}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.fw-card,.fw-line,.budget-card,.budget-line,.ct-card,.lq-card,.cf-card,.bank-cards article,.cxc-currency,.cxc-row,.bank-table,.ct-scroll,.cxc-dialog>header,.fw-dialog>header,.fw-dialog footer) {
 background:var(--speas-surface)!important;color:var(--speas-text)!important;border-color:var(--speas-border)!important;
}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.tab-btn,.config-tab,.banks button,.contracts button,.liquidaciones button,.cash-forecast button,.budgets button,.fw button,.cxc button,.btn-small) {
 background:var(--speas-surface-2)!important;color:var(--speas-text)!important;border-color:var(--speas-border)!important;
}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.tab-btn.active,.config-tab.active,.provider-status-tab.active,.pagination button.active,.paginacion button.active,.pos-primary,.rend-btn-primary,.btn-primary-control,.calendar-crm-button,.fc-button-active,.cxc-primary,.budget-primary,.ct-primary,.cf-primary,.lq-primary,.fw-primary,.speas-ai-launch-mark,.speas-loader-brand .speas-logo-mark,button[type="submit"],.fw-tabs button[aria-selected="true"],.cxc-tabs button[aria-pressed="true"],.cxc-detail-nav button[aria-pressed="true"],.budget-tabs button[aria-pressed="true"]) {
 background:var(--speas-action)!important;color:var(--speas-on-action)!important;border-color:var(--speas-action)!important;
}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.pos-primary,.rend-btn-primary,.fw-primary,.cxc-primary,.calendar-crm-button,button[type="submit"]) :is(span,small,i) {color:inherit!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.module-header p,.header-info p,#inventario-descripcion,.page-info,#page-info,.info-item .label,.profile-sidebar-card .label,.analytics-products-pager,.analytics-products-pagination,#analytics-products-page,.control-pagination,#control-auditoria-total,#control-auditoria-pagina,.cxc-aging,.fw-message,.bank-note) {color:var(--speas-muted)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.analytics-eyebrow,.performance-eyebrow,.cxc-eyebrow,.budget-eyebrow,.ct-eyebrow,.lq-eyebrow,.cf-eyebrow,.bank-cards strong,.banks a) {color:var(--speas-accent)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.profile-sidebar-card .value,.profile-sidebar-card .info-value,.profile-sidebar-card .info-value span) {color:var(--speas-text)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.historial-doc-badge,.historial-origin-badge,.badge-pago,.badge-soft-primary,.fw-badge,.budget-badge,.ct-badge,.lq-badge,.cf-badge,.cxc-badge) {background:var(--speas-accent-soft)!important;color:var(--speas-accent)!important;border-color:var(--speas-border)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.trend.positive,.historial-total-value,.historial-sunat-success,.status-active,.calendar-filter-status,.pos-meta-pill.is-open,.dispatch-status .is-ready) {color:var(--speas-success)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.status-active,.fw-badge.approved,.budget-badge.approved,.ct-badge.approved,.bank-status.ok,.cxc-badge.settled,.pos-stock-badge,.pos-stock) {background:var(--speas-success-soft)!important;color:var(--speas-success)!important;border-color:var(--speas-success)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.bank-status,.fw-badge.pending,.budget-badge.pending,.ct-badge.pending,.cxc-badge.overdue,.ct-warning,.historial-origin-event,.historial-doc-recibo) {background:var(--speas-warning-soft)!important;color:var(--speas-warning)!important;border-color:var(--speas-warning)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.fw-badge.rejected,.budget-badge.rejected,.ct-badge.rejected,.pos-stock.is-empty,.pos-stock-badge.is-empty,.historial-discount-chip) {background:var(--speas-danger-soft)!important;color:var(--speas-danger)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.historial-sunat-error,.historial-total-void,.ct-negative,.fw-danger,.fw-editor-message,.bank-dialog-message,.cxc-dialog-message) {color:var(--speas-danger)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.historial-sunat-warning,.historial-sunat-pending-cancel) {color:var(--speas-warning)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .btn-action.ingreso {background:var(--speas-success-soft)!important;color:var(--speas-success)!important;border-color:var(--speas-border)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .btn-action.gasto {background:var(--speas-danger-soft)!important;color:var(--speas-danger)!important;border-color:var(--speas-border)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .btn-action :is(span,small) {color:inherit!important;opacity:1!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .caja-accion-excel {background:#176a43!important;color:white!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.toast,.mini-notif) {background:var(--speas-surface)!important;color:var(--speas-text)!important;border-color:var(--speas-border)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .mini-notif span {color:inherit!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .mini-notif.success {border-left-color:var(--speas-success)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .mini-notif.success i {background:var(--speas-success-soft)!important;color:var(--speas-success)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .mini-notif.error {border-left-color:var(--speas-danger)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .mini-notif.error i {background:var(--speas-danger-soft)!important;color:var(--speas-danger)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .mini-notif.warning {border-left-color:var(--speas-warning)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .mini-notif.warning i {background:var(--speas-warning-soft)!important;color:var(--speas-warning)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .mini-notif.info {border-left-color:var(--speas-info)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .mini-notif.info i {background:var(--speas-info-soft)!important;color:var(--speas-info)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .toast :is(.toast-title,.toast-msg) {color:var(--speas-text)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .toast.success {border-left-color:var(--speas-success)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .toast.error {border-left-color:var(--speas-danger)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .toast.warning {border-left-color:var(--speas-warning)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .toast.info {border-left-color:var(--speas-info)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .speas-loader-overlay {background:color-mix(in srgb,var(--speas-bg) 94%,transparent)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .speas-loader-track span {background:var(--speas-accent)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.tabs-wrapper,#finanzas-estado-carga,.analytics-chart-state,.btn-secondary-control,.control-pagination button) {background:var(--speas-surface-2)!important;color:var(--speas-text)!important;border-color:var(--speas-border)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .finance-tab.is-active :is(small,span) {color:inherit!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.header-titles p,td [style*="color:#64748b"]) {color:var(--speas-muted)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.pnl-positive,.btn-excel-control,.dispatch-button.is-export) {background:var(--speas-success-soft)!important;color:var(--speas-success)!important;border-color:var(--speas-border)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .dispatch-button.is-export span {color:inherit!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .photo-overlay {background:#292432!important;color:#fff!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .photo-overlay :is(span,i) {color:#fff!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.badge-cat,.product-icon-table,.action-buttons .btn-action.edit,.action-buttons .btn-action.transfer-stock) {background:var(--speas-accent-soft)!important;color:var(--speas-accent)!important;border-color:var(--speas-border)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.action-buttons .btn-action.delete,.pos-stock.is-out) {background:var(--speas-danger-soft)!important;color:var(--speas-danger)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.action-buttons .btn-action.add-stock,.action-buttons .btn-action.restore) {background:var(--speas-success-soft)!important;color:var(--speas-success)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) #float-cart-count {background:var(--speas-action)!important;color:white!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .pos-floating-cart {background:var(--speas-action)!important;color:white!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .analytics-container {--a-ink:var(--speas-text);--a-muted:var(--speas-muted);--a-border:var(--speas-border);--a-surface:var(--speas-surface);--a-soft:var(--speas-surface-2);--a-blue:var(--speas-accent);--a-positive:var(--speas-success);--a-negative:var(--speas-danger);color-scheme:inherit;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) dialog.fw-dialog {position:fixed!important;inset:0!important;margin:auto!important;max-height:calc(100dvh - 32px)!important;overflow:auto!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(.input-group>label,.speas-checkline) {background:var(--speas-surface)!important;color:var(--speas-text)!important;border-color:var(--speas-border)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .erp-principal-check {background:var(--speas-surface-2)!important;color:var(--speas-text)!important;border-color:var(--speas-border)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :focus-visible {outline-color:var(--speas-accent)!important;}
}

/* Open selects keep paired text and surface colors inside every modal. */
@media screen {
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .speas-select-search {background:var(--speas-surface)!important;color:var(--speas-text)!important;border-color:var(--speas-border)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .speas-select-search input {background:var(--speas-surface-2)!important;color:var(--speas-text)!important;border-color:var(--speas-border)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .speas-select-search input::placeholder {color:var(--speas-muted)!important;opacity:1!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .speas-select-search [role="option"] {background:transparent!important;color:var(--speas-text)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .speas-select-search [role="option"]:is(:hover,[data-active="true"]) {background:var(--speas-accent-soft)!important;color:var(--speas-accent)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .speas-select-search [role="option"][aria-selected="true"] {background:var(--speas-action)!important;color:var(--speas-on-action)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) .speas-select-search [role="status"] {color:var(--speas-muted)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) select :is(option,optgroup) {background:var(--speas-surface)!important;color:var(--speas-text)!important;}
}

/* Legacy purchase and CRM panels inside modals. */
@media screen {
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(#modal-factura div:has(> #contenedor-adicionales),#modal-factura .file-upload-zone,#modal-factura div:has(> #check-pagar-ahora),#modal-lead #form-lead > div[style*="background"],.crm-discount-summary) {background:var(--speas-surface-2)!important;color:var(--speas-text)!important;border-color:var(--speas-border)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) #modal-factura [data-facturas-action="agregar-fila-adicional"] {background:var(--speas-action)!important;color:var(--speas-on-action)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) #modal-factura [data-facturas-action="agregar-fila-adicional"] :is(span,i) {color:inherit!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) #modal-lead :is(label,.req,p,.form-group > span) {color:var(--speas-muted)!important;}
html:root:root:is([data-speas-theme="lila"],[data-speas-theme="rojo-oscuro"]) body.speas-app.speas-app:not(#theme-specificity):not(#theme-specificity):not(#theme-specificity):not(#theme-specificity) :is(input,textarea)::placeholder {color:var(--speas-muted)!important;opacity:1!important;}
}