: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;
    scrollbar-gutter: stable;
}

/* Durante una navegacion asincrona se conserva el DOM anterior solo para poder
   recuperarlo si falla la descarga. Ocultarlo evita que el usuario vea el
   modulo previo —o su cascada heredada— por debajo del loader. */
body.speas-app.speas-module-loading #contenedor-dinamico > *,
body.portal-proveedores.speas-module-loading .content-wrapper > * {
    visibility: hidden !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;
    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; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

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-credito.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-credito,
    #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-credito,
    #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-credito,
    #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-credito.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-credito,
        #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: 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;
    animation: pos-page-in 320ms ease-out both !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;
    }
}