html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

body {
    background-color: #f0f0f0;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    width: 100%;
    padding: 0.95rem;
    background: #3b82f6;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 1.05rem;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}

    .btn-primary:hover {
        background: #2563eb;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ====================== 
    ICONOS DE GOOGLE
======================= */
@font-face {
    font-family: 'Material Symbols Rounded';
    src: url('/fonts/MaterialSymbolsRounded.ttf') format('truetype');
    font-weight: 100 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Material Symbols Outlined';
    src: url('/fonts/MaterialSymbolsOutlined.ttf') format('truetype');
    font-weight: 100 700;
    font-style: normal;
    font-display: block;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
}

/* ??????????????????????????????????????????????????????
   TOPBAR —
????????????????????????????????????????????????????????*/

.topbar-shell .e-btn,
.topbar-shell .e-btn.e-lib,
.topbar-shell .e-css.e-btn {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    padding: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    outline: none !important;
    overflow: visible !important;
    white-space: normal !important;
}

    .topbar-shell .e-btn:hover,
    .topbar-shell .e-btn:focus,
    .topbar-shell .e-btn:active,
    .topbar-shell .e-css.e-btn:hover,
    .topbar-shell .e-css.e-btn:focus {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        outline: none !important;
    }

    .topbar-shell .e-btn::before,
    .topbar-shell .e-btn::after {
        display: none !important;
    }

    .topbar-shell .e-btn .e-btn-content {
        display: contents !important;
    }

    .topbar-shell .e-btn .e-ripple-element {
        display: none !important;
    }

    /* 2 · Company selector */
    .topbar-shell .e-btn.company-selector-btn {
        min-width: 280px !important;
        height: 48px !important;
        border: 1px solid #dbe3ee !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        color: #1f2937 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 7px 12px 7px 8px !important;
        cursor: pointer !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04) !important;
        transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
    }

        .topbar-shell .e-btn.company-selector-btn:hover,
        .topbar-shell .e-btn.company-selector-btn.open {
            background: #f8fbff !important;
            border-color: #bfdbfe !important;
            box-shadow: 0 14px 28px rgba(37, 99, 235, 0.10) !important;
            transform: none !important;
        }

    /* 3 · Company option */
    .topbar-shell .e-btn.company-option {
        width: 100% !important;
        border: 1px solid transparent !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        color: inherit !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 10px 12px 4px !important;
        cursor: pointer !important;
        transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
    }

        .topbar-shell .e-btn.company-option:hover {
            background: #f8fafc !important;
            border-color: #e5eefb !important;
            transform: translateX(2px) !important;
        }

        .topbar-shell .e-btn.company-option.selected {
            background: #eff6ff !important;
            border-color: #bfdbfe !important;
            box-shadow: inset 3px 0 0 #2563eb !important;
        }

    /* 4 · Company footer buttons */
    .topbar-shell .e-btn.company-footer-btn {
        height: 38px !important;
        border: 1px solid #dbeafe !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        color: #2563eb !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        cursor: pointer !important;
        transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important;
    }

        .topbar-shell .e-btn.company-footer-btn:hover {
            background: #eff6ff !important;
            border-color: #bfdbfe !important;
            transform: none !important;
        }

        .topbar-shell .e-btn.company-footer-btn.secondary {
            color: #475569 !important;
            border-color: #e5e7eb !important;
        }

            .topbar-shell .e-btn.company-footer-btn.secondary:hover {
                background: #f8fafc !important;
            }

    /* 5 · Notification bell */
    .topbar-shell .e-btn.topbar-bell {
        position: relative !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border: none !important;
        background: transparent !important;
        color: #64748b !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        border-radius: 10px !important;
        padding: 0 !important;
        transition: background 0.18s ease, color 0.18s ease !important;
    }

        .topbar-shell .e-btn.topbar-bell:hover,
        .topbar-shell .e-btn.topbar-bell:focus,
        .topbar-shell .e-btn.topbar-bell:active {
            background: #f8fafc !important;
            color: #1f2937 !important;
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }

    /* 6 · Notifications text buttons */
    .topbar-shell .e-btn.notifications-link-btn {
        border: none !important;
        background: transparent !important;
        color: #2563eb !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        padding: 0 !important;
        min-width: auto !important;
        height: auto !important;
    }

    .topbar-shell .e-btn.notifications-footer-button {
        border: none !important;
        background: transparent !important;
        color: #2563eb !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        padding: 0 !important;
        min-width: auto !important;
        height: auto !important;
        font-family: inherit !important;
    }

/* ???????????????????????????????????????????????????????
   NAV-SHELL — 
??????????????????????????????????????????????????????? */

.nav-shell .e-btn,
.nav-shell .e-btn.e-lib,
.nav-shell .e-css.e-btn {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    padding: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    outline: none !important;
    overflow: visible !important;
    white-space: normal !important;
}

    .nav-shell .e-btn:hover,
    .nav-shell .e-btn:focus,
    .nav-shell .e-btn:active {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        outline: none !important;
    }

    .nav-shell .e-btn::before,
    .nav-shell .e-btn::after {
        display: none !important;
    }

    .nav-shell .e-btn .e-btn-content {
        display: contents !important;
    }

    .nav-shell .e-btn .e-ripple-element {
        display: none !important;
    }

    .nav-shell .e-btn.collapse-btn {
        width: 38px !important;
        height: 38px !important;
        border-radius: 13px !important;
        border: 1px solid #dbe3ee !important;
        background: #ffffff !important;
        color: #64748b !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        flex: 0 0 auto !important;
        transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
    }

        .nav-shell .e-btn.collapse-btn:hover {
            background: #f8fafc !important;
            color: #2563eb !important;
            border-color: #bfdbfe !important;
        }

        .nav-shell .e-btn.collapse-btn:active {
            transform: scale(0.96) !important;
        }

    .nav-shell .e-btn.nav-group-btn {
        width: 100% !important;
        min-height: 46px !important;
        border: 1px solid transparent !important;
        border-radius: 15px !important;
        background: transparent !important;
        color: #263449 !important;
        display: flex !important;
        align-items: center !important;
        gap: 11px !important;
        padding: 0 12px !important;
        text-align: left !important;
        cursor: pointer !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .nav-shell .e-btn.nav-group-btn:hover {
            background: #f8fafc !important;
            border-color: #eef2f7 !important;
            transform: translateX(2px) !important;
        }

.nav-shell .nav-group.active > .e-btn.nav-group-btn {
    background: linear-gradient(135deg, #2d8cff 0%, #2563eb 55%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.18) !important;
}

.nav-shell .e-btn.nav-user {
    width: 100% !important;
    min-height: 62px !important;
    border: 1px solid #e3eaf3 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 10px 12px !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04) !important;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

    .nav-shell .e-btn.nav-user:hover {
        background: #f8fbff !important;
        border-color: #cfe0ff !important;
        box-shadow: 0 14px 26px rgba(37, 99, 235, 0.10) !important;
        transform: none !important;
    }

    .nav-shell .e-btn.nav-user:active {
        transform: scale(0.985) !important;
    }

    .nav-shell .e-btn.nav-user:hover .user-chevron {
        background: #eff6ff !important;
        color: #2563eb !important;
    }

.nav-shell .e-btn.user-menu-item {
    width: 100% !important;
    min-height: 40px !important;
    border: none !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 11px !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    cursor: pointer !important;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}

    .nav-shell .e-btn.user-menu-item:hover {
        background: #f8fafc !important;
        color: #111827 !important;
        transform: translateX(2px) !important;
    }

        .nav-shell .e-btn.user-menu-item:hover .material-symbols-outlined {
            background: #eff6ff !important;
            color: #2563eb !important;
            transform: scale(1.04) !important;
        }

    .nav-shell .e-btn.user-menu-item.danger {
        color: #dc2626 !important;
    }

        .nav-shell .e-btn.user-menu-item.danger:hover {
            background: #fff1f2 !important;
            color: #b91c1c !important;
        }

            .nav-shell .e-btn.user-menu-item.danger:hover .material-symbols-outlined {
                background: #ffe4e6 !important;
                color: #dc2626 !important;
            }

/* Colapsado */
.nav-shell.collapsed .e-btn.nav-group-btn {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
}

    .nav-shell.collapsed .e-btn.nav-group-btn:hover {
        transform: none !important;
    }

.nav-shell.collapsed .e-btn.nav-user {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 15px !important;
}

/* Responsive: viewport-small expandido */
.nav-shell.viewport-small.manual-open-small:not(.collapsed) .e-btn.nav-group-btn,
.nav-shell.viewport-small:not(.collapsed) .e-btn.nav-group-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 46px !important;
    padding: 0 12px !important;
    justify-content: flex-start !important;
    gap: 11px !important;
}

    .nav-shell.viewport-small.manual-open-small:not(.collapsed) .e-btn.nav-group-btn:hover,
    .nav-shell.viewport-small:not(.collapsed) .e-btn.nav-group-btn:hover {
        transform: translateX(2px) !important;
    }

.nav-shell.viewport-small.manual-open-small:not(.collapsed) .e-btn.nav-user,
.nav-shell.viewport-small:not(.collapsed) .e-btn.nav-user {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 62px !important;
    padding: 10px 12px !important;
    justify-content: flex-start !important;
    border-radius: 18px !important;
}

/* ???????????????????????????????????????????????????????
   DASHBOARD — Estilos SfButton (CSS global)
??????????????????????????????????????????????????????? */

.e-btn.mini-kpi-menu {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #9ca3af !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    min-width: auto !important;
    width: auto !important;
    height: auto !important;
    flex-shrink: 0 !important;
    outline: none !important;
}

    .e-btn.mini-kpi-menu:hover,
    .e-btn.mini-kpi-menu:focus,
    .e-btn.mini-kpi-menu:active {
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        color: #6b7280 !important;
    }

    .e-btn.mini-kpi-menu .e-btn-content {
        line-height: 1 !important;
    }

/* Botones "Ver todas / Ver todos" */
.e-btn.last-movements-button {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #2563eb !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    min-width: auto !important;
    width: auto !important;
    height: auto !important;
}

    .e-btn.last-movements-button:hover {
        background: transparent !important;
        box-shadow: none !important;
        color: #1d4ed8 !important;
        text-decoration: underline !important;
    }

    .e-btn.last-movements-button:focus,
    .e-btn.last-movements-button:active {
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .e-btn.last-movements-button .e-btn-content {
        line-height: 1.2 !important;
    }

/* ???????????????????????????????????????????????????????
   QUICK ACTIONS — Reset + estilos SfButton (CSS global)
??????????????????????????????????????????????????????? */

.erp-quick-actions-host .e-btn,
.erp-quick-actions-host .e-btn.e-lib {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    padding: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    outline: none !important;
    overflow: visible !important;
    white-space: normal !important;
}

    .erp-quick-actions-host .e-btn:hover,
    .erp-quick-actions-host .e-btn:focus,
    .erp-quick-actions-host .e-btn:active {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        outline: none !important;
    }

    .erp-quick-actions-host .e-btn::before,
    .erp-quick-actions-host .e-btn::after {
        display: none !important;
    }

    .erp-quick-actions-host .e-btn .e-btn-content {
        display: contents !important;
    }

    .erp-quick-actions-host .e-btn .e-ripple-element {
        display: none !important;
    }

    /* Botón principal Crear */
    .erp-quick-actions-host .e-btn.erp-quick-actions-button {
        min-width: 98px !important;
        height: 50px !important;
        padding: 0 18px !important;
        border-radius: 16px !important;
        border: 1px solid #1d4ed8 !important;
        background: linear-gradient(135deg, #2d8cff 0%, #2563eb 55%, #1d4ed8 100%) !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        box-shadow: 0 16px 32px rgba(37, 99, 235, 0.34) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        cursor: grab !important;
        touch-action: none !important;
        user-select: none !important;
        transition: box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease !important;
    }

        .erp-quick-actions-host .e-btn.erp-quick-actions-button:hover {
            box-shadow: 0 20px 38px rgba(37, 99, 235, 0.42) !important;
            transform: none !important;
        }

        .erp-quick-actions-host .e-btn.erp-quick-actions-button:active {
            transform: scale(0.97) !important;
        }

.erp-quick-actions-host.qa-dragging .e-btn.erp-quick-actions-button {
    cursor: grabbing !important;
    transform: scale(1.03) !important;
}

/* Botón cerrar panel */
.erp-quick-actions-host .e-btn.quick-actions-close {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
}

    .erp-quick-actions-host .e-btn.quick-actions-close:hover {
        background: rgba(255, 255, 255, 0.14) !important;
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.22) !important;
    }

/* Cards de acción */
.erp-quick-actions-host .e-btn.quick-action-card {
    width: 100% !important;
    min-height: 48px !important;
    border: 1px solid transparent !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 0 12px !important;
    text-align: left !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
}

    .erp-quick-actions-host .e-btn.quick-action-card:hover {
        background: rgba(255, 255, 255, 0.12) !important;
        border-color: rgba(147, 197, 253, 0.32) !important;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.20) !important;
        transform: translateX(2px) !important;
    }

    .erp-quick-actions-host .e-btn.quick-action-card:first-child {
        background: rgba(37, 99, 235, 0.24) !important;
        border-color: rgba(147, 197, 253, 0.30) !important;
    }

@keyframes qaItemIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

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

/* Animation trigger global — scoped [b-xxxx] no llega a SfButton */
.erp-quick-actions-host .e-btn.quick-action-card.qa-item-ready {
    animation: qaItemIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--qa-delay, 0ms);
}

@keyframes qaItemIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

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

/* ???????????????????????????????????????????????????????????
   NOTIFICACIONES — Reset + estilos SfButton (CSS global)
??????????????????????????????????????????????????????????? */

.notifications-page .e-btn,
.notifications-page .e-btn.e-lib {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    padding: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    outline: none !important;
    overflow: visible !important;
    white-space: normal !important;
}

    .notifications-page .e-btn:hover,
    .notifications-page .e-btn:focus,
    .notifications-page .e-btn:active {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        outline: none !important;
    }

    .notifications-page .e-btn::before,
    .notifications-page .e-btn::after {
        display: none !important;
    }

    .notifications-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .notifications-page .e-btn .e-ripple-element {
        display: none !important;
    }

    /* KPI cards */
    .notifications-page .e-btn.nt-kpi-card {
        min-width: 0 !important;
        height: 76px !important;
        border: 1px solid #e3eaf3 !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        color: inherit !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 11px !important;
        padding: 12px !important;
        text-align: left !important;
        cursor: pointer !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04) !important;
        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
        animation: notificationsCardIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

        .notifications-page .e-btn.nt-kpi-card:nth-child(1) {
            animation-delay: 0.03s;
        }

        .notifications-page .e-btn.nt-kpi-card:nth-child(2) {
            animation-delay: 0.06s;
        }

        .notifications-page .e-btn.nt-kpi-card:nth-child(3) {
            animation-delay: 0.09s;
        }

        .notifications-page .e-btn.nt-kpi-card:nth-child(4) {
            animation-delay: 0.12s;
        }

        .notifications-page .e-btn.nt-kpi-card:hover {
            transform: translateY(-2px) !important;
            border-color: #bfdbfe !important;
            box-shadow: 0 14px 28px rgba(37, 99, 235, 0.10) !important;
            background: #ffffff !important;
        }

        .notifications-page .e-btn.nt-kpi-card.active {
            background: #eff6ff !important;
            border-color: #bfdbfe !important;
            box-shadow: inset 3px 0 0 #2563eb, 0 12px 26px rgba(37, 99, 235, 0.10) !important;
        }

    /* Botón Marcar leídas */
    .notifications-page .e-btn.nt-action-btn {
        height: 34px !important;
        border-radius: 10px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        cursor: pointer !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #374151 !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
    }

        .notifications-page .e-btn.nt-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

    /* Tabs */
    .notifications-page .e-btn.notifications-tab {
        height: 30px !important;
        border-radius: 10px !important;
        border: none !important;
        background: transparent !important;
        color: #64748b !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease !important;
    }

        .notifications-page .e-btn.notifications-tab:hover {
            color: #1f2937 !important;
            transform: none !important;
            background: transparent !important;
        }

        .notifications-page .e-btn.notifications-tab.active {
            background: #ffffff !important;
            color: #2563eb !important;
            box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08) !important;
        }

    /* Botón Limpiar */
    .notifications-page .e-btn.nt-primary-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        border: none !important;
        background: #2563eb !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .notifications-page .e-btn.nt-primary-btn:hover {
            background: #1d4ed8 !important;
            transform: none !important;
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
        }

/* ???????????????????????????????????????????????????????????
   VENTAS — Reset + estilos SfButton (CSS global)
??????????????????????????????????????????????????????????? */

.ventas-page .e-btn,
.ventas-page .e-btn.e-lib {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    padding: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    outline: none !important;
    overflow: visible !important;
    white-space: normal !important;
}

    .ventas-page .e-btn:hover,
    .ventas-page .e-btn:focus,
    .ventas-page .e-btn:active {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        outline: none !important;
    }

    .ventas-page .e-btn::before,
    .ventas-page .e-btn::after {
        display: none !important;
    }

    .ventas-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .ventas-page .e-btn .e-ripple-element {
        display: none !important;
    }

    /* Botón secundario */
    .ventas-page .e-btn.vt-action-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #374151 !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .ventas-page .e-btn.vt-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

    /* Botón primario */
    .ventas-page .e-btn.vt-primary-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        border: none !important;
        background: #2563eb !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .ventas-page .e-btn.vt-primary-btn:hover {
            background: #1d4ed8 !important;
            transform: none !important;
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
        }

/* Responsive — flex/width overrides desde scoped CSS */
@media (max-width: 980px) {
    .ventas-page .ventas-header-actions .e-btn.vt-action-btn,
    .ventas-page .ventas-header-actions .e-btn.vt-primary-btn {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 768px) {
    .ventas-page .ventas-header-actions .e-btn.vt-action-btn,
    .ventas-page .ventas-header-actions .e-btn.vt-primary-btn {
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    .ventas-page .ventas-header-actions .e-btn.vt-action-btn,
    .ventas-page .ventas-header-actions .e-btn.vt-primary-btn {
        width: 100% !important;
    }
}

/* =======================================================
   VENTA FORM — Reset + estilos SfButton (CSS global)
========================================================== */

.venta-form-page .e-btn,
.venta-form-page .e-btn.e-lib {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    padding: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    outline: none !important;
    overflow: visible !important;
    white-space: normal !important;
}

    .venta-form-page .e-btn:hover,
    .venta-form-page .e-btn:focus,
    .venta-form-page .e-btn:active {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        outline: none !important;
    }

    .venta-form-page .e-btn::before,
    .venta-form-page .e-btn::after {
        display: none !important;
    }

    .venta-form-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .venta-form-page .e-btn .e-ripple-element {
        display: none !important;
    }

    /* Botón primario */
    .venta-form-page .e-btn.vf-primary-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        border: none !important;
        background: #2563eb !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .venta-form-page .e-btn.vf-primary-btn:hover {
            background: #1d4ed8 !important;
            transform: none !important;
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
        }

    /* Botón secundario */
    .venta-form-page .e-btn.vf-action-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #374151 !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .venta-form-page .e-btn.vf-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

    /* Tabs */
    .venta-form-page .e-btn.vf-tab {
        height: 34px !important;
        padding: 0 14px !important;
        border: 1px solid #dbe2ea !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        color: #475569 !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
    }

        .venta-form-page .e-btn.vf-tab:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

        .venta-form-page .e-btn.vf-tab.active {
            background: #eff6ff !important;
            border-color: #bfdbfe !important;
            color: #1d4ed8 !important;
        }

    /* Botón eliminar en grid */
    .venta-form-page .e-btn.vf-grid-delete-btn {
        height: 32px !important;
        border-radius: 9px !important;
        border: 1px solid #fecaca !important;
        background: #fff5f5 !important;
        color: #b91c1c !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
    }

        .venta-form-page .e-btn.vf-grid-delete-btn:hover {
            background: #fee2e2 !important;
            border-color: #fca5a5 !important;
            transform: none !important;
        }

/* Responsive */
@media (max-width: 980px) {
    .venta-form-page .venta-form-header-actions .e-btn.vf-action-btn,
    .venta-form-page .venta-form-header-actions .e-btn.vf-primary-btn {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 768px) {
    .venta-form-page .venta-form-header-actions .e-btn.vf-action-btn,
    .venta-form-page .venta-form-header-actions .e-btn.vf-primary-btn {
        width: 100% !important;
    }

    .venta-form-page .vf-lines-actions .e-btn.vf-action-btn {
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    .venta-form-page .venta-form-header-actions .e-btn.vf-action-btn,
    .venta-form-page .venta-form-header-actions .e-btn.vf-primary-btn {
        width: 100% !important;
    }
}

/* ???????????????????????????????????????????????????????????
   VENTA DETALLE — Reset + estilos SfButton (CSS global)
??????????????????????????????????????????????????????????? */

.venta-detalle-page .e-btn,
.venta-detalle-page .e-btn.e-lib {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    padding: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    outline: none !important;
    overflow: visible !important;
    white-space: normal !important;
}

    .venta-detalle-page .e-btn:hover,
    .venta-detalle-page .e-btn:focus,
    .venta-detalle-page .e-btn:active {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        outline: none !important;
    }

    .venta-detalle-page .e-btn::before,
    .venta-detalle-page .e-btn::after {
        display: none !important;
    }

    .venta-detalle-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .venta-detalle-page .e-btn .e-ripple-element {
        display: none !important;
    }

    /* Botón primario */
    .venta-detalle-page .e-btn.vd-primary-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        border: none !important;
        background: #2563eb !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .venta-detalle-page .e-btn.vd-primary-btn:hover {
            background: #1d4ed8 !important;
            transform: none !important;
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
        }

    /* Botón secundario */
    .venta-detalle-page .e-btn.vd-action-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #374151 !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .venta-detalle-page .e-btn.vd-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

    /* Tabs */
    .venta-detalle-page .e-btn.vd-tab {
        height: 34px !important;
        padding: 0 14px !important;
        border: 1px solid #dbe2ea !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        color: #475569 !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
    }

        .venta-detalle-page .e-btn.vd-tab:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

        .venta-detalle-page .e-btn.vd-tab.active {
            background: #eff6ff !important;
            border-color: #bfdbfe !important;
            color: #1d4ed8 !important;
        }

/* Responsive */
@media (max-width: 980px) {
    .venta-detalle-page .venta-detalle-actions .e-btn.vd-action-btn,
    .venta-detalle-page .venta-detalle-actions .e-btn.vd-primary-btn {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 768px) {
    .venta-detalle-page .venta-detalle-actions .e-btn.vd-action-btn,
    .venta-detalle-page .venta-detalle-actions .e-btn.vd-primary-btn {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 640px) {
    .venta-detalle-page .venta-detalle-actions .e-btn.vd-action-btn,
    .venta-detalle-page .venta-detalle-actions .e-btn.vd-primary-btn {
        width: 100% !important;
    }
}

/* ???????????????????????????????????????????????????????????
   CLIENTES — Reset + estilos SfButton (CSS global)
??????????????????????????????????????????????????????????? */

.clientes-page .e-btn,
.clientes-page .e-btn.e-lib {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    padding: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    outline: none !important;
    overflow: visible !important;
    white-space: normal !important;
}

    .clientes-page .e-btn:hover,
    .clientes-page .e-btn:focus,
    .clientes-page .e-btn:active {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        outline: none !important;
    }

    .clientes-page .e-btn::before,
    .clientes-page .e-btn::after {
        display: none !important;
    }

    .clientes-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .clientes-page .e-btn .e-ripple-element {
        display: none !important;
    }

    /* Botón secundario */
    .clientes-page .e-btn.cl-action-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #374151 !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .clientes-page .e-btn.cl-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

    /* Botón primario */
    .clientes-page .e-btn.cl-primary-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        border: none !important;
        background: #2563eb !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .clientes-page .e-btn.cl-primary-btn:hover {
            background: #1d4ed8 !important;
            transform: none !important;
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
        }

/* Responsive */
@media (max-width: 980px) {
    .clientes-page .clientes-header-actions .e-btn.cl-action-btn,
    .clientes-page .clientes-header-actions .e-btn.cl-primary-btn {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 768px) {
    .clientes-page .clientes-header-actions .e-btn.cl-action-btn,
    .clientes-page .clientes-header-actions .e-btn.cl-primary-btn {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 640px) {
    .clientes-page .clientes-header-actions .e-btn.cl-action-btn,
    .clientes-page .clientes-header-actions .e-btn.cl-primary-btn {
        width: 100% !important;
    }
}

/* ===================== ClienteFormulario ===================== */

.cliente-form-page .e-btn,
.cliente-form-page .e-btn.e-lib {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    padding: 0 !important;
    min-width: auto !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: normal !important;
    border-radius: 0 !important;
    height: auto !important;
    line-height: normal !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

    .cliente-form-page .e-btn:hover,
    .cliente-form-page .e-btn:focus,
    .cliente-form-page .e-btn:active {
        background: transparent !important;
        border: none !important;
        color: inherit !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .cliente-form-page .e-btn::before,
    .cliente-form-page .e-btn::after {
        display: none !important;
    }

    .cliente-form-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .cliente-form-page .e-btn .e-ripple-element {
        display: none !important;
    }

    /* Cancelar / Nueva dirección */
    .cliente-form-page .e-btn.cform-action-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #374151 !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
    }

        .cliente-form-page .e-btn.cform-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

    /* Guardar / Añadir condición */
    .cliente-form-page .e-btn.cform-primary-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        border: none !important;
        background: #2563eb !important;
        color: #ffffff !important;
        transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .cliente-form-page .e-btn.cform-primary-btn:hover {
            background: #1d4ed8 !important;
            transform: none !important;
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
        }

    /* Eliminar seleccionada / Eliminar logo / Eliminar condición */
    .cliente-form-page .e-btn.cform-danger-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        border: 1px solid #fecaca !important;
        background: #fff5f5 !important;
        color: #b91c1c !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
    }

        .cliente-form-page .e-btn.cform-danger-btn:hover {
            background: #fee2e2 !important;
            border-color: #fca5a5 !important;
            transform: none !important;
        }

    /* Pestañas principales */
    .cliente-form-page .e-btn.cliente-form-tab {
        height: 32px !important;
        border-radius: 10px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        background: transparent !important;
        border: none !important;
        color: #64748b !important;
        flex: 0 0 auto !important;
        transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease !important;
    }

        .cliente-form-page .e-btn.cliente-form-tab:hover {
            color: #1f2937 !important;
            transform: none !important;
            background: transparent !important;
        }

        .cliente-form-page .e-btn.cliente-form-tab.active {
            background: #ffffff !important;
            color: #2563eb !important;
            box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08) !important;
        }

    /* Subpestañas de direcciones */
    .cliente-form-page .e-btn.cform-address-subtab {
        height: 34px !important;
        min-width: 170px !important;
        border-radius: 11px !important;
        padding: 0 13px !important;
        font-size: 12px !important;
        background: transparent !important;
        border: none !important;
        color: #64748b !important;
        gap: 8px !important;
        transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease !important;
    }

        .cliente-form-page .e-btn.cform-address-subtab:hover {
            color: #1f2937 !important;
            transform: none !important;
            background: transparent !important;
        }

        .cliente-form-page .e-btn.cform-address-subtab.active {
            background: #ffffff !important;
            color: #2563eb !important;
            box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08) !important;
        }

        .cliente-form-page .e-btn.cform-address-subtab span {
            font-size: 12px !important;
            font-weight: 900 !important;
            line-height: 1 !important;
        }

        .cliente-form-page .e-btn.cform-address-subtab small {
            font-size: 11px !important;
            font-weight: 700 !important;
            color: #94a3b8 !important;
            line-height: 1 !important;
        }

        .cliente-form-page .e-btn.cform-address-subtab.active small {
            color: #64748b !important;
        }

    /* Items de dirección en sidebar */
    .cliente-form-page .e-btn.cform-direccion-item {
        width: 100% !important;
        text-align: left !important;
        justify-content: flex-start !important;
        padding: 10px 11px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        color: #1f2937 !important;
        height: auto !important;
        transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease !important;
    }

        .cliente-form-page .e-btn.cform-direccion-item:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: translateX(2px) !important;
        }

        .cliente-form-page .e-btn.cform-direccion-item.active {
            background: #eff6ff !important;
            border-color: #93c5fd !important;
            box-shadow: inset 3px 0 0 #2563eb, 0 8px 18px rgba(37, 99, 235, 0.08) !important;
        }

    /* Tags */
    .cliente-form-page .e-btn.cform-tag {
        min-height: 30px !important;
        height: auto !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        color: #374151 !important;
        transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
    }

        .cliente-form-page .e-btn.cform-tag:hover {
            background: #f8fafc !important;
            transform: none !important;
        }

        .cliente-form-page .e-btn.cform-tag.active {
            background: #eff6ff !important;
            border-color: #bfdbfe !important;
            color: #1d4ed8 !important;
        }

/* Responsive */
@media (max-width: 768px) {
    .cliente-form-header-actions .e-btn.cform-action-btn,
    .cliente-form-header-actions .e-btn.cform-primary-btn {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 640px) {
    .cliente-form-header-actions .e-btn.cform-action-btn,
    .cliente-form-header-actions .e-btn.cform-primary-btn {
        width: 100% !important;
    }
}

/* ===================== FichaCliente ===================== */

.cliente-ficha-page .e-btn,
.cliente-ficha-page .e-btn.e-lib {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    padding: 0 !important;
    min-width: auto !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: normal !important;
    border-radius: 0 !important;
    height: auto !important;
    line-height: normal !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

    .cliente-ficha-page .e-btn:hover,
    .cliente-ficha-page .e-btn:focus,
    .cliente-ficha-page .e-btn:active {
        background: transparent !important;
        border: none !important;
        color: inherit !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .cliente-ficha-page .e-btn::before,
    .cliente-ficha-page .e-btn::after {
        display: none !important;
    }

    .cliente-ficha-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .cliente-ficha-page .e-btn .e-ripple-element {
        display: none !important;
    }

    /* Editar */
    .cliente-ficha-page .e-btn.cf-action-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #374151 !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
    }

        .cliente-ficha-page .e-btn.cf-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

    /* Nuevo documento */
    .cliente-ficha-page .e-btn.cf-primary-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        border: none !important;
        background: #2563eb !important;
        color: #ffffff !important;
        transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .cliente-ficha-page .e-btn.cf-primary-btn:hover {
            background: #1d4ed8 !important;
            transform: none !important;
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
        }

    /* Pestañas */
    .cliente-ficha-page .e-btn.cliente-ficha-tab {
        height: 32px !important;
        border-radius: 10px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        background: transparent !important;
        border: none !important;
        color: #64748b !important;
        flex: 0 0 auto !important;
        transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease !important;
    }

        .cliente-ficha-page .e-btn.cliente-ficha-tab:hover {
            color: #1f2937 !important;
            transform: none !important;
            background: transparent !important;
        }

        .cliente-ficha-page .e-btn.cliente-ficha-tab.active {
            background: #ffffff !important;
            color: #2563eb !important;
            box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08) !important;
        }

/* Responsive */
@media (max-width: 768px) {
    .cliente-ficha-header-actions .e-btn.cf-action-btn,
    .cliente-ficha-header-actions .e-btn.cf-primary-btn {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 640px) {
    .cliente-ficha-header-actions .e-btn.cf-action-btn,
    .cliente-ficha-header-actions .e-btn.cf-primary-btn {
        width: 100% !important;
    }
}

/* ===================== TopClientesFacturacion ===================== */

.top-clientes-page .e-btn,
.top-clientes-page .e-btn.e-lib {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    padding: 0 !important;
    min-width: auto !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: normal !important;
    border-radius: 0 !important;
    height: auto !important;
    line-height: normal !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

    .top-clientes-page .e-btn:hover,
    .top-clientes-page .e-btn:focus,
    .top-clientes-page .e-btn:active {
        background: transparent !important;
        border: none !important;
        color: inherit !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .top-clientes-page .e-btn::before,
    .top-clientes-page .e-btn::after {
        display: none !important;
    }

    .top-clientes-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .top-clientes-page .e-btn .e-ripple-element {
        display: none !important;
    }

    /* Limpiar filtros */
    .top-clientes-page .e-btn.top-action-btn {
        height: 42px !important;
        border-radius: 10px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #374151 !important;
        transition: background 0.15s ease, border-color 0.15s ease !important;
    }

        .top-clientes-page .e-btn.top-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
        }

    /* Filtrar */
    .top-clientes-page .e-btn.top-primary-btn {
        height: 42px !important;
        border-radius: 10px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border: none !important;
        background: #2563eb !important;
        color: #ffffff !important;
        transition: background 0.15s ease !important;
    }

        .top-clientes-page .e-btn.top-primary-btn:hover {
            background: #1d4ed8 !important;
        }

@media (max-width: 768px) {
    .top-clientes-page .e-btn.top-action-btn,
    .top-clientes-page .e-btn.top-primary-btn {
        width: 100% !important;
    }
}

/* ===================== Facturacion ===================== */

.facturacion-page .e-btn,
.facturacion-page .e-btn.e-lib {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    padding: 0 !important;
    min-width: auto !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: normal !important;
    border-radius: 0 !important;
    height: auto !important;
    line-height: normal !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

    .facturacion-page .e-btn:hover,
    .facturacion-page .e-btn:focus,
    .facturacion-page .e-btn:active {
        background: transparent !important;
        border: none !important;
        color: inherit !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .facturacion-page .e-btn::before,
    .facturacion-page .e-btn::after {
        display: none !important;
    }

    .facturacion-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .facturacion-page .e-btn .e-ripple-element {
        display: none !important;
    }

    /* Limpiar filtros / Facturas electrónicas */
    .facturacion-page .e-btn.fc-action-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #374151 !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
    }

        .facturacion-page .e-btn.fc-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

    /* Nueva factura */
    .facturacion-page .e-btn.fc-primary-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        border: none !important;
        background: #2563eb !important;
        color: #ffffff !important;
        transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .facturacion-page .e-btn.fc-primary-btn:hover {
            background: #1d4ed8 !important;
            transform: none !important;
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
        }

/* Responsive */
@media (max-width: 768px) {
    .facturacion-header-actions .e-btn.fc-action-btn,
    .facturacion-header-actions .e-btn.fc-primary-btn {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 640px) {
    .facturacion-header-actions .e-btn.fc-action-btn,
    .facturacion-header-actions .e-btn.fc-primary-btn {
        width: 100% !important;
    }
}

/* ===================== FacturaDetalle ===================== */

.factura-detalle-page .e-btn,
.factura-detalle-page .e-btn.e-lib {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    padding: 0 !important;
    min-width: auto !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: normal !important;
    border-radius: 0 !important;
    height: auto !important;
    line-height: normal !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

    .factura-detalle-page .e-btn:hover,
    .factura-detalle-page .e-btn:focus,
    .factura-detalle-page .e-btn:active {
        background: transparent !important;
        border: none !important;
        color: inherit !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .factura-detalle-page .e-btn::before,
    .factura-detalle-page .e-btn::after {
        display: none !important;
    }

    .factura-detalle-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .factura-detalle-page .e-btn .e-ripple-element {
        display: none !important;
    }

    /* Volver / Editar / Imprimir */
    .factura-detalle-page .e-btn.fd-action-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #374151 !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
    }

        .factura-detalle-page .e-btn.fd-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

    /* Marcar como cobrada */
    .factura-detalle-page .e-btn.fd-primary-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        border: none !important;
        background: #2563eb !important;
        color: #ffffff !important;
        transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .factura-detalle-page .e-btn.fd-primary-btn:hover {
            background: #1d4ed8 !important;
            transform: none !important;
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
        }

    /* Pestañas principales */
    .factura-detalle-page .e-btn.fd-tab {
        height: 34px !important;
        border-radius: 10px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #475569 !important;
        transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
    }

        .factura-detalle-page .e-btn.fd-tab:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

        .factura-detalle-page .e-btn.fd-tab.active {
            background: #eff6ff !important;
            border-color: #bfdbfe !important;
            color: #1d4ed8 !important;
        }

    /* Subpestañas */
    .factura-detalle-page .e-btn.fd-subtab {
        height: 34px !important;
        border-radius: 10px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #475569 !important;
        transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
    }

        .factura-detalle-page .e-btn.fd-subtab:hover {
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

        .factura-detalle-page .e-btn.fd-subtab.active {
            background: #2563eb !important;
            border-color: #2563eb !important;
            color: #ffffff !important;
        }

/* Responsive */
@media (max-width: 768px) {
    .factura-detalle-header-actions .e-btn.fd-action-btn,
    .factura-detalle-header-actions .e-btn.fd-primary-btn {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 640px) {
    .factura-detalle-header-actions .e-btn.fd-action-btn,
    .factura-detalle-header-actions .e-btn.fd-primary-btn {
        width: 100% !important;
    }
}

/* ===================== FacturaeElectronica ===================== */

.facturae-page .e-btn,
.facturae-page .e-btn.e-lib {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    padding: 0 !important;
    min-width: auto !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: normal !important;
    border-radius: 0 !important;
    height: auto !important;
    line-height: normal !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

    .facturae-page .e-btn:hover,
    .facturae-page .e-btn:focus,
    .facturae-page .e-btn:active {
        background: transparent !important;
        border: none !important;
        color: inherit !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .facturae-page .e-btn::before,
    .facturae-page .e-btn::after {
        display: none !important;
    }

    .facturae-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .facturae-page .e-btn .e-ripple-element {
        display: none !important;
    }

    /* Volver / Limpiar */
    .facturae-page .e-btn.fe-action-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #374151 !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
    }

        .facturae-page .e-btn.fe-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

    /* Emitir */
    .facturae-page .e-btn.fe-primary-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        border: none !important;
        background: #2563eb !important;
        color: #ffffff !important;
        transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .facturae-page .e-btn.fe-primary-btn:hover {
            background: #1d4ed8 !important;
            transform: none !important;
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
        }

    /* Pestañas del panel derecho */
    .facturae-page .e-btn.fe-tab {
        height: 34px !important;
        border-radius: 10px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #475569 !important;
        transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
    }

        .facturae-page .e-btn.fe-tab:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

        .facturae-page .e-btn.fe-tab.active {
            background: #eff6ff !important;
            border-color: #bfdbfe !important;
            color: #1d4ed8 !important;
        }

/* Responsive */
@media (max-width: 768px) {
    .facturae-header-actions .e-btn.fe-action-btn,
    .facturae-header-actions .e-btn.fe-primary-btn {
        width: 100% !important;
    }

    .fe-tabs .e-btn.fe-tab {
        flex: 1 1 auto !important;
        padding: 0 10px !important;
    }
}

/* ===================================================================
   FACTURA FORM PAGE
   =================================================================== */

.factura-form-page .e-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    outline: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-family: inherit !important;
}

    .factura-form-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .factura-form-page .e-btn .e-ripple-element {
        display: none !important;
    }

    .factura-form-page .e-btn.ff-action-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        height: 36px !important;
        padding: 0 16px !important;
        border: 1.5px solid #d1d5db !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        color: #374151 !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
    }

        .factura-form-page .e-btn.ff-action-btn:hover {
            background: #f9fafb !important;
            border-color: #9ca3af !important;
            box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
        }

    .factura-form-page .e-btn.ff-primary-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        height: 36px !important;
        padding: 0 20px !important;
        border: none !important;
        border-radius: 8px !important;
        background: #2563eb !important;
        color: #ffffff !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.15s ease, box-shadow 0.15s ease !important;
    }

        .factura-form-page .e-btn.ff-primary-btn:hover {
            background: #1d4ed8 !important;
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
        }

    .factura-form-page .e-btn.ff-tab {
        display: inline-flex !important;
        align-items: center !important;
        height: 36px !important;
        padding: 0 16px !important;
        border: 1px solid transparent !important;
        border-radius: 6px !important;
        background: transparent !important;
        color: #6b7280 !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.15s ease, color 0.15s ease !important;
    }

        .factura-form-page .e-btn.ff-tab:hover {
            background: #f3f4f6 !important;
            color: #374151 !important;
        }

        .factura-form-page .e-btn.ff-tab.active {
            background: #eff6ff !important;
            color: #2563eb !important;
            border-color: #bfdbfe !important;
            font-weight: 600 !important;
        }

    .factura-form-page .e-btn.ff-subtab {
        display: inline-flex !important;
        align-items: center !important;
        height: 30px !important;
        padding: 0 12px !important;
        border: 1px solid transparent !important;
        border-radius: 6px !important;
        background: transparent !important;
        color: #9ca3af !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.15s ease, color 0.15s ease !important;
    }

        .factura-form-page .e-btn.ff-subtab:hover {
            background: #f9fafb !important;
            color: #6b7280 !important;
        }

        .factura-form-page .e-btn.ff-subtab.active {
            background: #f0f9ff !important;
            color: #0369a1 !important;
            border-color: #bae6fd !important;
            font-weight: 600 !important;
        }

    .factura-form-page .e-btn.ff-grid-delete-btn {
        display: inline-flex !important;
        align-items: center !important;
        height: 28px !important;
        padding: 0 10px !important;
        border: 1.5px solid #fca5a5 !important;
        border-radius: 6px !important;
        background: #fff5f5 !important;
        color: #dc2626 !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.15s ease, border-color 0.15s ease !important;
    }

        .factura-form-page .e-btn.ff-grid-delete-btn:hover {
            background: #fee2e2 !important;
            border-color: #f87171 !important;
        }

@media (max-width: 768px) {
    .factura-form-header-actions .e-btn.ff-action-btn,
    .factura-form-header-actions .e-btn.ff-primary-btn {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 640px) {
    .factura-form-header-actions .e-btn.ff-action-btn,
    .factura-form-header-actions .e-btn.ff-primary-btn {
        width: 100% !important;
    }
}

/* ===================================================================
   FACTURAS PENDIENTES PAGE
   =================================================================== */

.facturas-pendientes-page .e-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 11px !important;
    outline: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-family: inherit !important;
}

    .facturas-pendientes-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .facturas-pendientes-page .e-btn .e-ripple-element {
        display: none !important;
    }

    .facturas-pendientes-page .e-btn.fp-action-btn {
        display: inline-flex !important;
        align-items: center !important;
        height: 38px !important;
        padding: 0 14px !important;
        border: 1px solid #dbe2ea !important;
        border-radius: 11px !important;
        background: #ffffff !important;
        color: #374151 !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
    }

        .facturas-pendientes-page .e-btn.fp-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

@media (max-width: 768px) {
    .facturas-pendientes-header-actions .e-btn.fp-action-btn {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .cobro-detalle-header-actions .e-btn.cd-action-btn,
    .cobro-detalle-header-actions .e-btn.cd-primary-btn {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 640px) {
    .cobro-detalle-header-actions .e-btn.cd-action-btn,
    .cobro-detalle-header-actions .e-btn.cd-primary-btn {
        width: 100% !important;
    }
}

/* ===================================================================
   COBRO DETALLE PAGE
   =================================================================== */

.cobro-detalle-page .e-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 11px !important;
    outline: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-family: inherit !important;
}

    .cobro-detalle-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .cobro-detalle-page .e-btn .e-ripple-element {
        display: none !important;
    }

    .cobro-detalle-page .e-btn.cd-action-btn {
        display: inline-flex !important;
        align-items: center !important;
        height: 38px !important;
        padding: 0 14px !important;
        border: 1px solid #dbe2ea !important;
        border-radius: 11px !important;
        background: #ffffff !important;
        color: #374151 !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
    }

        .cobro-detalle-page .e-btn.cd-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

    .cobro-detalle-page .e-btn.cd-primary-btn {
        display: inline-flex !important;
        align-items: center !important;
        height: 38px !important;
        padding: 0 14px !important;
        border: none !important;
        border-radius: 11px !important;
        background: #2563eb !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .cobro-detalle-page .e-btn.cd-primary-btn:hover {
            background: #1d4ed8 !important;
            transform: none !important;
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
        }

    .cobro-detalle-page .e-btn.cd-tab {
        display: inline-flex !important;
        align-items: center !important;
        height: 34px !important;
        padding: 0 14px !important;
        border: 1px solid #dbe2ea !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        color: #475569 !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
    }

        .cobro-detalle-page .e-btn.cd-tab:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

        .cobro-detalle-page .e-btn.cd-tab.active {
            background: #eff6ff !important;
            border-color: #bfdbfe !important;
            color: #1d4ed8 !important;
        }

    .cobro-detalle-page .e-btn.cd-subtab {
        display: inline-flex !important;
        align-items: center !important;
        height: 32px !important;
        padding: 0 12px !important;
        border: 1px solid #dbe2ea !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        color: #475569 !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
    }

        .cobro-detalle-page .e-btn.cd-subtab:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

        .cobro-detalle-page .e-btn.cd-subtab.active {
            background: #eff6ff !important;
            border-color: #bfdbfe !important;
            color: #1d4ed8 !important;
        }

@media (max-width: 768px) {
    .cobro-detalle-header-actions .e-btn.cd-action-btn,
    .cobro-detalle-header-actions .e-btn.cd-primary-btn {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 640px) {
    .cobro-detalle-header-actions .e-btn.cd-action-btn,
    .cobro-detalle-header-actions .e-btn.cd-primary-btn {
        width: 100% !important;
    }
}

/* ===================================================================
   COBRO FORM PAGE
   =================================================================== */

.cobro-form-page .e-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 11px !important;
    outline: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-family: inherit !important;
}

    .cobro-form-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .cobro-form-page .e-btn .e-ripple-element {
        display: none !important;
    }

    .cobro-form-page .e-btn.cfb-action-btn {
        display: inline-flex !important;
        align-items: center !important;
        height: 38px !important;
        padding: 0 14px !important;
        border: 1px solid #dbe2ea !important;
        border-radius: 11px !important;
        background: #ffffff !important;
        color: #374151 !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
    }

        .cobro-form-page .e-btn.cfb-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

    .cobro-form-page .e-btn.cfb-primary-btn {
        display: inline-flex !important;
        align-items: center !important;
        height: 38px !important;
        padding: 0 14px !important;
        border: none !important;
        border-radius: 11px !important;
        background: #2563eb !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .cobro-form-page .e-btn.cfb-primary-btn:hover {
            background: #1d4ed8 !important;
            transform: none !important;
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
        }

    .cobro-form-page .e-btn.cfb-tab {
        display: inline-flex !important;
        align-items: center !important;
        height: 34px !important;
        padding: 0 14px !important;
        border: 1px solid #dbe2ea !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        color: #475569 !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
    }

        .cobro-form-page .e-btn.cfb-tab:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

        .cobro-form-page .e-btn.cfb-tab.active {
            background: #eff6ff !important;
            border-color: #bfdbfe !important;
            color: #1d4ed8 !important;
        }

    .cobro-form-page .e-btn.cfb-subtab {
        display: inline-flex !important;
        align-items: center !important;
        height: 32px !important;
        padding: 0 12px !important;
        border: 1px solid #dbe2ea !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        color: #475569 !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
    }

        .cobro-form-page .e-btn.cfb-subtab:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

        .cobro-form-page .e-btn.cfb-subtab.active {
            background: #eff6ff !important;
            border-color: #bfdbfe !important;
            color: #1d4ed8 !important;
        }

    .cobro-form-page .e-btn.cfb-grid-delete-btn {
        display: inline-flex !important;
        align-items: center !important;
        height: 32px !important;
        padding: 0 10px !important;
        border: 1px solid #fecaca !important;
        border-radius: 9px !important;
        background: #fff5f5 !important;
        color: #b91c1c !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
    }

        .cobro-form-page .e-btn.cfb-grid-delete-btn:hover {
            background: #fee2e2 !important;
            border-color: #fca5a5 !important;
            transform: none !important;
        }

@media (max-width: 768px) {
    .cobro-form-header-actions .e-btn.cfb-action-btn,
    .cobro-form-header-actions .e-btn.cfb-primary-btn {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 640px) {
    .cobro-form-header-actions .e-btn.cfb-action-btn,
    .cobro-form-header-actions .e-btn.cfb-primary-btn {
        width: 100% !important;
    }
}

/* ===================================================================
   COBROS PAGE
   =================================================================== */

.cobros-page .e-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 11px !important;
    outline: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-family: inherit !important;
}

    .cobros-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .cobros-page .e-btn .e-ripple-element {
        display: none !important;
    }

    .cobros-page .e-btn.cb-action-btn {
        display: inline-flex !important;
        align-items: center !important;
        height: 38px !important;
        padding: 0 14px !important;
        border: 1px solid #dbe2ea !important;
        border-radius: 11px !important;
        background: #ffffff !important;
        color: #374151 !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
    }

        .cobros-page .e-btn.cb-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

    .cobros-page .e-btn.cb-primary-btn {
        display: inline-flex !important;
        align-items: center !important;
        height: 38px !important;
        padding: 0 14px !important;
        border: none !important;
        border-radius: 11px !important;
        background: #2563eb !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .cobros-page .e-btn.cb-primary-btn:hover {
            background: #1d4ed8 !important;
            transform: none !important;
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
        }

@media (max-width: 768px) {
    .cobros-header-actions .e-btn.cb-action-btn,
    .cobros-header-actions .e-btn.cb-primary-btn {
        width: 100% !important;
    }
}

/* ===================================================================
   CABECERAS DE GESTIÓN DE PAGOS Y COBROS — mismo patrón que Artículos.
   Global (no scoped) a propósito: la raíz del <CommandBar> es markup de
   otro componente y las reglas scoped de la página no la alcanzan. El
   selector de 3 clases sobre `-header-actions` gana a la regla base del
   componente, garantizando que el host NO crece y ancla el «···».
   =================================================================== */

.pagos-page .pagos-header,
.cobros-page .cobros-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

/* Bloque de título (fase 1): se mantiene a su ancho natural y NO cede; el CommandBar se repliega
   primero. Solo cede cuando el CommandBar ya está totalmente replegado (fase 2, host-collapsed). */
.pagos-page .pagos-header > .pagos-title-block,
.cobros-page .cobros-header > .cobros-title-block {
    flex: 0 0 auto;
    min-width: 0;
}

.pagos-page .pagos-header.command-bar-host-collapsed > .pagos-title-block,
.cobros-page .cobros-header.command-bar-host-collapsed > .cobros-title-block {
    flex: 1 1 auto;
}

.pagos-page .pagos-title-block h1,
.cobros-page .cobros-title-block h1 {
    margin: 0;
    /* Escala con el viewport: mínimo 18px, fluido (1vw + 12px), tope 22px. */
    font-size: clamp(18px, 1vw + 12px, 22px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    /* Una línea; si no cupiera se recorta con puntos suspensivos hasta la fase 2. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pagos-page .pagos-subtitle,
.cobros-page .cobros-subtitle {
    margin-top: 4px;
    /* Escala con el viewport, en línea con el título: mínimo 12px, fluido, tope 15px. Igual que
       Artículos: el subtítulo envuelve (no se recorta con puntos suspensivos). */
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.35;
    max-width: clamp(440px, 52vw, 760px);
    min-width: min(100%, 360px);
}

/* Fase 2 (el CommandBar ya está replegado a «···»): el título cede el ancho y envuelve. */
.pagos-page .pagos-header.command-bar-host-collapsed .pagos-title-block h1,
.cobros-page .cobros-header.command-bar-host-collapsed .cobros-title-block h1 {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: ancho natural, alineado a la derecha (nunca crece). */
.pagos-page .pagos-header .pg-header-actions,
.cobros-page .cobros-header .cobros-header-actions {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

/* ???????????????????????????????????????????????
   REMESAS BANCARIAS — SfButton overrides
   ??????????????????????????????????????????????? */

.remesas-page .e-btn,
.remesas-tabs .e-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: none !important;
}

    .remesas-page .e-btn .e-btn-content,
    .remesas-tabs .e-btn .e-btn-content {
        display: contents !important;
    }

    .remesas-page .e-btn .e-ripple-element,
    .remesas-tabs .e-btn .e-ripple-element {
        display: none !important;
    }

.e-btn.rb-action-btn,
.e-btn.rb-primary-btn {
    height: 38px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
}

.e-btn.rb-primary-btn {
    border: none !important;
    background: #2563eb !important;
    color: #ffffff !important;
}

    .e-btn.rb-primary-btn:hover {
        background: #1d4ed8 !important;
        transform: none !important;
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
    }

.e-btn.rb-action-btn {
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
}

    .e-btn.rb-action-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        transform: none !important;
    }

.e-btn.remesas-tab {
    height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid #dbe2ea !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
}

    .e-btn.remesas-tab:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        transform: none !important;
    }

    .e-btn.remesas-tab.active {
        background: #eff6ff !important;
        border-color: #bfdbfe !important;
        color: #1d4ed8 !important;
    }

@media (max-width: 768px) {
    .remesas-header-actions .e-btn.rb-action-btn,
    .remesas-header-actions .e-btn.rb-primary-btn,
    .rb-header-actions .e-btn.rb-action-btn,
    .rb-header-actions .e-btn.rb-primary-btn {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 640px) {
    .remesas-header-actions .e-btn.rb-action-btn,
    .remesas-header-actions .e-btn.rb-primary-btn,
    .rb-header-actions .e-btn.rb-action-btn,
    .rb-header-actions .e-btn.rb-primary-btn {
        width: 100% !important;
    }
}

.vales-page,
.vales-page *,
.vales-page *::before,
.vales-page *::after {
    box-sizing: border-box;
}

.vales-page {
    height: calc(100dvh - 150px);
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
    animation: valesPageIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* CABECERA */

.vales-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.vales-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.35;
}

/* PANEL GENERAL */

.card-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

/* KPIS */

.vales-summary-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.vl-kpi-card {
    min-width: 0;
    height: 76px;
    border: 1px solid #e3eaf3;
    border-radius: 16px;
    background: #ffffff;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    animation: valesCardIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .vl-kpi-card:nth-child(1) {
        animation-delay: 0.03s;
    }

    .vl-kpi-card:nth-child(2) {
        animation-delay: 0.06s;
    }

    .vl-kpi-card:nth-child(3) {
        animation-delay: 0.09s;
    }

    .vl-kpi-card:nth-child(4) {
        animation-delay: 0.12s;
    }

    .vl-kpi-card:hover {
        transform: translateY(-2px);
        border-color: #bfdbfe;
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.10);
    }

.vl-kpi-head {
    width: 104px;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.01em;
    flex: 0 0 auto;
}

.vl-kpi-title {
    display: block;
    min-width: 0;
}

.vl-kpi-card-blue .vl-kpi-head {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.vl-kpi-card-green .vl-kpi-head {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.vl-kpi-card-orange .vl-kpi-head {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.vl-kpi-card-purple .vl-kpi-head {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.vl-kpi-body {
    min-width: 0;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vl-kpi-value {
    font-size: 21px;
    line-height: 1;
    font-weight: 900;
    color: #111827;
    letter-spacing: -0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vl-kpi-foot {
    font-size: 11px;
    color: #8b95a7;
    line-height: 1.2;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* LISTADO */

.vales-list-panel {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 9px;
    overflow: hidden;
}

.vales-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

    .vales-list-header > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
    }

.section-title {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

.no-margin {
    margin: 0;
}

.vales-list-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

.vales-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* FILTROS */

.vales-filters {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 180px 180px;
    gap: 10px;
    align-items: center;
}

.vl-filter-item,
.vl-filter-item-search {
    min-width: 0;
}

.vl-filter-input,
.vl-filter-select {
    width: 100%;
    height: 38px;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vl-filter-input {
    padding: 0 13px;
}

.vl-filter-select {
    padding: 0 12px;
    cursor: pointer;
}

.vl-filter-input::placeholder {
    color: #9ca3af;
}

.vl-filter-input:focus,
.vl-filter-select:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* BOTONES */

.vl-primary-btn,
.vl-action-btn {
    height: 38px;
    border-radius: 11px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
}

.vl-primary-btn {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .vl-primary-btn:hover {
        background: #1d4ed8;
        transform: none;
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
    }

.vl-action-btn {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .vl-action-btn:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: none;
    }

/* RESULTADOS */

.vl-results-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 20px;
}

.vl-results-text {
    font-size: 12px;
    color: #64748b;
    font-weight: 750;
    white-space: nowrap;
}

/* GRID */

.vl-grid-wrapper {
    min-height: 0;
    height: 100%;
    width: 100%;
    min-width: 0;
    border-top: 1px solid #eef2f7;
    padding-top: 8px;
}

.vl-grid.e-grid {
    height: 100%;
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: none;
}

.vl-grid .e-gridheader {
    border-bottom: 1px solid #eef2f7;
}

.vl-grid .e-headercell {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 850;
    border-color: #eef2f7;
}

.vl-grid .e-headertext {
    font-size: 12px;
    font-weight: 850;
}

.vl-grid .e-rowcell {
    color: #1f2937;
    font-size: 12px;
    border-color: #eef2f7;
    padding-top: 8px;
    padding-bottom: 8px;
}

.vl-grid .e-gridcontent,
.vl-grid .e-table {
    cursor: pointer;
}

.vl-grid .e-row:hover .e-rowcell {
    background: #f8fbff;
}

.vl-grid .e-altrow .e-rowcell {
    background: #fcfdff;
}

.vl-grid .e-pager {
    border-top: 1px solid #eef2f7;
    background: #ffffff;
    min-height: 42px;
}

.vl-grid .e-content {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .vl-grid .e-content::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .vl-grid .e-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .vl-grid .e-content::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .vl-grid .e-content::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

/* ESTADOS */

.vl-estado-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.vl-estado-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.vl-estado-orange {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.vl-estado-blue {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.vl-estado-red {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* ANIMACIONES */

@keyframes valesPageIn {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

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

@keyframes valesCardIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

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

/* RESPONSIVE */

@media (max-width: 1280px) {
    .vales-page {
        height: calc(100dvh - 96px);
    }

    .vales-summary-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vales-filters {
        grid-template-columns: minmax(220px, 1fr) 160px 160px;
    }
}

@media (max-width: 980px) {
    .vales-page {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .vales-list-panel {
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .vales-list-header {
        flex-direction: column;
        align-items: stretch;
    }

    .vales-header-actions {
        justify-content: flex-end;
    }

    .vales-filters {
        grid-template-columns: 1fr 1fr;
    }

    .vl-filter-item-search {
        grid-column: 1 / -1;
    }

    .vl-grid-wrapper {
        height: auto;
        min-height: 440px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .vl-grid.e-grid {
        min-width: 1040px;
    }
}

@media (max-width: 768px) {
    .vales-summary-panel {
        grid-template-columns: 1fr;
    }

    .vales-filters {
        grid-template-columns: 1fr;
    }

    .vales-header-actions {
        width: 100%;
    }

        .vales-header-actions .vl-action-btn {
            width: 100%;
        }

    .vl-grid-wrapper {
        min-height: 420px;
    }
}

@media (max-width: 640px) {
    .vales-title {
        font-size: 20px;
    }

    .vales-subtitle {
        font-size: 12px;
    }

    .card-panel {
        padding: 12px;
    }

    .vl-kpi-card {
        height: 74px;
    }

    .vl-kpi-head {
        width: 96px;
        font-size: 11px;
        padding: 0 10px;
    }

    .vl-kpi-value {
        font-size: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vales-page,
    .vales-page *,
    .vales-page *::before,
    .vales-page *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ???????????????????????????????????????????????
   VALE DETALLE — SfButton overrides
   ??????????????????????????????????????????????? */

.vale-detalle-page .e-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: none !important;
}

    .vale-detalle-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .vale-detalle-page .e-btn .e-ripple-element {
        display: none !important;
    }

.e-btn.vld-action-btn {
    height: 38px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
}

    .e-btn.vld-action-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        transform: none !important;
    }

.e-btn.vld-tab {
    height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid #dbe2ea !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
}

    .e-btn.vld-tab:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        transform: none !important;
    }

    .e-btn.vld-tab.active {
        background: #eff6ff !important;
        border-color: #bfdbfe !important;
        color: #1d4ed8 !important;
    }

@media (max-width: 768px) {
    .vale-detalle-actions .e-btn.vld-action-btn {
        width: 100% !important;
    }
}

/* ???????????????????????????????????????????????
   TALLAS Y COLORES — SfButton overrides
   ??????????????????????????????????????????????? */

.tc-page .e-btn,
.tc-tabs .e-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: none !important;
}

    .tc-page .e-btn .e-btn-content,
    .tc-tabs .e-btn .e-btn-content {
        display: contents !important;
    }

    .tc-page .e-btn .e-ripple-element,
    .tc-tabs .e-btn .e-ripple-element {
        display: none !important;
    }

.e-btn.tc-action-btn,
.e-btn.tc-primary-btn {
    height: 38px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
}

.e-btn.tc-primary-btn {
    border: none !important;
    background: #2563eb !important;
    color: #ffffff !important;
}

    .e-btn.tc-primary-btn:hover {
        background: #1d4ed8 !important;
        transform: none !important;
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
    }

    .e-btn.tc-primary-btn.small {
        height: 34px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
    }

.e-btn.tc-action-btn {
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
}

    .e-btn.tc-action-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        transform: none !important;
    }

.e-btn.tc-tab {
    height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid #dbe2ea !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
}

    .e-btn.tc-tab:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        transform: none !important;
    }

    .e-btn.tc-tab.active {
        background: #eff6ff !important;
        border-color: #bfdbfe !important;
        color: #1d4ed8 !important;
    }

@media (max-width: 768px) {
    .tc-header-actions .e-btn.tc-action-btn,
    .tc-header-actions .e-btn.tc-primary-btn,
    .tc-panel-actions .e-btn.tc-action-btn,
    .tc-panel-actions .e-btn.tc-primary-btn {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 640px) {
    .tc-header-actions .e-btn.tc-action-btn,
    .tc-header-actions .e-btn.tc-primary-btn,
    .tc-panel-actions .e-btn.tc-action-btn,
    .tc-panel-actions .e-btn.tc-primary-btn {
        width: 100% !important;
    }
}

/* ???????????????????????????????????????????????
   ARTÍCULOS — SfButton overrides
   ??????????????????????????????????????????????? */

.articulos-page .e-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: none !important;
}

.e-btn.articulos-action-btn,
.e-btn.articulos-primary-btn {
    height: 38px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
}

.e-btn.articulos-primary-btn {
    border: none !important;
    background: #2563eb !important;
    color: #ffffff !important;
}

    .e-btn.articulos-primary-btn:hover {
        background: #1d4ed8 !important;
        transform: none !important;
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
    }

.e-btn.articulos-action-btn {
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
}

    .e-btn.articulos-action-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        transform: none !important;
    }

.propiedades-actions-inline .e-btn.articulos-action-btn,
.propiedades-actions-inline .e-btn.articulos-primary-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: auto !important;
}

.propiedades-actions-inline .e-btn .material-symbols-outlined {
    font-size: 18px !important;
    line-height: 1 !important;
}

.e-btn.articulo-tab-btn {
    flex: 0 0 auto !important;       /* no encoge: la barra desborda y se desplaza con las flechas */
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 6px !important;
    margin-bottom: -1px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: color 0.16s ease, border-color 0.16s ease !important;
}

    .e-btn.articulo-tab-btn:hover {
        color: #334155 !important;
    }

    .e-btn.articulo-tab-btn.active {
        color: #1d4ed8 !important;
        border-bottom-color: #2563eb !important;
        font-weight: 800 !important;
    }

.e-btn.familia-row,
.e-btn.articulo-row,
.e-btn.familia-articulo-row {
    width: 100% !important;
    min-width: 0 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    padding: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
}

    .e-btn.familia-row:hover,
    .e-btn.articulo-row:hover,
    .e-btn.familia-articulo-row:hover {
        background: #f8fbff !important;
        border-color: #bfdbfe !important;
        transform: none !important;
    }

    .e-btn.familia-row.selected,
    .e-btn.articulo-row.selected {
        background: #eff6ff !important;
        border-color: #bfdbfe !important;
        box-shadow: inset 0 0 0 1px #bfdbfe !important;
    }

.e-btn.familia-articulo-row {
    background: #f8fafc !important;
}

@media (max-width: 768px) {
    .articulos-header-actions .e-btn.articulos-action-btn,
    .articulos-header-actions .e-btn.articulos-primary-btn,
    .propiedades-actions-inline .e-btn.articulos-action-btn,
    .propiedades-actions-inline .e-btn.articulos-primary-btn {
        width: 100% !important;
    }
}

/* ???????????????????????????????????????????????
   TIENDA WEB CATÁLOGO — SfButton overrides
   ??????????????????????????????????????????????? */

.tienda-web-catalogo-grid .e-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: none !important;
}

    .tienda-web-catalogo-grid .e-btn .e-btn-content {
        display: contents !important;
    }

    .tienda-web-catalogo-grid .e-btn .e-ripple-element {
        display: none !important;
    }

.e-btn.tw-subtab-btn {
    height: 34px !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    border: 1px solid #dbe3ec !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.16s ease !important;
}

    .e-btn.tw-subtab-btn:hover {
        background: #f8fafc !important;
        border-color: #cfd8e3 !important;
    }

    .e-btn.tw-subtab-btn.active {
        background: #eff6ff !important;
        border-color: #bfdbfe !important;
        color: #1d4ed8 !important;
    }

.e-btn.tw-image-action-btn {
    height: 30px !important;
    border-radius: 10px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border: 1px solid #dbe3ec !important;
    background: #ffffff !important;
    color: #334155 !important;
    cursor: pointer !important;
    transition: all 0.16s ease !important;
}

    .e-btn.tw-image-action-btn:hover {
        background: #f8fafc !important;
        border-color: #cfd8e3 !important;
    }

    .e-btn.tw-image-action-btn.danger {
        color: #b45309 !important;
    }

        .e-btn.tw-image-action-btn.danger:hover {
            background: #fffaf5 !important;
            border-color: #f3d7b8 !important;
        }

.e-btn.tw-image-box {
    position: relative !important;
    min-height: 130px !important;
    width: 100% !important;
    border: 1px dashed #cfd8e3 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    padding: 10px !important;
    font-size: 12px !important;
    color: #526172 !important;
    cursor: pointer !important;
    transition: all 0.16s ease !important;
}

    .e-btn.tw-image-box:hover {
        border-color: #bfd2ea !important;
        background: #fbfdff !important;
    }

    .e-btn.tw-image-box.selected {
        border-style: solid !important;
        border-color: #dbe7fb !important;
        background: #f8fbff !important;
    }

.e-btn.tw-footer-btn {
    height: 38px !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    border: 1px solid #dbe3ec !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.16s ease !important;
}

    .e-btn.tw-footer-btn:hover {
        background: #f8fafc !important;
        border-color: #cfd8e3 !important;
    }

.e-btn.tw-danger-btn {
    height: 40px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    border: 1px solid #fecaca !important;
    background: #fff7f7 !important;
    color: #b91c1c !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.16s ease !important;
}

    .e-btn.tw-danger-btn:hover {
        background: #fef2f2 !important;
        border-color: #fca5a5 !important;
    }

@media (max-width: 768px) {
    .e-btn.tw-footer-btn {
        flex: 1 1 100% !important;
    }

    .e-btn.tw-danger-btn {
        width: 100% !important;
    }
}

/* =====================================================
   TiendaWebClientesTab — SfButton overrides
   ===================================================== */

.tw-customers-page .e-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

    .tw-customers-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .tw-customers-page .e-btn .e-ripple-element {
        display: none !important;
    }

    .tw-customers-page .e-btn.tw-secondary-btn {
        height: 38px !important;
        border-radius: 12px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        border: 1px solid #dbe3ec !important;
        background: #ffffff !important;
        color: #334155 !important;
    }

    .tw-customers-page .e-btn.tw-primary-btn {
        height: 38px !important;
        border-radius: 12px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        border: none !important;
        background: #2563eb !important;
        color: #ffffff !important;
    }

        .tw-customers-page .e-btn.tw-primary-btn:hover {
            background: #1d4ed8 !important;
        }

    .tw-customers-page .e-btn.tw-secondary-btn:hover {
        background: #f8fafc !important;
    }

@media (max-width: 768px) {
    .tw-customers-page .e-btn.tw-secondary-btn,
    .tw-customers-page .e-btn.tw-primary-btn {
        width: 100% !important;
    }
}

/* =====================================================
   TiendaWebPage — SfButton overrides
   ===================================================== */

.tienda-web-page .e-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

/* =====================================================
   TiendaWebPedidosTab — SfButton overrides
   ===================================================== */

.tw-pedidos-page .e-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

    .tw-pedidos-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .tw-pedidos-page .e-btn .e-ripple-element {
        display: none !important;
    }

    .tw-pedidos-page .e-btn.tw-pedidos-btn {
        height: 38px !important;
        border-radius: 12px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        border: 1px solid #dbe3ec !important;
        background: #ffffff !important;
        color: #334155 !important;
        transition: all 0.16s ease !important;
    }

        .tw-pedidos-page .e-btn.tw-pedidos-btn:hover {
            background: #f8fafc !important;
        }

    .tw-pedidos-page .e-btn.tw-pedidos-primary-btn {
        height: 38px !important;
        border-radius: 12px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        border: none !important;
        background: #2563eb !important;
        color: #ffffff !important;
        transition: all 0.16s ease !important;
    }

        .tw-pedidos-page .e-btn.tw-pedidos-primary-btn:hover {
            background: #1d4ed8 !important;
        }

    .tw-pedidos-page .e-btn.tw-pedidos-danger-btn {
        height: 38px !important;
        border-radius: 12px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        border: 1px solid #fecaca !important;
        background: #fff7f7 !important;
        color: #b91c1c !important;
        transition: all 0.16s ease !important;
    }

    .tw-pedidos-page .e-btn.full {
        width: 100% !important;
    }

@media (max-width: 768px) {
    .tw-pedidos-page .e-btn.tw-pedidos-btn,
    .tw-pedidos-page .e-btn.tw-pedidos-primary-btn,
    .tw-pedidos-page .e-btn.tw-pedidos-danger-btn {
        width: 100% !important;
    }
}

/* =====================================================
   ArqueoCajaPage — SfButton overrides
   ===================================================== */

.arqueo-page .e-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

    .arqueo-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .arqueo-page .e-btn .e-ripple-element {
        display: none !important;
    }

    .arqueo-page .e-btn.ar-action-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #374151 !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .arqueo-page .e-btn.ar-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

        .arqueo-page .e-btn.ar-action-btn.compact {
            height: 32px !important;
            padding: 0 12px !important;
            font-size: 12px !important;
        }

    .arqueo-page .e-btn.ar-primary-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        border: none !important;
        background: #2563eb !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .arqueo-page .e-btn.ar-primary-btn:hover {
            background: #1d4ed8 !important;
            transform: none !important;
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
        }

        .arqueo-page .e-btn.ar-primary-btn.full {
            width: 100% !important;
            margin-top: 4px !important;
        }

@media (max-width: 768px) {
    .arqueo-header-actions .e-btn.ar-action-btn,
    .arqueo-header-actions .e-btn.ar-primary-btn {
        flex: 1 1 auto !important;
    }

    .arqueo-module-card .e-btn.ar-action-btn {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    .arqueo-header-actions .e-btn.ar-action-btn,
    .arqueo-header-actions .e-btn.ar-primary-btn {
        width: 100% !important;
    }
}

/* =====================================================
   MovimientosPage — SfButton overrides
   ===================================================== */

.movimientos-page .e-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

    .movimientos-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .movimientos-page .e-btn .e-ripple-element {
        display: none !important;
    }

    .movimientos-page .e-btn.mov-action-btn {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #374151 !important;
        white-space: nowrap !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .movimientos-page .e-btn.mov-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            transform: none !important;
        }

@media (max-width: 768px) {
    .movimientos-header-actions .e-btn.mov-action-btn {
        width: 100% !important;
    }
}

/* ?? InformesPage SfButton reset ?? */
.informes-page .e-btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

    .informes-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .informes-page .e-btn .e-ripple-element {
        display: none !important;
    }

/* Sidebar menu items */
.e-btn.inf-menu-item {
    width: 100% !important;
    padding: 11px 12px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

    .e-btn.inf-menu-item.active {
        background: #eff6ff !important;
        border-color: #bfdbfe !important;
        color: #1d4ed8 !important;
    }

/* Action bar buttons */
.e-btn.inf-primary-btn {
    height: 42px !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    justify-content: center !important;
}

.e-btn.inf-action-btn {
    height: 42px !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    justify-content: center !important;
}

/* GestionIvaPage */
.gestion-iva-page .e-btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.e-btn.giva-type-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    justify-content: flex-start !important;
}

/* PresentacionIvaPage */
.presentacion-iva-page .e-btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* AperturaEjercicioPage */
.apertura-page .e-btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.e-btn.ap-type-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* CierreContablePage */
.cierre-page .e-btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

    .cierre-page .e-btn.e-disabled, .cierre-page .e-btn[disabled] {
        opacity: 0.55 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }

/* Modelo347Page */
.modelo-page .e-btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* TpvConfiguracionPage */
.tpv-page .e-btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* EmpresaNuevaPage - tab buttons */
.company-tabs-card .e-btn {
    all: unset !important;
    display: flex !important;
    width: 100% !important;
    min-height: 58px !important;
    border: 1px solid transparent !important;
    border-radius: 15px !important;
    background: transparent !important;
    color: #334155 !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 0 12px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
}

    .company-tabs-card .e-btn:hover {
        background: #f8fafc !important;
        border-color: #eef2f7 !important;
        transform: translateX(2px) !important;
    }

    .company-tabs-card .e-btn.active {
        background: linear-gradient(135deg, #2d8cff 0%, #2563eb 55%, #1d4ed8 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18) !important;
    }

    .company-tabs-card .e-btn .e-btn-content {
        display: contents !important;
    }

    .company-tabs-card .e-btn .e-ripple-element {
        display: none !important;
    }

    .company-tabs-card .e-btn .material-symbols-outlined {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        border-radius: 11px !important;
        background: #eff6ff !important;
        color: #2563eb !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
    }

    .company-tabs-card .e-btn.active .material-symbols-outlined {
        background: rgba(255, 255, 255, 0.16) !important;
        color: #ffffff !important;
    }

@media (max-width: 1050px) {
    .company-tabs-card .e-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
}

@media (max-width: 760px) {
    .company-tabs-card .e-btn {
        min-height: 48px !important;
        justify-content: center !important;
        padding: 0 8px !important;
    }

        .company-tabs-card .e-btn .e-btn-content > span:last-child {
            display: none !important;
        }
}

/* EmpresaGestionPage - list item buttons */
.companies-list .e-btn {
    all: unset !important;
    display: flex !important;
    width: 100% !important;
    min-height: 84px !important;
    border: 1px solid transparent !important;
    border-radius: 17px !important;
    background: #ffffff !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    text-align: left !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease !important;
}

    .companies-list .e-btn .e-btn-content {
        display: contents !important;
    }

    .companies-list .e-btn .e-ripple-element {
        display: none !important;
    }

    .companies-list .e-btn:hover {
        background: #f8fafc !important;
        border-color: #e5eefb !important;
        transform: translateX(2px) !important;
    }

    .companies-list .e-btn.selected {
        background: #eff6ff !important;
        border-color: #93c5fd !important;
        box-shadow: inset 3px 0 0 #2563eb !important;
    }

/* ?? SeriesDocumentosPage ?? */
.series-doc-page .e-btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.e-btn.sd-serie-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ?? ImportacionDatosPage ?? */
.import-page .e-btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* ?? Botones Syncfusion dentro de Configuración ?? */

.configuracion-page .e-btn {
    box-shadow: none !important;
    min-width: 0 !important;
    font-family: inherit !important;
}

    .configuracion-page .e-btn .e-btn-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

/* Tabs */
.configuracion-page .configuracion-tab-btn.e-btn {
    height: 36px !important;
    padding: 0 13px !important;
    border-radius: 11px !important;
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

    .configuracion-page .configuracion-tab-btn.e-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

    .configuracion-page .configuracion-tab-btn.e-btn.active {
        background: #eff6ff !important;
        border-color: #93c5fd !important;
        color: #1d4ed8 !important;
    }

/* Botones inferiores */
.configuracion-page .configuracion-primary-btn.e-btn,
.configuracion-page .configuracion-action-btn.e-btn {
    height: 38px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
}

.configuracion-page .configuracion-primary-btn.e-btn {
    border: none !important;
    background: #2563eb !important;
    color: #ffffff !important;
}

    .configuracion-page .configuracion-primary-btn.e-btn:hover {
        background: #1d4ed8 !important;
    }

.configuracion-page .configuracion-action-btn.e-btn {
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
}

    .configuracion-page .configuracion-action-btn.e-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

/* ?? SeriesDocumentosPage: botones Syncfusion ?? */
.series-doc-page .e-btn {
    box-shadow: none !important;
    min-width: 0 !important;
    font-family: inherit !important;
    text-transform: none !important;
}

.series-doc-page .e-btn .e-btn-content {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.series-doc-page .e-btn .e-ripple-element {
    display: none !important;
}

/* Botones generales */

.series-doc-page .sd-primary-btn.e-btn,
.series-doc-page .sd-action-btn.e-btn {
    height: 38px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.series-doc-page .sd-primary-btn.e-btn {
    border: none !important;
    background: #2563eb !important;
    color: #ffffff !important;
}

    .series-doc-page .sd-primary-btn.e-btn:hover {
        background: #1d4ed8 !important;
    }

.series-doc-page .sd-action-btn.e-btn {
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
}

    .series-doc-page .sd-action-btn.e-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

.series-doc-page .sd-warning-btn.e-btn {
    border-color: #fbbf24 !important;
    color: #92400e !important;
    background: #fffbeb !important;
}

    .series-doc-page .sd-warning-btn.e-btn:hover {
        background: #fef3c7 !important;
    }

/* Tabs */

.series-doc-page .sd-tab-btn.e-btn {
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

    .series-doc-page .sd-tab-btn.e-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

    .series-doc-page .sd-tab-btn.e-btn.active {
        background: #eff6ff !important;
        border-color: #93c5fd !important;
        color: #1d4ed8 !important;
    }

/* Cards de serie */

.series-doc-page .sd-serie-card.e-btn {
    width: 100% !important;
    min-height: 84px !important;
    display: block !important;
    text-align: left !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 11px 12px !important;
    color: inherit !important;
}

    .series-doc-page .sd-serie-card.e-btn:hover {
        background: #f8fbff !important;
        border-color: #bfdbfe !important;
    }

    .series-doc-page .sd-serie-card.e-btn.active {
        border-color: #93c5fd !important;
        background: #eff6ff !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10) !important;
    }

    .series-doc-page .sd-serie-card.e-btn .e-btn-content {
        display: block !important;
        width: 100% !important;
    }

/* ?? TPV Configuración: botones Syncfusion ?? */

.tpv-page .e-btn {
    box-shadow: none !important;
    min-width: 0 !important;
    font-family: inherit !important;
    text-transform: none !important;
}

    .tpv-page .e-btn .e-btn-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .tpv-page .e-btn .e-ripple-element {
        display: none !important;
    }

/* Tabs */

.tpv-page .tpv-tab.e-btn {
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 11px !important;
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

    .tpv-page .tpv-tab.e-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

    .tpv-page .tpv-tab.e-btn.active {
        background: #eff6ff !important;
        border-color: #93c5fd !important;
        color: #1d4ed8 !important;
    }

/* Botón principal */

.tpv-page .tpv-btn.e-btn {
    height: 38px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    border: none !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

    .tpv-page .tpv-btn.e-btn:hover {
        background: #1d4ed8 !important;
    }

/* ?? Gestion IVA: botones Syncfusion ?? */

.gestion-iva-page .e-btn {
    box-shadow: none !important;
    min-width: 0 !important;
    font-family: inherit !important;
    text-transform: none !important;
}

    .gestion-iva-page .e-btn .e-btn-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .gestion-iva-page .e-btn .e-ripple-element {
        display: none !important;
    }

/* Botones principales */

.gestion-iva-page .giva-primary-btn.e-btn,
.gestion-iva-page .giva-action-btn.e-btn {
    height: 38px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.gestion-iva-page .giva-primary-btn.e-btn {
    border: none !important;
    background: #2563eb !important;
    color: #ffffff !important;
}

    .gestion-iva-page .giva-primary-btn.e-btn:hover {
        background: #1d4ed8 !important;
    }

.gestion-iva-page .giva-action-btn.e-btn {
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
}

    .gestion-iva-page .giva-action-btn.e-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

/* En pantallas pequenas, Restaurar y Guardar cambios se reparten la fila al 50% */
@media (max-width: 768px) {
    .gestion-iva-page .giva-primary-btn.e-btn,
    .gestion-iva-page .giva-action-btn.e-btn {
        flex: 1 1 0 !important;
    }
}

/* Tabs principales */

.gestion-iva-page .gestion-iva-tab.e-btn {
    width: 100% !important;
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 11px !important;
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

    .gestion-iva-page .gestion-iva-tab.e-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

    .gestion-iva-page .gestion-iva-tab.e-btn.active {
        background: #eff6ff !important;
        border-color: #93c5fd !important;
        color: #1d4ed8 !important;
    }

/* Tabs de grupo IVA */

.gestion-iva-page .giva-group-tab.e-btn {
    height: 34px !important;
    border-radius: 10px !important;
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

    .gestion-iva-page .giva-group-tab.e-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

    .gestion-iva-page .giva-group-tab.e-btn.active {
        background: #eff6ff !important;
        border-color: #93c5fd !important;
        color: #1d4ed8 !important;
    }

/* Tarjetas de tipos de IVA */

.gestion-iva-page .giva-type-card.e-btn {
    width: 100% !important;
    display: block !important;
    text-align: left !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 11px 12px !important;
    color: inherit !important;
}

    .gestion-iva-page .giva-type-card.e-btn:hover {
        background: #f8fbff !important;
        border-color: #bfdbfe !important;
    }

    .gestion-iva-page .giva-type-card.e-btn.active {
        border-color: #93c5fd !important;
        background: #eff6ff !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10) !important;
    }

    .gestion-iva-page .giva-type-card.e-btn .e-btn-content {
        display: block !important;
        width: 100% !important;
    }

/* ?? Presentacion IVA: botones Syncfusion ?? */

.presentacion-iva-page .e-btn {
    box-shadow: none !important;
    min-width: 0 !important;
    font-family: inherit !important;
    text-transform: none !important;
}

    .presentacion-iva-page .e-btn .e-btn-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .presentacion-iva-page .e-btn .e-ripple-element {
        display: none !important;
    }

/* Botones principales */

.presentacion-iva-page .piva-primary-btn.e-btn,
.presentacion-iva-page .piva-action-btn.e-btn {
    height: 38px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.presentacion-iva-page .piva-primary-btn.e-btn {
    border: none !important;
    background: #2563eb !important;
    color: #ffffff !important;
}

    .presentacion-iva-page .piva-primary-btn.e-btn:hover {
        background: #1d4ed8 !important;
    }

.presentacion-iva-page .piva-action-btn.e-btn {
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
}

    .presentacion-iva-page .piva-action-btn.e-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

/* Tabs */

.presentacion-iva-page .piva-tab-btn.e-btn {
    width: 100% !important;
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 11px !important;
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

    .presentacion-iva-page .piva-tab-btn.e-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

    .presentacion-iva-page .piva-tab-btn.e-btn.active {
        background: #eff6ff !important;
        border-color: #93c5fd !important;
        color: #1d4ed8 !important;
    }

/* ?? Modelo 347: botones Syncfusion ?? */

.modelo-page .e-btn {
    box-shadow: none !important;
    min-width: 0 !important;
    font-family: inherit !important;
    text-transform: none !important;
}

    .modelo-page .e-btn .e-btn-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .modelo-page .e-btn .e-ripple-element {
        display: none !important;
    }

/* Botón principal */

.modelo-page .mod-primary-btn.e-btn {
    height: 38px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    border: none !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

    .modelo-page .mod-primary-btn.e-btn:hover {
        background: #1d4ed8 !important;
    }

/* Tabs */

.modelo-page .modelo-tab.e-btn {
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 11px !important;
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

    .modelo-page .modelo-tab.e-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

    .modelo-page .modelo-tab.e-btn.active {
        background: #eff6ff !important;
        border-color: #93c5fd !important;
        color: #1d4ed8 !important;
    }

/* ?? Apertura ejercicio: botones Syncfusion ?? */

.apertura-page .e-btn {
    box-shadow: none !important;
    min-width: 0 !important;
    font-family: inherit !important;
    text-transform: none !important;
}

    .apertura-page .e-btn .e-btn-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .apertura-page .e-btn .e-ripple-element {
        display: none !important;
    }

/* Botones principales */

.apertura-page .ap-primary-btn.e-btn,
.apertura-page .ap-action-btn.e-btn,
.apertura-page .ap-warning-btn.e-btn {
    height: 38px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.apertura-page .ap-primary-btn.e-btn {
    border: none !important;
    background: #2563eb !important;
    color: #ffffff !important;
}

    .apertura-page .ap-primary-btn.e-btn:hover {
        background: #1d4ed8 !important;
    }

.apertura-page .ap-action-btn.e-btn {
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
}

    .apertura-page .ap-action-btn.e-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

.apertura-page .ap-warning-btn.e-btn {
    border: 1px solid #f59e0b !important;
    background: #f59e0b !important;
    color: #ffffff !important;
}

    .apertura-page .ap-warning-btn.e-btn:hover {
        background: #d97706 !important;
    }

/* Tabs */

.apertura-page .apertura-tab.e-btn {
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 11px !important;
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

    .apertura-page .apertura-tab.e-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

    .apertura-page .apertura-tab.e-btn.active {
        background: #eff6ff !important;
        border-color: #93c5fd !important;
        color: #1d4ed8 !important;
    }

/* Cards de tipo de apertura */

.apertura-page .ap-type-card.e-btn {
    width: 100% !important;
    display: block !important;
    text-align: left !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 12px !important;
    color: inherit !important;
}

    .apertura-page .ap-type-card.e-btn:hover {
        background: #f8fbff !important;
        border-color: #bfdbfe !important;
    }

    .apertura-page .ap-type-card.e-btn.active {
        background: #eff6ff !important;
        border-color: #93c5fd !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10) !important;
    }

    .apertura-page .ap-type-card.e-btn .e-btn-content {
        display: block !important;
        width: 100% !important;
    }

/* ?? Cierre contable: botones Syncfusion ?? */

.cierre-page .e-btn {
    box-shadow: none !important;
    min-width: 0 !important;
    font-family: inherit !important;
    text-transform: none !important;
}

    .cierre-page .e-btn .e-btn-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .cierre-page .e-btn .e-ripple-element {
        display: none !important;
    }

/* Botones principales */

.cierre-page .cc-primary-btn.e-btn,
.cierre-page .cc-action-btn.e-btn {
    height: 38px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.cierre-page .cc-primary-btn.e-btn {
    border: none !important;
    background: #2563eb !important;
    color: #ffffff !important;
}

    .cierre-page .cc-primary-btn.e-btn:hover {
        background: #1d4ed8 !important;
    }

.cierre-page .cc-action-btn.e-btn {
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
}

    .cierre-page .cc-action-btn.e-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

    .cierre-page .cc-primary-btn.e-btn:disabled,
    .cierre-page .cc-action-btn.e-btn:disabled {
        opacity: 0.55 !important;
        cursor: not-allowed !important;
    }

/* Tabs */

.cierre-page .cierre-tab.e-btn {
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 11px !important;
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

    .cierre-page .cierre-tab.e-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

    .cierre-page .cierre-tab.e-btn.active {
        background: #eff6ff !important;
        border-color: #93c5fd !important;
        color: #1d4ed8 !important;
    }

/* ?? Tienda web: botones Syncfusion ?? */

.tienda-web-page .e-btn {
    box-shadow: none !important;
    min-width: 0 !important;
    font-family: inherit !important;
    text-transform: none !important;
}

    .tienda-web-page .e-btn .e-btn-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .tienda-web-page .e-btn .e-ripple-element {
        display: none !important;
    }

.tienda-web-page .tw-pedidos-btn.e-btn,
.tienda-web-page .tw-pedidos-primary-btn.e-btn,
.tienda-web-page .tw-pedidos-danger-btn.e-btn,
.tienda-web-page .tw-table-action-btn.e-btn,
.tienda-web-page .tw-toolbar-btn.e-btn,
.tienda-web-page .tw-footer-btn.e-btn,
.tienda-web-page .tw-remove-btn.e-btn,
.tienda-web-page .tw-image-action-btn.e-btn,
.tienda-web-page .tw-subtab-btn.e-btn,
.tienda-web-page .tw-secondary-btn.e-btn,
.tienda-web-page .tw-primary-btn.e-btn {
    height: 38px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.tienda-web-page .tw-pedidos-primary-btn.e-btn,
.tienda-web-page .tw-primary-btn.e-btn {
    border: none !important;
    background: #2563eb !important;
    color: #ffffff !important;
}

    .tienda-web-page .tw-pedidos-primary-btn.e-btn:hover,
    .tienda-web-page .tw-primary-btn.e-btn:hover {
        background: #1d4ed8 !important;
    }

.tienda-web-page .tw-pedidos-btn.e-btn,
.tienda-web-page .tw-table-action-btn.e-btn,
.tienda-web-page .tw-toolbar-btn.e-btn,
.tienda-web-page .tw-footer-btn.e-btn,
.tienda-web-page .tw-secondary-btn.e-btn,
.tienda-web-page .tw-subtab-btn.e-btn {
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
}

    .tienda-web-page .tw-pedidos-btn.e-btn:hover,
    .tienda-web-page .tw-table-action-btn.e-btn:hover,
    .tienda-web-page .tw-toolbar-btn.e-btn:hover,
    .tienda-web-page .tw-footer-btn.e-btn:hover,
    .tienda-web-page .tw-secondary-btn.e-btn:hover,
    .tienda-web-page .tw-subtab-btn.e-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

    .tienda-web-page .tw-subtab-btn.e-btn.active {
        background: #eff6ff !important;
        border-color: #93c5fd !important;
        color: #1d4ed8 !important;
    }

/* ?? Tienda web catálogo + modal: botones Syncfusion ?? */

.tienda-web-page .e-btn,
.tw-modal-backdrop .e-btn {
    box-shadow: none !important;
    min-width: 0 !important;
    font-family: inherit !important;
    text-transform: none !important;
}

    .tienda-web-page .e-btn .e-btn-content,
    .tw-modal-backdrop .e-btn .e-btn-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .tienda-web-page .e-btn .e-ripple-element,
    .tw-modal-backdrop .e-btn .e-ripple-element {
        display: none !important;
    }

/* Botones generales */

.tienda-web-page .tw-toolbar-btn.e-btn,
.tienda-web-page .tw-footer-btn.e-btn,
.tienda-web-page .tw-remove-btn.e-btn,
.tienda-web-page .tw-image-action-btn.e-btn,
.tienda-web-page .tw-subtab-btn.e-btn,
.tienda-web-page .tw-danger-btn.e-btn,
.tw-modal-backdrop .tw-toolbar-btn.e-btn,
.tw-modal-backdrop .tw-footer-btn.e-btn,
.tw-modal-backdrop .tw-remove-btn.e-btn,
.tw-modal-backdrop .tw-image-action-btn.e-btn,
.tw-modal-backdrop .tw-subtab-btn.e-btn,
.tw-modal-backdrop .tw-danger-btn.e-btn {
    height: 34px !important;
    border-radius: 11px !important;
    padding: 0 12px !important;
    border: 1px solid #dbe3ec !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

    .tienda-web-page .tw-toolbar-btn.e-btn:hover,
    .tienda-web-page .tw-footer-btn.e-btn:hover,
    .tienda-web-page .tw-remove-btn.e-btn:hover,
    .tienda-web-page .tw-image-action-btn.e-btn:hover,
    .tienda-web-page .tw-subtab-btn.e-btn:hover,
    .tw-modal-backdrop .tw-toolbar-btn.e-btn:hover,
    .tw-modal-backdrop .tw-footer-btn.e-btn:hover,
    .tw-modal-backdrop .tw-remove-btn.e-btn:hover,
    .tw-modal-backdrop .tw-image-action-btn.e-btn:hover,
    .tw-modal-backdrop .tw-subtab-btn.e-btn:hover {
        background: #f8fafc !important;
        border-color: #cfd8e3 !important;
    }

    /* Subtabs activos */

    .tienda-web-page .tw-subtab-btn.e-btn.active,
    .tw-modal-backdrop .tw-subtab-btn.e-btn.active {
        background: #eff6ff !important;
        border-color: #bfdbfe !important;
        color: #1d4ed8 !important;
    }

/* Botones de imagen */

.tienda-web-page .tw-image-action-btn.e-btn,
.tw-modal-backdrop .tw-image-action-btn.e-btn {
    height: 30px !important;
    border-radius: 10px !important;
    padding: 0 10px !important;
}

/* Botones danger */

.tienda-web-page .tw-danger-btn.e-btn,
.tw-modal-backdrop .tw-danger-btn.e-btn {
    border-color: #fecaca !important;
    background: #fff7f7 !important;
    color: #b91c1c !important;
}

    .tienda-web-page .tw-danger-btn.e-btn:hover,
    .tw-modal-backdrop .tw-danger-btn.e-btn:hover {
        background: #fef2f2 !important;
        border-color: #fca5a5 !important;
    }

.tienda-web-page .tw-remove-btn.e-btn,
.tienda-web-page .tw-image-action-btn.e-btn.danger,
.tw-modal-backdrop .tw-remove-btn.e-btn,
.tw-modal-backdrop .tw-image-action-btn.e-btn.danger {
    color: #b45309 !important;
}

/* Botones imagen como tarjeta */

.tw-modal-backdrop .tw-image-box.e-btn {
    width: 100% !important;
    min-height: 78px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px !important;
    border: 1px dashed #cfd8e3 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #526172 !important;
    text-align: center !important;
}

    .tw-modal-backdrop .tw-image-box.e-btn.selected {
        border-style: solid !important;
        border-color: #dbe7fb !important;
        background: #f8fbff !important;
    }

    .tw-modal-backdrop .tw-image-box.e-btn .e-btn-content {
        display: contents !important;
    }

/* TiendaWeb expand SfButton reset */
.tw-expand-btn.e-btn,
.tw-expand-btn-target.e-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: unset !important;
    height: auto !important;
    line-height: 1 !important;
}

    .tw-expand-btn.e-btn:hover,
    .tw-expand-btn.e-btn:focus,
    .tw-expand-btn-target.e-btn:hover,
    .tw-expand-btn-target.e-btn:focus {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .tw-expand-btn.e-btn .e-btn-content,
    .tw-expand-btn-target.e-btn .e-btn-content {
        display: contents !important;
    }

    .tw-expand-btn.e-btn .e-ripple-element,
    .tw-expand-btn-target.e-btn .e-ripple-element {
        display: none !important;
    }

/* ?? IMPORT PAGE — Syncfusion SfButton overrides ?? */

.import-page .e-btn,
.import-page .e-btn.e-lib {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    padding: 0 !important;
    min-width: auto !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: normal !important;
    border-radius: 0 !important;
    height: auto !important;
    line-height: normal !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

    .import-page .e-btn:hover,
    .import-page .e-btn:focus,
    .import-page .e-btn:active {
        background: transparent !important;
        border: none !important;
        color: inherit !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .import-page .e-btn::before,
    .import-page .e-btn::after {
        display: none !important;
    }

    .import-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .import-page .e-btn .e-ripple-element {
        display: none !important;
    }

    /* Primario */
    .import-page .e-btn.imp-primary-btn,
    .import-page .e-btn.imp-primary-btn:focus {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        white-space: nowrap !important;
        border: none !important;
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .import-page .e-btn.imp-primary-btn:hover {
            background: #1d4ed8 !important;
            color: #ffffff !important;
            transform: none !important;
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
        }

        .import-page .e-btn.imp-primary-btn.full {
            width: 100% !important;
            margin-top: 4px !important;
        }

    /* Secundario */
    .import-page .e-btn.imp-action-btn,
    .import-page .e-btn.imp-action-btn:focus {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        white-space: nowrap !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #374151 !important;
        box-shadow: none !important;
        text-transform: none !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
    }

        .import-page .e-btn.imp-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            color: #374151 !important;
            transform: none !important;
        }

    /* Tabs */
    .import-page .e-btn.import-tab,
    .import-page .e-btn.import-tab:focus {
        height: 34px !important;
        padding: 0 14px !important;
        border: 1px solid #dbe2ea !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        color: #475569 !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
    }

        .import-page .e-btn.import-tab:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            color: #475569 !important;
            transform: none !important;
        }

        .import-page .e-btn.import-tab.active {
            background: #eff6ff !important;
            border-color: #bfdbfe !important;
            color: #1d4ed8 !important;
        }

/* TiendaWeb catalogo - source select button */
.tw-source-select-btn.e-btn,
.tw-source-select-btn.e-btn:hover,
.tw-source-select-btn.e-btn:focus,
.tw-source-select-btn.e-btn:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: unset !important;
    height: auto !important;
    line-height: normal !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    cursor: pointer !important;
    display: block !important;
}

    .tw-source-select-btn.e-btn .e-btn-content {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .tw-source-select-btn.e-btn .e-ripple-element {
        display: none !important;
    }

/* TiendaWeb catalogo - selection cancel button */
.tw-selection-cancel-btn.e-btn,
.tw-selection-cancel-btn.e-btn:hover,
.tw-selection-cancel-btn.e-btn:focus,
.tw-selection-cancel-btn.e-btn:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 6px !important;
    margin: 0 !important;
    min-height: unset !important;
    height: auto !important;
    line-height: normal !important;
    min-width: unset !important;
    color: #1d4ed8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

    .tw-selection-cancel-btn.e-btn .e-btn-content {
        display: contents !important;
    }

    .tw-selection-cancel-btn.e-btn .e-ripple-element {
        display: none !important;
    }

/* TiendaWeb catalogo - botón añadir a web */
.tw-source-add-btn.e-btn,
.tw-source-add-btn.e-btn:hover,
.tw-source-add-btn.e-btn:focus,
.tw-source-add-btn.e-btn:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: unset !important;
    height: 26px !important;
    width: 26px !important;
    min-width: unset !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    color: #93c5fd !important;
    transition: color 0.15s ease !important;
}

    .tw-source-add-btn.e-btn:hover {
        color: #2563eb !important;
    }

    .tw-source-add-btn.e-btn .e-btn-content {
        display: contents !important;
    }

    .tw-source-add-btn.e-btn .e-ripple-element {
        display: none !important;
    }

/* TiendaWeb catalogo - botón cerrar picker */
.tw-picker-close-btn.e-btn,
.tw-picker-close-btn.e-btn:hover,
.tw-picker-close-btn.e-btn:focus,
.tw-picker-close-btn.e-btn:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 4px !important;
    margin: 0 !important;
    min-height: unset !important;
    height: auto !important;
    min-width: unset !important;
    line-height: 1 !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

    .tw-picker-close-btn.e-btn .e-btn-content {
        display: contents !important;
    }

    .tw-picker-close-btn.e-btn .e-ripple-element {
        display: none !important;
    }

/* TiendaWeb catalogo - opción de categoría en picker */
.tw-picker-cat-btn.e-btn,
.tw-picker-cat-btn.e-btn:hover,
.tw-picker-cat-btn.e-btn:focus,
.tw-picker-cat-btn.e-btn:active {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    box-shadow: none !important;
    padding: 7px 12px !important;
    margin: 0 !important;
    min-height: 32px !important;
    height: auto !important;
    width: 100% !important;
    min-width: unset !important;
    line-height: 1 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    cursor: pointer !important;
    text-align: left !important;
}

    .tw-picker-cat-btn.e-btn:last-child {
        border-bottom: none !important;
    }

    .tw-picker-cat-btn.e-btn .e-btn-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .tw-picker-cat-btn.e-btn .e-ripple-element {
        display: none !important;
    }

/* TiendaWeb catalogo - botón nombre (abre modal) */
.tw-source-name-btn.e-btn,
.tw-source-name-btn.e-btn:hover,
.tw-source-name-btn.e-btn:focus,
.tw-source-name-btn.e-btn:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: unset !important;
    height: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    line-height: normal !important;
    display: block !important;
    text-align: left !important;
    cursor: pointer !important;
}

    .tw-source-name-btn.e-btn .e-btn-content {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .tw-source-name-btn.e-btn .e-ripple-element {
        display: none !important;
    }

/* ===================================================================
   ARTICULOS PAGE — Syncfusion SfButton overrides
   Pegar en app.css
   =================================================================== */

.articulos-page .e-btn,
.articulos-page .e-btn.e-lib,
.articulos-page .e-css.e-btn {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    padding: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    outline: none !important;
    overflow: visible !important;
    white-space: normal !important;
}

    .articulos-page .e-btn:hover,
    .articulos-page .e-btn:focus,
    .articulos-page .e-btn:active,
    .articulos-page .e-css.e-btn:hover,
    .articulos-page .e-css.e-btn:focus,
    .articulos-page .e-css.e-btn:active {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        outline: none !important;
    }

    .articulos-page .e-btn::before,
    .articulos-page .e-btn::after {
        display: none !important;
    }

    .articulos-page .e-btn .e-btn-content {
        display: contents !important;
    }

    .articulos-page .e-btn .e-ripple-element {
        display: none !important;
    }

    /* Header / Propiedades: botón secundario */
    .articulos-page .e-btn.articulos-action-btn,
    .articulos-page .e-btn.articulos-action-btn:focus {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        border: 1px solid #dbe2ea !important;
        background: #ffffff !important;
        color: #374151 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .articulos-page .e-btn.articulos-action-btn:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            color: #374151 !important;
            transform: none !important;
        }

    /* Header / Propiedades: botón primario */
    .articulos-page .e-btn.articulos-primary-btn,
    .articulos-page .e-btn.articulos-primary-btn:focus {
        height: 38px !important;
        border-radius: 11px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        cursor: pointer !important;
        border: none !important;
        background: #2563eb !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .articulos-page .e-btn.articulos-primary-btn:hover {
            background: #1d4ed8 !important;
            color: #ffffff !important;
            transform: none !important;
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
        }

    /* Filas clicables de familias, artículos y artículos asociados */
    .articulos-page .e-btn.familia-row,
    .articulos-page .e-btn.articulo-row,
    .articulos-page .e-btn.familia-articulo-row {
        width: 100% !important;
        min-width: 0 !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        color: inherit !important;
        padding: 11px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        text-align: left !important;
        cursor: pointer !important;
        box-shadow: none !important;
        white-space: normal !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
    }

        .articulos-page .e-btn.familia-row:hover,
        .articulos-page .e-btn.articulo-row:hover,
        .articulos-page .e-btn.familia-articulo-row:hover {
            background: #f8fbff !important;
            border-color: #bfdbfe !important;
            transform: none !important;
        }

        .articulos-page .e-btn.familia-row.selected,
        .articulos-page .e-btn.articulo-row.selected {
            background: #eff6ff !important;
            border-color: #bfdbfe !important;
            box-shadow: inset 0 0 0 1px #bfdbfe !important;
        }

    /* Tabs del detalle */
    .articulos-page .e-btn.articulo-tab-btn,
    .articulos-page .e-btn.articulo-tab-btn:focus {
        flex: 0 0 auto !important;       /* no encoge: la barra desborda y se desplaza con las flechas */
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 6px !important;
        margin-bottom: -1px !important;
        border: 0 !important;
        border-bottom: 2px solid transparent !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #64748b !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        transition: color 0.16s ease, border-color 0.16s ease !important;
    }

        .articulos-page .e-btn.articulo-tab-btn:hover {
            color: #334155 !important;
        }

        .articulos-page .e-btn.articulo-tab-btn.active {
            color: #1d4ed8 !important;
            border-bottom-color: #2563eb !important;
            font-weight: 800 !important;
        }

        .articulos-page .e-btn.articulo-tab-btn:focus-visible {
            outline: 2px solid #bfdbfe !important;
            outline-offset: 2px !important;
        }

/* Responsive botones */
@media (max-width: 768px) {
    .articulos-page .articulos-header-actions .e-btn.articulos-action-btn,
    .articulos-page .articulos-header-actions .e-btn.articulos-primary-btn,
    .articulos-page .propiedades-actions-inline .e-btn.articulos-action-btn,
    .articulos-page .propiedades-actions-inline .e-btn.articulos-primary-btn {
        width: 100% !important;
    }

    .articulos-page .e-btn.familia-row,
    .articulos-page .e-btn.articulo-row,
    .articulos-page .e-btn.familia-articulo-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

@media (max-width: 768px) {
    .art-modal-card .e-btn.art-modal-secondary-btn,
    .art-modal-card .e-btn.art-modal-primary-btn {
        width: 100% !important;
    }
}

            .art-modal-card .e-btn.art-modal-primary-btn:disabled,
            .art-modal-card .e-btn.art-modal-primary-btn.e-disabled,
            .art-modal-card .e-btn.art-modal-primary-btn[disabled] {
                opacity: 0.45 !important;
                cursor: not-allowed !important;
                transform: none !important;
                box-shadow: none !important;
            }

@media (max-width: 768px) {
    .art-modal-card .e-btn.art-modal-secondary-btn,
    .art-modal-card .e-btn.art-modal-primary-btn {
        width: 100% !important;
    }
}

    /* Eliminar propiedad */
    .art-modal-card .e-btn.art-property-remove-btn,
    .art-modal-card .e-btn.art-property-remove-btn:focus {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 11px !important;
        border: 1px solid #fee2e2 !important;
        background: #fff7f7 !important;
        color: #dc2626 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
    }

        .art-modal-card .e-btn.art-property-remove-btn:hover {
            background: #fef2f2 !important;
            border-color: #fecaca !important;
            color: #b91c1c !important;
            transform: none !important;
        }

        .art-modal-card .e-btn.art-property-remove-btn .material-symbols-outlined {
            font-size: 18px !important;
            line-height: 1 !important;
        }

        /* Disabled */
        .art-modal-card .e-btn.art-modal-secondary-btn:disabled,
        .art-modal-card .e-btn.art-modal-secondary-btn.e-disabled,
        .art-modal-card .e-btn.art-modal-secondary-btn[disabled],
        .art-modal-card .e-btn.art-modal-primary-btn:disabled,
        .art-modal-card .e-btn.art-modal-primary-btn.e-disabled,
        .art-modal-card .e-btn.art-modal-primary-btn[disabled],
        .art-modal-card .e-btn.art-property-remove-btn:disabled,
        .art-modal-card .e-btn.art-property-remove-btn.e-disabled,
        .art-modal-card .e-btn.art-property-remove-btn[disabled] {
            opacity: 0.45 !important;
            cursor: not-allowed !important;
            transform: none !important;
            box-shadow: none !important;
        }

@media (max-width: 768px) {
    .art-modal-card .e-btn.art-modal-primary-btn,
    .art-modal-card .e-btn.art-modal-secondary-btn {
        width: 100% !important;
    }
}

/* ===================================================================
   COPIAR PROPIEDADES MODAL — Syncfusion SfButton overrides
   Pegar en app.css
   =================================================================== */

.art-modal-card .e-btn,
.art-modal-card .e-btn.e-lib,
.art-modal-card .e-css.e-btn {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    padding: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    outline: none !important;
    overflow: visible !important;
    white-space: normal !important;
}

    .art-modal-card .e-btn:hover,
    .art-modal-card .e-btn:focus,
    .art-modal-card .e-btn:active,
    .art-modal-card .e-css.e-btn:hover,
    .art-modal-card .e-css.e-btn:focus,
    .art-modal-card .e-css.e-btn:active {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        outline: none !important;
    }

    .art-modal-card .e-btn::before,
    .art-modal-card .e-btn::after {
        display: none !important;
    }

    .art-modal-card .e-btn .e-btn-content {
        display: contents !important;
    }

    .art-modal-card .e-btn .e-ripple-element {
        display: none !important;
    }

    /* Cerrar modal */
    .art-modal-card .e-btn.art-modal-close,
    .art-modal-card .e-btn.art-modal-close:focus {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        background: #f8fafc !important;
        color: #64748b !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
    }

        .art-modal-card .e-btn.art-modal-close:hover {
            background: #eef2f7 !important;
            border-color: #cbd5e1 !important;
            color: #334155 !important;
            transform: none !important;
        }

        .art-modal-card .e-btn.art-modal-close .material-symbols-outlined {
            font-size: 20px !important;
            line-height: 1 !important;
        }

    /* Mini botones Todas / Ninguna */
    .art-modal-card .e-btn.art-mini-btn,
    .art-modal-card .e-btn.art-mini-btn:focus {
        height: 32px !important;
        border-radius: 10px !important;
        padding: 0 12px !important;
        border: 1px solid #dbe3ec !important;
        background: #ffffff !important;
        color: #334155 !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
    }

        .art-modal-card .e-btn.art-mini-btn:hover {
            background: #f8fafc !important;
            border-color: #cfd8e3 !important;
            color: #334155 !important;
            transform: none !important;
        }

    /* Cancelar / Aplicar copia */
    .art-modal-card .e-btn.art-modal-secondary-btn,
    .art-modal-card .e-btn.art-modal-primary-btn {
        height: 40px !important;
        border-radius: 12px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease !important;
    }

        .art-modal-card .e-btn.art-modal-secondary-btn,
        .art-modal-card .e-btn.art-modal-secondary-btn:focus {
            border: 1px solid #dbe3ec !important;
            background: #ffffff !important;
            color: #334155 !important;
        }

            .art-modal-card .e-btn.art-modal-secondary-btn:hover {
                background: #f8fafc !important;
                border-color: #cbd5e1 !important;
                color: #334155 !important;
                transform: none !important;
            }

        .art-modal-card .e-btn.art-modal-primary-btn,
        .art-modal-card .e-btn.art-modal-primary-btn:focus {
            border: none !important;
            background: #2563eb !important;
            color: #ffffff !important;
        }

            .art-modal-card .e-btn.art-modal-primary-btn:hover {
                background: #1d4ed8 !important;
                color: #ffffff !important;
                transform: none !important;
                box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
            }

            /* Disabled */
            .art-modal-card .e-btn.art-modal-primary-btn:disabled,
            .art-modal-card .e-btn.art-modal-primary-btn.e-disabled,
            .art-modal-card .e-btn.art-modal-primary-btn[disabled],
            .art-modal-card .e-btn.art-modal-secondary-btn:disabled,
            .art-modal-card .e-btn.art-modal-secondary-btn.e-disabled,
            .art-modal-card .e-btn.art-modal-secondary-btn[disabled],
            .art-modal-card .e-btn.art-mini-btn:disabled,
            .art-modal-card .e-btn.art-mini-btn.e-disabled,
            .art-modal-card .e-btn.art-mini-btn[disabled] {
                opacity: 0.45 !important;
                cursor: not-allowed !important;
                transform: none !important;
                box-shadow: none !important;
            }

@media (max-width: 768px) {
    .art-modal-card .e-btn.art-modal-secondary-btn,
    .art-modal-card .e-btn.art-modal-primary-btn {
        width: 100% !important;
    }

    .art-modal-card .e-btn.art-mini-btn {
        flex: 1 1 auto !important;
    }
}

/* El modal de nueva categoría web YA NO tiene ni un botón Syncfusion: «Cancelar» y «Crear categoría»
   son <button> planos (`.btn` + `.btn-cancel`/`.btn-accept`, en TiendaWebCategoriaModal.razor.css) y
   el aspa de cerrar se quitó —para salir quedan «Cancelar» y pulsar fuera—. Aquí vivía todo
   el bloque que deshacía la piel de `.e-btn` dentro de `.tw-modal-card`; sin SfButton que corregir,
   sobraba entero. */

/* ---- Tienda web: botones Syncfusion con aspecto de fila ---- */
.tw-target-definition-btn.e-btn,
.tw-target-article-click.e-btn,
.tw-picker-cat-btn.e-btn,
.tw-picker-close-btn.e-btn,
.tw-source-add-btn.e-btn,
.tw-expand-btn.e-btn {
    box-shadow: none !important;
    text-transform: none !important;
}

.tw-target-definition-btn.e-btn {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    font: inherit !important;
    text-align: left;
    cursor: pointer;
}

    .tw-target-definition-btn.e-btn:hover,
    .tw-target-definition-btn.e-btn:focus,
    .tw-target-definition-btn.e-btn:active {
        background: transparent !important;
        border-color: transparent !important;
        color: inherit !important;
        box-shadow: none !important;
    }

.tw-target-article-row.e-btn.tw-target-article-click {
    width: 100%;
    min-height: 30px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center;
    justify-content: stretch !important;
    gap: 8px;
    padding: 5px 8px !important;
    border: 0 !important;
    border-radius: 10px;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    text-align: left;
    cursor: pointer;
}

    .tw-target-article-row.e-btn.tw-target-article-click:hover {
        background: #ebf3ff !important;
    }

    .tw-target-article-row.e-btn.tw-target-article-click.selected {
        background: #eff6ff !important;
        box-shadow: inset 0 0 0 1px #bfdbfe !important;
    }

    .tw-target-article-row.e-btn.tw-target-article-click .tw-target-main {
        min-width: 0;
        display: flex !important;
        align-items: center;
        justify-content: flex-start !important;
        gap: 8px;
    }

    .tw-target-article-row.e-btn.tw-target-article-click .tw-target-state {
        justify-self: end !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-end !important;
        white-space: nowrap;
    }

    .tw-target-article-row.e-btn.tw-target-article-click .tw-target-title {
        font-size: 12px;
        font-weight: 750;
        color: #0f172a;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.tw-picker-cat-btn.e-btn {
    width: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid #f8fafc !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: inherit !important;
    font: inherit !important;
    cursor: pointer;
}

    .tw-picker-cat-btn.e-btn:hover {
        background: #eff6ff !important;
    }

.tw-picker-close-btn.e-btn {
    min-width: 24px;
    width: 24px;
    height: 24px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px;
    background: transparent !important;
    color: #64748b !important;
    font-size: 12px;
    font-weight: 900;
}

    .tw-picker-close-btn.e-btn:hover {
        background: #f1f5f9 !important;
        color: #0f172a !important;
    }

.tw-source-add-btn.e-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px;
    background: transparent !important;
    color: #2563eb !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .tw-source-add-btn.e-btn:hover {
        background: #dbeafe !important;
    }

    .tw-source-add-btn.e-btn .material-symbols-outlined {
        font-size: 20px;
        line-height: 1;
    }

.fd-sf-detail,
.fd-sf-detail *,
.fd-sf-detail *::before,
.fd-sf-detail *::after {
    box-sizing: border-box;
}

.fd-sf-detail {
    --fd-text: #102033;
    --fd-muted: #64748b;
    --fd-surface: #ffffff;
    --fd-soft: #f8fafc;
    --fd-line: #dbe3ee;
    --fd-line-soft: #edf2f7;
    --fd-primary: #2563eb;
    --fd-accent: #2563eb;
    --fd-accent-soft: #eff6ff;
    --fd-accent-line: #bfdbfe;
    --fd-gap: clamp(.28rem, .48dvi, .62rem);
    --fd-gap-tight: clamp(.16rem, .32dvi, .42rem);
    --fd-pad: clamp(.38rem, .58dvi, .72rem);
    --fd-radius: clamp(.58rem, .82dvi, .95rem);
    --fd-control-block: clamp(1.48rem, 1.78dvi, 1.95rem);
    --fd-head-label: clamp(3.1rem, 4.2dvi, 5.1rem);
    --fd-shadow: 0 .38rem 1rem rgba(15, 23, 42, .04);
    --fd-floating-safe: clamp(3.35rem, 4.6dvi, 5.35rem);
    --fd-table-tint: color-mix(in srgb, var(--fd-accent-soft) 28%, #fffafb);
    inline-size: 100%;
    block-size: 100%;
    min-inline-size: 0;
    min-block-size: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: var(--fd-gap);
    overflow: hidden;
    color: var(--fd-text);
    animation: fdUnifiedIn .18s cubic-bezier(.16, 1, .3, 1) both;
    container-type: inline-size;
}

    .fd-sf-detail:has(.fd-warning-strip) {
        grid-template-rows: auto auto auto minmax(0, 1fr);
    }

.fd-kind-factura {
    --fd-accent: #2563eb;
    --fd-accent-soft: #eff6ff;
    --fd-accent-line: #bfdbfe;
}

.fd-kind-albaran {
    --fd-accent: #0f766e;
    --fd-accent-soft: #f0fdfa;
    --fd-accent-line: #99f6e4;
}

.fd-kind-factura-albaranes {
    --fd-accent: #7c3aed;
    --fd-accent-soft: #f5f3ff;
    --fd-accent-line: #ddd6fe;
}

.fd-kind-pedido {
    --fd-accent: #ea580c;
    --fd-accent-soft: #fff7ed;
    --fd-accent-line: #fed7aa;
}

.fd-kind-presupuesto {
    --fd-accent: #2563eb;
    --fd-accent-soft: #eff6ff;
    --fd-accent-line: #bfdbfe;
}

.fd-sf-detail .fd-unified-header {
    min-inline-size: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--fd-gap);
    align-items: center;
}

.fd-sf-detail .fd-title-block,
.fd-sf-detail .fd-panel-title-row > div {
    min-inline-size: 0;
}

.fd-sf-detail .fd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: clamp(.18rem, .28dvi, .36rem);
    color: var(--fd-accent);
    font-size: clamp(.56rem, .64dvi, .72rem);
    font-weight: 950;
    letter-spacing: .05em;
    line-height: 1;
    margin-block-end: .1rem;
    text-transform: uppercase;
}

.fd-sf-detail .fd-title-block h1,
.fd-sf-detail .fd-panel-title-row h2,
.fd-sf-detail .fd-trace-block h2 {
    margin: 0;
    color: #0f172a;
    font-weight: 950;
    letter-spacing: -.025em;
    line-height: 1.06;
}

.fd-sf-detail .fd-title-block h1 {
    font-size: clamp(1rem, 1.18dvi, 1.34rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-sf-detail .fd-title-block p,
.fd-sf-detail .fd-panel-title-row p {
    margin: .1rem 0 0;
    color: var(--fd-muted);
    font-size: clamp(.58rem, .66dvi, .76rem);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-sf-detail .fd-header-tools,
.fd-sf-detail .fd-mini-actions {
    min-inline-size: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--fd-gap-tight);
    flex-wrap: wrap;
}

.fd-sf-detail .e-btn.fd-type-chip,
.fd-sf-detail .e-btn.fd-status,
.fd-sf-detail .e-btn.fd-btn,
.fd-sf-detail .e-btn.fd-mini-btn,
.fd-sf-detail .e-btn.fd-served-badge,
.fd-sf-detail .e-btn.fd-currency-pill {
    min-block-size: var(--fd-control-block);
    block-size: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999rem;
    padding-block: 0;
    padding-inline: clamp(.48rem, .7dvi, .86rem);
    font-size: clamp(.58rem, .66dvi, .74rem);
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    text-transform: none;
}

.fd-sf-detail .e-btn.e-disabled,
.fd-sf-detail .e-btn:disabled {
    opacity: 1;
}

.fd-sf-detail .e-btn.fd-btn,
.fd-sf-detail .e-btn.fd-mini-btn {
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

    .fd-sf-detail .e-btn.fd-btn:hover,
    .fd-sf-detail .e-btn.fd-mini-btn:hover {
        transform: translateY(-.04rem);
    }

.fd-sf-detail .e-btn.fd-type-chip,
.fd-sf-detail .e-btn.fd-btn-light,
.fd-sf-detail .e-btn.fd-mini-btn {
    border: .0625rem solid var(--fd-line);
    background: var(--fd-surface);
    color: #334155;
}

    .fd-sf-detail .e-btn.fd-btn-light:hover,
    .fd-sf-detail .e-btn.fd-mini-btn:hover {
        background: var(--fd-soft);
        border-color: #cbd5e1;
    }

.fd-sf-detail .e-btn.fd-btn-primary {
    border: 0;
    background: var(--fd-primary);
    color: #ffffff;
}

    .fd-sf-detail .e-btn.fd-btn-primary:hover {
        background: #1d4ed8;
        box-shadow: 0 .55rem 1rem rgba(37, 99, 235, .16);
    }

.fd-sf-detail .e-btn.fd-type-chip {
    color: var(--fd-accent);
    background: var(--fd-accent-soft);
    border-color: var(--fd-accent-line);
}

.fd-sf-detail .e-btn.fd-status {
    gap: clamp(.1rem, .18dvi, .24rem);
    border: .0625rem solid transparent;
}

.fd-sf-detail .e-btn.fd-status-green {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.fd-sf-detail .e-btn.fd-status-blue {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.fd-sf-detail .e-btn.fd-status-orange {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.fd-sf-detail .e-btn.fd-status-red {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.fd-sf-detail .e-btn.fd-status-neutral {
    color: #475569;
    background: var(--fd-soft);
    border-color: var(--fd-line);
}

.fd-sf-detail .fd-smart-strip,
.fd-sf-detail .fd-warning-strip {
    min-inline-size: 0;
    display: grid;
    gap: var(--fd-gap-tight);
}

.fd-sf-detail .fd-smart-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.fd-sf-detail .fd-warning-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fd-sf-detail .e-btn.fd-summary-chip,
.fd-sf-detail .e-btn.fd-warning-chip {
    min-inline-size: 0;
    min-block-size: clamp(1.48rem, 2dvi, 2.08rem);
    block-size: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(.3rem, .44dvi, .56rem);
    border: .0625rem solid var(--fd-line);
    border-inline-start: .16rem solid var(--fd-accent);
    border-radius: var(--fd-radius);
    background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--fd-accent-soft) 32%, #ffffff) 100%);
    padding-block: clamp(.18rem, .32dvi, .42rem);
    padding-inline: clamp(.38rem, .62dvi, .78rem);
    overflow: hidden;
    box-shadow: none;
    text-transform: none;
}

.fd-sf-detail .e-btn.fd-warning-chip {
    border-inline-start-color: #f59e0b;
    background: #fffbeb;
}

.fd-sf-detail .fd-summary-date {
    --fd-accent: #0284c7;
    --fd-accent-soft: #f0f9ff;
    --fd-accent-line: #bae6fd;
}

.fd-sf-detail .fd-summary-client {
    --fd-accent: #16a34a;
    --fd-accent-soft: #f0fdf4;
    --fd-accent-line: #bbf7d0;
}

.fd-sf-detail .fd-summary-series {
    --fd-accent: #7c3aed;
    --fd-accent-soft: #f5f3ff;
    --fd-accent-line: #ddd6fe;
}

.fd-sf-detail .fd-summary-total {
    --fd-accent: #ea580c;
    --fd-accent-soft: #fff7ed;
    --fd-accent-line: #fed7aa;
    border-color: var(--fd-accent-line);
}

    .fd-sf-detail .fd-summary-total strong {
        color: var(--fd-accent);
    }

.fd-sf-detail .fd-summary-chip span,
.fd-sf-detail .fd-warning-chip span,
.fd-sf-detail .fd-field span,
.fd-sf-detail .fd-sf-notes span,
.fd-sf-detail .fd-trace-item span {
    min-inline-size: 0;
    display: inline-flex;
    align-items: center;
    gap: clamp(.16rem, .24dvi, .32rem);
    color: var(--fd-muted);
    font-size: clamp(.56rem, .63dvi, .72rem);
    font-weight: 900;
    line-height: 1.05;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-sf-detail .fd-summary-chip strong,
.fd-sf-detail .fd-warning-chip strong,
.fd-sf-detail .fd-field strong,
.fd-sf-detail .fd-trace-item strong {
    min-inline-size: 0;
    color: #0f172a;
    font-size: clamp(.6rem, .7dvi, .78rem);
    font-weight: 950;
    line-height: 1.08;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: end;
}

.fd-sf-detail .fd-document-workspace {
    min-inline-size: 0;
    min-block-size: 0;
    block-size: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--fd-gap);
    overflow: hidden;
}

.fd-sf-detail .fd-panel {
    min-inline-size: 0;
    min-block-size: 0;
    border: .0625rem solid color-mix(in srgb, var(--fd-accent-line) 58%, var(--fd-line));
    border-radius: var(--fd-radius);
    background: var(--fd-surface);
    padding: var(--fd-pad);
    box-shadow: var(--fd-shadow);
    overflow: hidden;
}

.fd-sf-detail .fd-head-panel {
    border-block-start: .16rem solid var(--fd-accent);
}

.fd-sf-detail .fd-lines-panel {
    border-block-start: .16rem solid #0f766e;
    block-size: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.fd-sf-detail .fd-footer-panel {
    border-block-start: .16rem solid #ea580c;
    padding-block: clamp(.28rem, .44dvi, .58rem);
}

.fd-sf-detail .fd-panel-title-row {
    min-inline-size: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fd-gap);
    margin-block-end: var(--fd-gap-tight);
}

    .fd-sf-detail .fd-panel-title-row h2,
    .fd-sf-detail .fd-trace-block h2 {
        display: inline-flex;
        align-items: center;
        gap: clamp(.22rem, .34dvi, .44rem);
        font-size: clamp(.74rem, .82dvi, .94rem);
    }

.fd-sf-detail .fd-fields-grid {
    min-inline-size: 0;
    display: grid;
    gap: var(--fd-gap-tight);
}

.fd-sf-detail .fd-fields-grid-head {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.fd-sf-detail .fd-fields-grid-economic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fd-sf-detail .e-btn.fd-field {
    min-inline-size: 0;
    min-block-size: clamp(1.42rem, 1.68dvi, 1.92rem);
    block-size: auto;
    display: grid;
    grid-template-columns: minmax(var(--fd-head-label), .42fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(.2rem, .34dvi, .44rem);
    border: .0625rem solid color-mix(in srgb, var(--fd-line-soft) 70%, var(--fd-accent-line));
    border-radius: clamp(.46rem, .66dvi, .78rem);
    background: var(--fd-soft);
    padding-block: clamp(.12rem, .22dvi, .3rem);
    padding-inline: clamp(.3rem, .48dvi, .58rem);
    overflow: hidden;
    box-shadow: none;
    text-transform: none;
}

.fd-sf-detail .fd-head-panel .e-btn.fd-field {
    background: linear-gradient(180deg, #f9fbfe 0%, #f5f8fc 100%);
}

.fd-sf-detail .fd-field-span-2 {
    grid-column: span 2;
}

.fd-sf-detail .fd-field-span-3 {
    grid-column: span 3;
}

.fd-sf-detail .fd-fields-grid-economic .e-btn.fd-field {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
}

.fd-sf-detail .fd-fields-grid-economic .fd-field-key-vencimiento,
.fd-sf-detail .fd-fields-grid-economic .fd-field-key-estado,
.fd-sf-detail .fd-fields-grid-economic .fd-field-key-formaPago {
    grid-template-columns: max-content minmax(0, 1fr);
}

.fd-sf-detail .fd-field-key-total,
.fd-sf-detail .fd-field-key-pendiente {
    background: linear-gradient(180deg, #fff7ed 0%, #fffaf5 100%);
    border-color: #fed7aa;
}

.fd-sf-detail .fd-field-key-cobrado {
    background: linear-gradient(180deg, #f0fdf4 0%, #f8fffb 100%);
    border-color: #bbf7d0;
}

.fd-sf-detail .fd-field-key-vencimiento,
.fd-sf-detail .fd-field-key-fecha,
.fd-sf-detail .fd-field-key-desdeFecha,
.fd-sf-detail .fd-field-key-hastaFecha {
    background: linear-gradient(180deg, #f0f9ff 0%, #f8fcff 100%);
    border-color: #bae6fd;
}

.fd-sf-detail .fd-field-key-cliente,
.fd-sf-detail .fd-field-key-desdeCliente,
.fd-sf-detail .fd-field-key-hastaCliente,
.fd-sf-detail .fd-field-key-nif {
    background: linear-gradient(180deg, #f0fdf4 0%, #f8fffb 100%);
    border-color: #bbf7d0;
}

.fd-sf-detail .fd-field-icon,
.fd-sf-detail .fd-section-icon,
.fd-sf-detail .fd-ui-icon,
.fd-sf-detail .fd-eyebrow-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-style: normal;
    user-select: none;
}

.fd-sf-detail .fd-eyebrow-icon {
    inline-size: clamp(.82rem, .98dvi, 1.12rem);
    block-size: clamp(.82rem, .98dvi, 1.12rem);
    border-radius: .28rem;
    background: var(--fd-accent-soft);
    color: var(--fd-accent);
    border: .0625rem solid var(--fd-accent-line);
    font-size: clamp(.52rem, .62dvi, .72rem);
}

.fd-sf-detail .fd-ui-icon {
    inline-size: clamp(.72rem, .86dvi, .98rem);
    block-size: clamp(.72rem, .86dvi, .98rem);
    border-radius: 999rem;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: clamp(.5rem, .62dvi, .72rem);
    margin-inline-end: clamp(.12rem, .22dvi, .28rem);
}

.fd-sf-detail .fd-btn-primary .fd-ui-icon {
    background: rgba(255, 255, 255, .18);
}

.fd-sf-detail .fd-field-icon {
    inline-size: clamp(.8rem, .92dvi, 1.02rem);
    block-size: clamp(.8rem, .92dvi, 1.02rem);
    border-radius: clamp(.26rem, .36dvi, .46rem);
    background: #ffffff;
    color: var(--fd-accent);
    border: .0625rem solid color-mix(in srgb, var(--fd-accent-line) 60%, var(--fd-line-soft));
    font-size: clamp(.46rem, .56dvi, .64rem);
    font-weight: 950;
}

.fd-sf-detail .fd-field-key-total .fd-field-icon,
.fd-sf-detail .fd-field-key-pendiente .fd-field-icon {
    color: #ea580c;
    border-color: #fed7aa;
}

.fd-sf-detail .fd-field-key-cobrado .fd-field-icon {
    color: #16a34a;
    border-color: #bbf7d0;
}

.fd-sf-detail .fd-field-key-vencimiento .fd-field-icon,
.fd-sf-detail .fd-field-key-fecha .fd-field-icon,
.fd-sf-detail .fd-field-key-desdeFecha .fd-field-icon,
.fd-sf-detail .fd-field-key-hastaFecha .fd-field-icon {
    color: #0284c7;
    border-color: #bae6fd;
}

.fd-sf-detail .fd-field-key-cliente .fd-field-icon,
.fd-sf-detail .fd-field-key-desdeCliente .fd-field-icon,
.fd-sf-detail .fd-field-key-hastaCliente .fd-field-icon,
.fd-sf-detail .fd-field-key-nif .fd-field-icon {
    color: #16a34a;
    border-color: #bbf7d0;
}

.fd-sf-detail .fd-section-icon {
    inline-size: clamp(1rem, 1.18dvi, 1.34rem);
    block-size: clamp(1rem, 1.18dvi, 1.34rem);
    border-radius: clamp(.32rem, .46dvi, .56rem);
    color: var(--fd-accent);
    background: var(--fd-accent-soft);
    border: .0625rem solid var(--fd-accent-line);
    font-size: clamp(.58rem, .7dvi, .8rem);
}

.fd-sf-detail .fd-section-icon-lines {
    color: #0f766e;
    background: #f0fdfa;
    border-color: #99f6e4;
}

.fd-sf-detail .fd-section-icon-money {
    color: #ea580c;
    background: #fff7ed;
    border-color: #fed7aa;
}

.fd-sf-detail .fd-section-icon-flow {
    color: #7c3aed;
    background: #f5f3ff;
    border-color: #ddd6fe;
}

.fd-sf-detail .fd-grid-wrap {
    min-inline-size: 0;
    min-block-size: 0;
    block-size: 100%;
    border: .0625rem solid var(--fd-line);
    border-radius: clamp(.55rem, .74dvi, .86rem);
    background: #fffafb;
    overflow: hidden;
    overscroll-behavior: contain;
}

.fd-sf-detail .fd-sf-grid.e-grid {
    block-size: 100%;
    inline-size: 100%;
    border: 0;
    border-radius: inherit;
    background: #fffafb;
    box-shadow: none;
}

.fd-sf-detail .fd-sf-grid .e-gridheader,
.fd-sf-detail .fd-sf-grid .e-headercontent,
.fd-sf-detail .fd-sf-grid .e-headercell {
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
}

.fd-sf-detail .fd-sf-grid .e-headercell,
.fd-sf-detail .fd-sf-grid .e-rowcell {
    border-color: var(--fd-line-soft);
    color: #0f172a;
    font-size: clamp(.58rem, .66dvi, .74rem);
    line-height: 1.12;
    padding-block: clamp(.2rem, .34dvi, .44rem);
    padding-inline: clamp(.28rem, .45dvi, .58rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-sf-detail .fd-sf-grid .e-headertext {
    color: #475569;
    font-size: clamp(.58rem, .66dvi, .74rem);
    font-weight: 950;
}

.fd-sf-detail .fd-sf-grid .e-rowcell {
    background: var(--fd-table-tint);
    font-weight: 760;
}

.fd-sf-detail .fd-sf-grid .e-altrow .e-rowcell {
    background: color-mix(in srgb, var(--fd-table-tint) 72%, #ffffff);
}

.fd-sf-detail .fd-sf-grid .e-row:hover .e-rowcell {
    background: #f8fbff;
}

.fd-sf-detail .fd-sf-grid .e-content {
    block-size: 100% !important;
    overflow: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.fd-sf-detail .fd-sf-grid .e-gridcontent,
.fd-sf-detail .fd-sf-grid .e-table {
    cursor: default;
}

.fd-sf-detail .fd-sf-grid .e-rowcell:nth-child(7),
.fd-sf-detail .fd-grid-money {
    color: #0f766e;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.fd-sf-detail .e-btn.fd-served-badge {
    min-inline-size: clamp(2.1rem, 2.8dvi, 3.4rem);
    min-block-size: auto;
    block-size: auto;
    border-radius: 999rem;
    border: .0625rem solid transparent;
    padding-block: clamp(.08rem, .16dvi, .22rem);
    padding-inline: clamp(.24rem, .38dvi, .5rem);
    font-size: clamp(.54rem, .6dvi, .68rem);
    font-weight: 950;
    line-height: 1;
}

.fd-sf-detail .e-btn.fd-served-yes {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.fd-sf-detail .e-btn.fd-served-no {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.fd-sf-detail .fd-footer-grid {
    min-inline-size: 0;
    min-block-size: 0;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
        "economics notes"
        "economics trace";
    gap: var(--fd-gap-tight) var(--fd-gap);
    align-items: stretch;
    padding-inline-end: var(--fd-floating-safe);
}

.fd-sf-detail .fd-economics-block {
    grid-area: economics;
}

.fd-sf-detail .fd-notes-block {
    grid-area: notes;
}

.fd-sf-detail .fd-trace-block {
    grid-area: trace;
}

.fd-sf-detail .fd-economics-block,
.fd-sf-detail .fd-notes-block,
.fd-sf-detail .fd-trace-block {
    min-inline-size: 0;
    min-block-size: 0;
    overflow: hidden;
}

.fd-sf-detail .fd-notes-block {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--fd-gap-tight);
}

.fd-sf-detail .e-btn.fd-sf-notes {
    min-block-size: 0;
    block-size: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(.18rem, .28dvi, .36rem);
    align-items: stretch;
    justify-content: stretch;
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
    text-transform: none;
}

.fd-sf-detail .fd-sf-notes strong {
    min-block-size: clamp(2.25rem, 5.4dvb, 4.35rem);
    border: .0625rem solid #bfdbfe;
    border-radius: clamp(.48rem, .66dvi, .78rem);
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    color: #334155;
    font-size: clamp(.58rem, .66dvi, .74rem);
    font-weight: 760;
    line-height: 1.25;
    padding: clamp(.3rem, .48dvi, .58rem);
    overflow: auto;
    white-space: normal;
    text-align: start;
}

.fd-sf-detail .fd-checks-row {
    min-inline-size: 0;
    display: flex;
    align-items: center;
    gap: var(--fd-gap-tight);
    flex-wrap: wrap;
    color: #475569;
    font-size: clamp(.54rem, .62dvi, .7rem);
    font-weight: 820;
}

    .fd-sf-detail .fd-checks-row .e-checkbox-wrapper {
        display: inline-flex;
        align-items: center;
        gap: clamp(.16rem, .26dvi, .34rem);
        font-size: clamp(.54rem, .62dvi, .7rem);
        font-weight: 820;
        white-space: nowrap;
    }

        .fd-sf-detail .fd-checks-row .e-checkbox-wrapper .e-label {
            color: #475569;
            font-size: clamp(.54rem, .62dvi, .7rem);
            font-weight: 820;
        }

.fd-sf-detail .e-btn.fd-currency-pill {
    min-block-size: clamp(1rem, 1.3dvi, 1.6rem);
    border: .0625rem solid #bfdbfe;
    border-radius: clamp(.38rem, .52dvi, .62rem);
    background: #eff6ff;
    color: #1d4ed8;
    padding-block: clamp(.12rem, .22dvi, .28rem);
    padding-inline: clamp(.28rem, .44dvi, .54rem);
}

.fd-sf-detail .fd-currency-pill span {
    inline-size: clamp(.58rem, .68dvi, .78rem);
    block-size: clamp(.58rem, .68dvi, .78rem);
    border-radius: .12rem;
    background: #94a3b8;
    margin-inline-end: clamp(.16rem, .26dvi, .34rem);
}

.fd-sf-detail .fd-trace-block {
    min-block-size: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(.34rem, .58dvi, .78rem);
    border: .0625rem solid #ddd6fe;
    border-radius: clamp(.52rem, .74dvi, .86rem);
    background: linear-gradient(180deg, #fbfaff 0%, #f8fafc 100%);
    padding-block: clamp(.24rem, .38dvi, .48rem);
    padding-inline: clamp(.34rem, .52dvi, .66rem);
}

.fd-sf-detail .fd-trace-grid {
    min-inline-size: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.1rem, .2dvi, .26rem) clamp(.22rem, .4dvi, .54rem);
    align-items: center;
}

.fd-sf-detail .e-btn.fd-trace-item {
    min-inline-size: 0;
    min-block-size: clamp(1rem, 1.35dvi, 1.6rem);
    block-size: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(.12rem, .22dvi, .34rem);
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
    text-transform: none;
}

.fd-sf-detail .fd-trace-item strong {
    color: #4c1d95;
    text-align: start;
}

.fd-sf-detail .fd-sf-grid .e-content::-webkit-scrollbar,
.fd-sf-detail .fd-sf-notes strong::-webkit-scrollbar {
    inline-size: clamp(.28rem, .42dvi, .48rem);
    block-size: clamp(.28rem, .42dvi, .48rem);
}

.fd-sf-detail .fd-sf-grid .e-content::-webkit-scrollbar-track,
.fd-sf-detail .fd-sf-notes strong::-webkit-scrollbar-track {
    background: transparent;
}

.fd-sf-detail .fd-sf-grid .e-content::-webkit-scrollbar-thumb,
.fd-sf-detail .fd-sf-notes strong::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999rem;
}

@keyframes fdUnifiedIn {
    from {
        opacity: 0;
        transform: translateY(.28rem);
        filter: blur(.1rem);
    }

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

@media (min-width: 64.001rem) {
    .fd-sf-detail,
    .fd-sf-detail .fd-document-workspace,
    .fd-sf-detail .fd-lines-panel,
    .fd-sf-detail .fd-footer-panel {
        overflow: hidden;
    }
}

@media (max-height: 44rem) and (min-width: 64.001rem) {
    .fd-sf-detail {
        --fd-gap: clamp(.18rem, .34dvi, .44rem);
        --fd-gap-tight: clamp(.12rem, .24dvi, .32rem);
        --fd-pad: clamp(.28rem, .44dvi, .54rem);
        --fd-control-block: clamp(1.34rem, 1.55dvi, 1.72rem);
    }

        .fd-sf-detail .fd-title-block p,
        .fd-sf-detail .fd-panel-title-row p {
            display: none;
        }

        .fd-sf-detail .e-btn.fd-summary-chip,
        .fd-sf-detail .e-btn.fd-warning-chip,
        .fd-sf-detail .e-btn.fd-field {
            min-block-size: clamp(1.28rem, 1.46dvi, 1.66rem);
        }

        .fd-sf-detail .fd-sf-notes strong {
            min-block-size: clamp(1.9rem, 5dvb, 3.2rem);
        }
}

@media (max-width: 86rem) {
    .fd-sf-detail .fd-smart-strip,
    .fd-sf-detail .fd-warning-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fd-sf-detail .fd-fields-grid-head {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .fd-sf-detail .fd-fields-grid-economic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-sf-detail .fd-field-span-3 {
        grid-column: span 2;
    }

    .fd-sf-detail .fd-footer-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
        padding-inline-end: var(--fd-floating-safe);
    }

    .fd-sf-detail .fd-trace-block {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .fd-sf-detail .fd-trace-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 64rem) {
    .fd-sf-detail {
        block-size: auto;
        min-block-size: 100%;
        overflow: visible;
    }

        .fd-sf-detail .fd-unified-header {
            grid-template-columns: 1fr;
        }

        .fd-sf-detail .fd-header-tools,
        .fd-sf-detail .fd-mini-actions {
            justify-content: stretch;
        }

        .fd-sf-detail .e-btn.fd-type-chip,
        .fd-sf-detail .e-btn.fd-status,
        .fd-sf-detail .e-btn.fd-btn,
        .fd-sf-detail .e-btn.fd-mini-btn {
            flex: 1 1 auto;
        }

        .fd-sf-detail .fd-smart-strip,
        .fd-sf-detail .fd-warning-strip,
        .fd-sf-detail .fd-fields-grid-head {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .fd-sf-detail .fd-document-workspace {
            block-size: auto;
            display: flex;
            flex-direction: column;
            overflow: visible;
        }

        .fd-sf-detail .fd-grid-wrap {
            block-size: clamp(18rem, 52dvb, 30rem);
        }

        .fd-sf-detail .fd-footer-grid {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto;
            grid-template-areas:
                "economics"
                "notes"
                "trace";
            padding-inline-end: 0;
        }

        .fd-sf-detail .fd-trace-block {
            grid-template-columns: 1fr;
        }

        .fd-sf-detail .fd-trace-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .fd-sf-detail .fd-field-span-2,
        .fd-sf-detail .fd-field-span-3 {
            grid-column: auto;
        }
}

@media (max-width: 42rem) {
    .fd-sf-detail .fd-smart-strip,
    .fd-sf-detail .fd-warning-strip,
    .fd-sf-detail .fd-fields-grid-head,
    .fd-sf-detail .fd-fields-grid-economic {
        grid-template-columns: 1fr;
    }

    .fd-sf-detail .fd-panel-title-row,
    .fd-sf-detail .fd-lines-title-row {
        flex-direction: column;
        align-items: stretch;
    }

    .fd-sf-detail .e-btn.fd-field,
    .fd-sf-detail .e-btn.fd-trace-item {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .fd-sf-detail .fd-field strong,
    .fd-sf-detail .fd-trace-item strong,
    .fd-sf-detail .fd-summary-chip strong,
    .fd-sf-detail .fd-warning-chip strong {
        text-align: start;
    }

    .fd-sf-detail .fd-trace-grid {
        grid-template-columns: 1fr;
    }

    .fd-sf-detail .fd-title-block h1,
    .fd-sf-detail .fd-title-block p,
    .fd-sf-detail .fd-panel-title-row p {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fd-sf-detail,
    .fd-sf-detail *,
    .fd-sf-detail *::before,
    .fd-sf-detail *::after {
        animation: none !important;
        transition: none !important;
    }
}

.ff-unified-page .e-btn,
.ff-unified-page .e-btn.e-control,
.ff-unified-page .e-input-group,
.ff-unified-page .e-control-wrapper,
.ff-unified-page .e-checkbox-wrapper,
.ff-unified-page .e-grid,
.ff-unified-page .e-grid * {
    box-sizing: border-box;
}

    .ff-unified-page .e-btn.e-disabled,
    .ff-unified-page .e-btn:disabled,
    .ff-unified-page .e-btn.e-disabled:hover,
    .ff-unified-page .e-btn:disabled:hover {
        opacity: 1;
        cursor: default;
    }

    .ff-unified-page .e-btn.ff-chip,
    .ff-unified-page .e-btn.ff-status,
    .ff-unified-page .e-btn.ff-btn,
    .ff-unified-page .e-btn.ff-mini-btn,
    .ff-unified-page .e-btn.ff-summary-chip,
    .ff-unified-page .e-btn.ff-lines-count,
    .ff-unified-page .e-btn.ff-total-chip,
    .ff-unified-page .e-btn.ff-grid-total-chip,
    .ff-unified-page .e-btn.ff-flow-chip,
    .ff-unified-page .e-btn.ff-delete-btn,
    .ff-unified-page .e-btn.ff-grid-delete-btn {
        min-block-size: var(--ff-control);
        block-size: auto;
        min-inline-size: 0;
        border-radius: 999rem;
        padding-block: 0;
        padding-inline: clamp(.46rem, .7dvi, .82rem);
        font-size: var(--ff-font-small);
        font-weight: 950;
        line-height: 1;
        text-transform: none;
        box-shadow: none;
        white-space: nowrap;
    }

    .ff-unified-page .e-btn.ff-btn,
    .ff-unified-page .e-btn.ff-mini-btn,
    .ff-unified-page .e-btn.ff-delete-btn,
    .ff-unified-page .e-btn.ff-grid-delete-btn {
        cursor: pointer;
        transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
    }

        .ff-unified-page .e-btn.ff-btn:hover,
        .ff-unified-page .e-btn.ff-mini-btn:hover,
        .ff-unified-page .e-btn.ff-delete-btn:hover,
        .ff-unified-page .e-btn.ff-grid-delete-btn:hover {
            transform: translateY(-.04rem);
        }

    .ff-unified-page .e-btn.ff-btn-light,
    .ff-unified-page .e-btn.ff-mini-btn {
        border: .0625rem solid var(--ff-line);
        background: var(--ff-surface);
        color: #1f2937;
    }

        .ff-unified-page .e-btn.ff-btn-light:hover,
        .ff-unified-page .e-btn.ff-mini-btn:hover {
            background: var(--ff-soft);
            border-color: #cbd5e1;
        }

    .ff-unified-page .e-btn.ff-btn-primary {
        border: 0;
        background: var(--ff-primary);
        color: #ffffff;
    }

        .ff-unified-page .e-btn.ff-btn-primary:hover {
            background: var(--ff-primary-dark);
            box-shadow: 0 .55rem 1rem rgba(37, 99, 235, .16);
        }

    .ff-unified-page .e-btn.ff-chip,
    .ff-unified-page .e-btn.ff-chip-type,
    .ff-unified-page .e-btn.ff-lines-count {
        border: .0625rem solid var(--ff-accent-line);
        background: var(--ff-accent-soft);
        color: var(--ff-accent);
    }

    .ff-unified-page .e-btn.ff-status {
        border: .0625rem solid var(--ff-line);
        background: var(--ff-soft);
        color: #334155;
    }

    .ff-unified-page .e-btn .e-btn-icon {
        font-size: var(--ff-font-small);
        line-height: 1;
    }

    .ff-unified-page .e-btn.ff-summary-chip,
    .ff-unified-page .e-btn.ff-total-chip,
    .ff-unified-page .e-btn.ff-flow-chip {
        inline-size: 100%;
        justify-content: space-between;
        gap: .42rem;
        border: .0625rem solid var(--ff-line-soft);
        background: var(--ff-soft);
        color: #0f172a;
        overflow: hidden;
    }

    .ff-unified-page .e-btn.ff-summary-chip {
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) !important;
        align-items: center !important;
        justify-content: normal !important;
        column-gap: clamp(.42rem, .7dvi, .9rem) !important;
        min-block-size: var(--ff-control-small);
        padding-inline: clamp(.5rem, .8dvi, .9rem) !important;
        border-color: var(--ff-accent-line);
        background: color-mix(in srgb, var(--ff-accent-soft) 42%, #ffffff);
        text-align: initial !important;
    }

        .ff-unified-page .e-btn.ff-summary-chip .e-btn-content {
            display: contents !important;
        }

    .ff-unified-page .e-btn.ff-summary-client,
    .ff-unified-page .e-btn.ff-summary-total,
    .ff-unified-page .e-btn.ff-total-highlight {
        border-color: var(--ff-accent-line);
        background: var(--ff-accent-soft);
    }

        .ff-unified-page .e-btn.ff-summary-total strong,
        .ff-unified-page .e-btn.ff-summary-total .ff-summary-value,
        .ff-unified-page .e-btn.ff-total-highlight strong {
            color: var(--ff-accent);
        }

    .ff-unified-page .e-btn.ff-summary-chip .ff-summary-label,
    .ff-unified-page .e-btn.ff-summary-chip span:not(.e-btn-icon),
    .ff-unified-page .e-btn.ff-total-chip span,
    .ff-unified-page .e-btn.ff-flow-chip span {
        grid-column: 1;
        justify-self: start;
        min-inline-size: max-content;
        color: #64748b;
        font-size: var(--ff-font-mini);
        font-weight: 950;
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ff-unified-page .e-btn.ff-summary-chip .ff-summary-value,
    .ff-unified-page .e-btn.ff-summary-chip strong,
    .ff-unified-page .e-btn.ff-total-chip strong,
    .ff-unified-page .e-btn.ff-flow-chip strong {
        grid-column: 2;
        justify-self: end;
        min-inline-size: 0;
        max-inline-size: 100%;
        color: #0f172a;
        font-size: var(--ff-font-small);
        font-weight: 950;
        line-height: 1;
        text-align: end;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ff-unified-page .e-btn.ff-flow-title {
        justify-content: center;
        color: var(--ff-purple);
        background: var(--ff-purple-soft);
        border-color: #ddd6fe;
    }

    .ff-unified-page .e-btn.ff-grid-total-chip {
        inline-size: 100%;
        min-block-size: var(--ff-control-small);
        justify-content: flex-end;
        border: .0625rem solid var(--ff-accent-line);
        background: var(--ff-accent-soft);
        color: var(--ff-accent);
    }

    .ff-unified-page .e-btn.ff-delete-btn,
    .ff-unified-page .e-btn.ff-grid-delete-btn {
        min-block-size: var(--ff-control-small);
        min-inline-size: var(--ff-control-small);
        padding-inline: .42rem;
        border: .0625rem solid #fecaca;
        background: #fff7f7;
        color: #b91c1c;
    }

        .ff-unified-page .e-btn.ff-delete-btn:hover,
        .ff-unified-page .e-btn.ff-grid-delete-btn:hover {
            background: #fee2e2;
        }

    .ff-unified-page .e-input-group,
    .ff-unified-page .e-control-wrapper.e-input-group,
    .ff-unified-page .e-control-wrapper.e-ddl,
    .ff-unified-page .e-date-wrapper,
    .ff-unified-page .e-numeric,
    .ff-unified-page .e-control-wrapper.e-multiline {
        inline-size: 100%;
        min-block-size: var(--ff-control);
        border: .0625rem solid var(--ff-line);
        border-radius: var(--ff-radius-sm);
        background: #ffffff;
        box-shadow: none;
        overflow: hidden;
    }

.ff-unified-page .ff-head-compact-grid .e-input-group,
.ff-unified-page .ff-head-compact-grid .e-control-wrapper.e-input-group,
.ff-unified-page .ff-head-compact-grid .e-control-wrapper.e-ddl,
.ff-unified-page .ff-head-compact-grid .e-date-wrapper,
.ff-unified-page .ff-head-compact-grid .e-numeric {
    background: color-mix(in srgb, #ffffff 92%, var(--ff-soft));
}

.ff-unified-page .e-input-group:hover,
.ff-unified-page .e-control-wrapper.e-input-group:hover,
.ff-unified-page .e-control-wrapper.e-ddl:hover,
.ff-unified-page .e-date-wrapper:hover,
.ff-unified-page .e-numeric:hover {
    border-color: #cbd5e1;
}

.ff-unified-page .e-input-group.e-input-focus,
.ff-unified-page .e-control-wrapper.e-input-focus,
.ff-unified-page .e-control-wrapper.e-ddl.e-input-focus,
.ff-unified-page .e-date-wrapper.e-input-focus,
.ff-unified-page .e-numeric.e-input-focus {
    border-color: var(--ff-accent-line);
    box-shadow: 0 0 0 .14rem color-mix(in srgb, var(--ff-accent-soft) 78%, transparent);
}

.ff-unified-page .ff-field-strong .e-input-group,
.ff-unified-page .ff-field-strong .e-control-wrapper {
    background: color-mix(in srgb, var(--ff-accent-soft) 32%, #ffffff);
}

.ff-unified-page .e-input-group input.e-input,
.ff-unified-page .e-input-group textarea.e-input,
.ff-unified-page .e-control-wrapper input.e-input,
.ff-unified-page .e-control-wrapper textarea.e-input,
.ff-unified-page .e-ddl .e-input,
.ff-unified-page .e-date-wrapper input,
.ff-unified-page .e-numeric input {
    min-block-size: calc(var(--ff-control) - .125rem);
    block-size: calc(var(--ff-control) - .125rem);
    padding-block: 0;
    padding-inline: .55rem;
    color: #0f172a;
    font-size: var(--ff-font-small);
    font-weight: 720;
    line-height: 1.1;
}

.ff-unified-page .e-control-wrapper.e-multiline,
.ff-unified-page .e-input-group.e-multiline {
    min-block-size: clamp(3rem, 5.2dvb, 4.4rem);
}

    .ff-unified-page .e-control-wrapper.e-multiline textarea.e-input,
    .ff-unified-page .e-input-group.e-multiline textarea.e-input {
        min-block-size: clamp(2.85rem, 5dvb, 4.2rem);
        block-size: clamp(2.85rem, 5dvb, 4.2rem);
        padding-block: .5rem;
        resize: none;
        line-height: 1.25;
    }

.ff-unified-page .ff-textarea-compact.e-control-wrapper.e-multiline,
.ff-unified-page .ff-textarea-compact.e-input-group.e-multiline,
.ff-unified-page .ff-textarea-compact textarea.e-input {
    min-block-size: clamp(2.35rem, 4dvb, 3.35rem);
    block-size: clamp(2.35rem, 4dvb, 3.35rem);
}

.ff-unified-page .e-ddl-icon,
.ff-unified-page .e-date-icon,
.ff-unified-page .e-input-group-icon {
    min-inline-size: var(--ff-control-small);
    color: #64748b;
}

.ff-unified-page .e-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--ff-control-small);
    gap: .3rem;
}

    .ff-unified-page .e-checkbox-wrapper .e-frame {
        inline-size: .9rem;
        block-size: .9rem;
        border: .0625rem solid #cbd5e1;
        border-radius: .22rem;
    }

    .ff-unified-page .e-checkbox-wrapper .e-label {
        color: #334155;
        font-size: var(--ff-font-small);
        font-weight: 780;
        line-height: 1;
    }

.ff-unified-page .ff-check-euro .e-checkbox-wrapper,
.ff-unified-page .ff-check-euro.e-checkbox-wrapper {
    padding-inline: .42rem;
    border: .0625rem solid var(--ff-accent-line);
    border-radius: 999rem;
    background: var(--ff-accent-soft);
}

.ff-unified-page .e-grid.ff-grid {
    inline-size: 100%;
    block-size: 100%;
    min-inline-size: 58rem;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.ff-unified-page .ff-grid .e-gridheader,
.ff-unified-page .ff-grid .e-headercontent {
    border-color: var(--ff-line-soft);
    background: var(--ff-soft);
}

.ff-unified-page .ff-grid .e-headercell {
    background: var(--ff-soft);
    border-color: var(--ff-line-soft);
    color: #334155;
    font-size: var(--ff-font-mini);
    font-weight: 950;
    padding-block: .34rem;
}

.ff-unified-page .ff-grid .e-headertext {
    font-size: var(--ff-font-mini);
    font-weight: 950;
}

.ff-unified-page .ff-grid .e-rowcell {
    border-color: var(--ff-line-soft);
    color: #0f172a;
    font-size: var(--ff-font-small);
    padding-block: .26rem;
    padding-inline: .34rem;
    vertical-align: middle;
}

.ff-unified-page .ff-grid .e-row:hover .e-rowcell {
    background: color-mix(in srgb, var(--ff-accent-soft) 34%, #ffffff);
}

.ff-unified-page .ff-grid .e-altrow .e-rowcell,
.ff-unified-page .ff-grid .e-rowcell {
    background: var(--ff-table-tint);
}

.ff-unified-page .ff-grid .e-content {
    overflow: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.ff-unified-page .ff-grid .e-input-group,
.ff-unified-page .ff-grid .e-control-wrapper.e-input-group,
.ff-unified-page .ff-grid .e-control-wrapper.e-ddl,
.ff-unified-page .ff-grid .e-numeric {
    min-block-size: var(--ff-control-small);
    border-radius: .42rem;
}

    .ff-unified-page .ff-grid .e-input-group input.e-input,
    .ff-unified-page .ff-grid .e-control-wrapper input.e-input,
    .ff-unified-page .ff-grid .e-numeric input {
        min-block-size: calc(var(--ff-control-small) - .125rem);
        block-size: calc(var(--ff-control-small) - .125rem);
        padding-inline: .42rem;
    }

.ff-unified-page .ff-grid-check .e-label {
    font-size: var(--ff-font-mini);
}

.ff-unified-page .ff-header-type-picker .e-control-wrapper,
.ff-unified-page .ff-header-type-picker .e-input-group,
.ff-unified-page .ff-header-type-picker .e-input-group.e-control-wrapper,
.ff-unified-page .ff-header-type-picker .e-ddl.e-input-group {
    inline-size: 100%;
    min-inline-size: 0;
    block-size: calc(var(--ff-control) - .28rem);
    min-block-size: calc(var(--ff-control) - .28rem);
    border: 0 !important;
    border-radius: 999rem;
    background: transparent !important;
    box-shadow: none !important;
}

.ff-unified-page .ff-header-type-picker .e-input,
.ff-unified-page .ff-header-type-picker input.e-input {
    min-inline-size: 0;
    block-size: 100%;
    padding-inline: 0 !important;
    color: var(--ff-accent) !important;
    font-size: var(--ff-font-small) !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-align: start;
}

.ff-unified-page .ff-header-type-picker .e-ddl-icon,
.ff-unified-page .ff-header-type-picker .e-clear-icon {
    color: var(--ff-accent) !important;
}

.ff-unified-page .ff-header-type-picker .e-input-group-icon,
.ff-unified-page .ff-header-type-picker .e-ddl-icon {
    min-inline-size: 1.1rem;
    inline-size: 1.1rem;
}

@container (max-width: 48rem) {
    .ff-unified-page .e-btn.ff-btn,
    .ff-unified-page .e-btn.ff-mini-btn {
        inline-size: 100%;
    }

    .ff-unified-page .e-btn.ff-summary-chip,
    .ff-unified-page .e-btn.ff-total-chip,
    .ff-unified-page .e-btn.ff-flow-chip {
        justify-content: space-between;
    }
}

.ff-unified-page .e-btn.ff-btn,
.ff-unified-page .e-btn.ff-mini-btn,
.ff-unified-page .e-btn.ff-status,
.ff-unified-page .e-btn.ff-lines-count,
.ff-unified-page .e-btn.ff-tab-button,
.ff-unified-page .e-btn.ff-total-chip,
.ff-unified-page .e-btn.ff-flow-chip,
.ff-unified-page .e-btn.ff-grid-total-chip,
.ff-unified-page .e-btn.ff-grid-delete-btn,
.ff-unified-page .e-btn.ff-icon-btn {
    min-inline-size: 0;
    max-inline-size: 100%;
    min-block-size: var(--ff-control);
    border-radius: 999rem;
    padding-block: 0;
    padding-inline: .62rem;
    font-size: var(--ff-font-small);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}

.ff-unified-page .e-btn.ff-btn-light,
.ff-unified-page .e-btn.ff-mini-btn,
.ff-unified-page .e-btn.ff-lines-count,
.ff-unified-page .e-btn.ff-tab-button {
    border-color: var(--ff-line) !important;
    background: #ffffff !important;
    color: var(--ff-heading) !important;
}

.ff-unified-page .e-btn.ff-btn-primary,
.ff-unified-page .e-btn.ff-icon-btn-primary {
    border-color: var(--ff-primary) !important;
    background: var(--ff-primary) !important;
    color: #ffffff !important;
}

.ff-unified-page .e-btn.ff-tab-button {
    inline-size: 100%;
    justify-content: center;
    border-radius: var(--ff-radius-sm);
    background: color-mix(in srgb, var(--ff-soft) 76%, #ffffff) !important;
}

.ff-unified-page .e-btn.ff-tab-active {
    border-color: var(--ff-accent) !important;
    background: var(--ff-accent-soft) !important;
    color: var(--ff-accent) !important;
    box-shadow: inset 0 -.12rem 0 var(--ff-accent);
}

.ff-unified-page .e-btn.ff-status {
    cursor: default !important;
}

.ff-unified-page .e-btn.ff-status-green {
    border-color: #bbf7d0 !important;
    background: var(--ff-success-soft) !important;
    color: #166534 !important;
}

.ff-unified-page .e-btn.ff-status-blue {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.ff-unified-page .e-btn.ff-status-orange {
    border-color: #fde68a !important;
    background: var(--ff-warning-soft) !important;
    color: #92400e !important;
}

.ff-unified-page .e-btn.ff-status-red {
    border-color: #fecaca !important;
    background: var(--ff-danger-soft) !important;
    color: #991b1b !important;
}

.ff-unified-page .e-btn.ff-lines-count {
    color: var(--ff-accent) !important;
    cursor: default !important;
}

.ff-unified-page .e-btn.ff-total-chip,
.ff-unified-page .e-btn.ff-flow-chip {
    inline-size: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .45rem;
    cursor: default !important;
    border-color: var(--ff-accent-line) !important;
    background: color-mix(in srgb, var(--ff-accent-soft) 38%, #ffffff) !important;
    color: var(--ff-heading) !important;
}

.ff-unified-page .ff-chip-label {
    min-inline-size: 0;
    color: var(--ff-muted);
    font-size: var(--ff-font-mini);
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ff-unified-page .ff-chip-value {
    min-inline-size: 0;
    color: var(--ff-heading);
    font-size: var(--ff-font-small);
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ff-unified-page .e-btn.ff-total-highlight {
    border-color: var(--ff-primary) !important;
    background: var(--ff-primary) !important;
}

    .ff-unified-page .e-btn.ff-total-highlight .ff-chip-label,
    .ff-unified-page .e-btn.ff-total-highlight .ff-chip-value {
        color: #ffffff;
    }

.ff-unified-page .e-btn.ff-grid-total-chip {
    inline-size: 100%;
    min-block-size: var(--ff-control-small);
    border-color: var(--ff-accent-line) !important;
    background: var(--ff-accent-soft) !important;
    color: var(--ff-primary-dark) !important;
    cursor: default !important;
}

.ff-unified-page .e-btn.ff-grid-delete-btn,
.ff-unified-page .e-btn.ff-icon-btn {
    inline-size: var(--ff-control);
    min-inline-size: var(--ff-control);
    padding-inline: 0;
    justify-content: center;
}

.ff-unified-page .e-btn.ff-grid-delete-btn {
    border-color: #fecaca !important;
    background: var(--ff-danger-soft) !important;
    color: var(--ff-danger) !important;
}

.ff-unified-page .e-control-wrapper,
.ff-unified-page .e-input-group,
.ff-unified-page .e-ddl,
.ff-unified-page .e-datepicker,
.ff-unified-page .e-numerictextbox,
.ff-unified-page .ff-control.e-control-wrapper,
.ff-unified-page .ff-control .e-control-wrapper,
.ff-unified-page .ff-grid-control.e-control-wrapper,
.ff-unified-page .ff-grid-control .e-control-wrapper {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    min-block-size: var(--ff-control);
    border-color: #cfd9e8;
    border-radius: var(--ff-radius-sm);
    background: #ffffff;
    box-shadow: none;
}

.ff-unified-page .ff-grid-control.e-control-wrapper,
.ff-unified-page .ff-grid-control .e-control-wrapper {
    min-block-size: var(--ff-control-small);
}

.ff-unified-page .e-input,
.ff-unified-page input.e-input,
.ff-unified-page textarea.e-input {
    min-block-size: var(--ff-control);
    color: var(--ff-text);
    font-size: var(--ff-font-small);
    font-weight: 650;
}

.ff-unified-page .ff-grid-control .e-input,
.ff-unified-page .ff-grid-control.e-control-wrapper input.e-input {
    min-block-size: var(--ff-control-small);
    font-size: var(--ff-font-mini);
}

.ff-unified-page .e-input-group.e-disabled,
.ff-unified-page .e-control-wrapper.e-disabled,
.ff-unified-page .ff-readonly.e-control-wrapper {
    background: var(--ff-soft);
    opacity: 1;
}

.ff-unified-page .ff-textarea textarea,
.ff-unified-page .ff-textarea.e-control-wrapper textarea,
.ff-unified-page .ff-textarea .e-control-wrapper textarea {
    min-block-size: clamp(2.6rem, 8dvb, 5.2rem);
    resize: none;
    line-height: 1.32;
}

.ff-unified-page .ff-notes-compact textarea,
.ff-unified-page .ff-notes-compact.e-control-wrapper textarea,
.ff-unified-page .ff-notes-compact .e-control-wrapper textarea {
    min-block-size: clamp(2.4rem, 5dvb, 4rem);
}

.ff-unified-page .ff-service-textarea textarea,
.ff-unified-page .ff-service-textarea.e-control-wrapper textarea,
.ff-unified-page .ff-service-textarea .e-control-wrapper textarea {
    min-block-size: clamp(9rem, 26dvb, 16rem);
}

.ff-unified-page .e-checkbox-wrapper,
.ff-unified-page .e-checkbox-wrapper .e-label {
    color: var(--ff-heading);
    font-size: var(--ff-font-small);
    font-weight: 800;
}

    .ff-unified-page .e-checkbox-wrapper .e-frame.e-check,
    .ff-unified-page .e-checkbox-wrapper .e-frame.e-stop {
        background-color: var(--ff-primary);
        border-color: var(--ff-primary);
    }

.ff-unified-page .e-grid.ff-grid {
    inline-size: 100%;
    min-inline-size: max(100%, 76rem);
    border: 0;
    border-radius: var(--ff-radius-sm);
    background: #fffafb;
    box-shadow: none;
}

.ff-unified-page .e-grid.ff-vencimientos-grid {
    min-inline-size: 100%;
}

.ff-unified-page .e-grid .e-gridheader,
.ff-unified-page .e-grid .e-headercontent,
.ff-unified-page .e-grid .e-gridcontent {
    border-color: var(--ff-line-soft);
}

.ff-unified-page .e-grid .e-headercell {
    background: var(--ff-soft);
    color: #334155;
    border-color: var(--ff-line-soft);
    font-size: var(--ff-font-mini);
    font-weight: 950;
    padding-block: .3rem;
    padding-inline: .42rem;
}

.ff-unified-page .e-grid .e-headertext {
    font-size: var(--ff-font-mini);
    font-weight: 950;
}

.ff-unified-page .e-grid .e-rowcell {
    color: var(--ff-text);
    border-color: var(--ff-line-soft);
    background: #fffafb;
    font-size: var(--ff-font-mini);
    padding-block: .22rem;
    padding-inline: .36rem;
    vertical-align: middle;
}

.ff-unified-page .e-grid .e-row:hover .e-rowcell {
    background: color-mix(in srgb, var(--ff-accent-soft) 28%, #ffffff);
}

.ff-unified-page .e-grid .e-altrow .e-rowcell {
    background: #fffefe;
}

.ff-unified-page .e-grid .e-content {
    overflow: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .ff-unified-page .e-grid .e-content::-webkit-scrollbar,
    .ff-unified-page .ff-grid-wrapper::-webkit-scrollbar {
        inline-size: .36rem;
        block-size: .36rem;
    }

    .ff-unified-page .e-grid .e-content::-webkit-scrollbar-track,
    .ff-unified-page .ff-grid-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }

    .ff-unified-page .e-grid .e-content::-webkit-scrollbar-thumb,
    .ff-unified-page .ff-grid-wrapper::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999rem;
    }

.ff-unified-page .ff-currency-ddl.e-control-wrapper,
.ff-unified-page .ff-currency-ddl .e-control-wrapper {
    inline-size: clamp(3.9rem, 4.8dvi, 5.2rem);
    max-inline-size: clamp(3.9rem, 4.8dvi, 5.2rem);
    min-inline-size: clamp(3.9rem, 4.8dvi, 5.2rem);
}

    .ff-unified-page .ff-currency-ddl .e-input,
    .ff-unified-page .ff-currency-ddl.e-control-wrapper input.e-input {
        font-size: var(--ff-font-mini);
        font-weight: 850;
        text-align: start;
    }

.ff-unified-page .e-btn.ff-icon-btn {
    inline-size: var(--ff-control-small);
    min-inline-size: var(--ff-control-small);
    block-size: var(--ff-control-small);
    min-block-size: var(--ff-control-small);
}

/* ==========================================================
   FACTURA FORMULARIO - BOTON COMPRIMIR GENERAL
   Pegar en app.css
   ========================================================== */

.ff-unified-page .ff-title-with-collapse {
    display: inline-flex;
    align-items: center;
    gap: .36rem;
    min-inline-size: 0;
    margin: 0;
}

.ff-unified-page .ff-title-main {
    display: inline-flex;
    align-items: center;
    min-inline-size: 0;
    line-height: 1;
}

.ff-unified-page .e-btn.ff-collapse-toggle {
    inline-size: 1.45rem !important;
    min-inline-size: 1.45rem !important;
    block-size: 1.45rem !important;
    min-block-size: 1.45rem !important;
    padding: 0 !important;
    border-radius: 999rem !important;
    border: .0625rem solid var(--ff-accent-line) !important;
    background: color-mix(in srgb, var(--ff-accent-soft) 74%, #ffffff) !important;
    color: var(--ff-accent) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}

    .ff-unified-page .e-btn.ff-collapse-toggle:hover {
        background: var(--ff-accent-soft) !important;
        border-color: var(--ff-accent) !important;
        transform: translateY(-.04rem);
        box-shadow: 0 .28rem .7rem rgba(15, 23, 42, .08) !important;
    }

    .ff-unified-page .e-btn.ff-collapse-toggle:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--ff-accent) 20%, transparent) !important;
    }

    .ff-unified-page .e-btn.ff-collapse-toggle .ff-material-icon,
    .ff-unified-page .e-btn.ff-collapse-toggle .material-symbols-outlined {
        margin: 0 !important;
        inline-size: 1rem;
        block-size: 1rem;
        font-size: 1.05rem !important;
        line-height: 1 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.ff-unified-page .ff-head-panel-collapsed {
    padding-block: .34rem !important;
}

    .ff-unified-page .ff-head-panel-collapsed .ff-panel-title-row {
        margin-block-end: 0 !important;
        align-items: center !important;
    }

    .ff-unified-page .ff-head-panel-collapsed .ff-collapsed-summary {
        margin-block-start: .16rem !important;
        color: var(--ff-muted);
        font-size: var(--ff-font-mini);
        font-weight: 800;
    }

/* Input código dentro del grid de líneas */
.ff-unified-page .ff-codigo-input {
    inline-size: 100%;
    min-block-size: var(--ff-control-small);
    border: .0625rem solid transparent !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--ff-text);
    font-size: var(--ff-font-mini);
    font-weight: 700;
    padding-inline: .35rem;
}

    /* Al ENFOCAR (navegación teclado-first) la celda de código debe MARCARSE igual de claro que el resto de
       celdas del grid: borde de acento + halo. Sin foco sigue mezclándose con la celda (borde transparente). */
    .ff-unified-page .ff-codigo-input:focus,
    .ff-unified-page .ff-codigo-input:focus-visible {
        border-color: var(--ff-accent, #2563eb) !important;
        outline: none !important;
        box-shadow: 0 0 0 .12rem rgba(37, 99, 235, .25) !important;
        background: #fff !important;
    }

.grp-header.e-btn {
    width: 100%;
    text-align: left;
    box-shadow: none;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #172554;
    background: #f8fafc;
    border: 0;
    border-radius: 10px;
}

    .grp-header.e-btn:hover {
        background: #eef4ff;
        color: #2563eb;
        box-shadow: none;
    }

    .grp-header.e-btn:focus,
    .grp-header.e-btn:active {
        box-shadow: none;
    }

.field-search.e-control-wrapper {
    margin-bottom: 16px;
}

.canvas-toolbar .hist-btn.e-btn {
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    width: 26px;
    min-width: 26px;
    height: 24px;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    color: #333;
    box-shadow: none;
}

    .canvas-toolbar .hist-btn.e-btn:hover:not(.e-disabled) {
        background: #eef4ff;
        border-color: #0d6efd;
        color: #333;
        box-shadow: none;
    }

    .canvas-toolbar .hist-btn.e-btn.e-disabled,
    .canvas-toolbar .hist-btn.e-btn:disabled {
        opacity: 0.4;
        cursor: default;
        box-shadow: none;
    }

.zorder-row {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

    .zorder-row .zorder-btn.e-btn {
        flex: 1;
        min-width: 0;
        height: 26px;
        padding: 0;
        border: 1px solid #ccc;
        border-radius: 3px;
        background: #fff;
        color: #333;
        font-size: 0.95rem;
        line-height: 1;
        box-shadow: none;
    }

        .zorder-row .zorder-btn.e-btn:hover {
            background: #eef4ff;
            border-color: #0d6efd;
            color: #333;
            box-shadow: none;
        }

/* ==============================
   CONTROLES GLOBALES DEL EDITOR
   Pegar en app.css
   ============================== */

.editor-properties .zorder-btn.e-btn,
.editor-properties .align-btn,
.editor-properties .file-btn {
    min-height: 32px;
    border: 1px solid #dbeafe !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #1e40af !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}

.editor-properties .zorder-btn.e-btn {
    width: 100%;
    height: 34px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem !important;
}

.editor-properties .align-btn {
    height: 34px;
    padding: 0 8px;
}

.editor-properties .file-btn {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
}

    .editor-properties .zorder-btn.e-btn:hover,
    .editor-properties .align-btn:hover,
    .editor-properties .file-btn:hover {
        background: #eef4ff !important;
        border-color: #93c5fd !important;
        color: #2563eb !important;
        transform: none;
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12) !important;
    }

    .editor-properties .zorder-btn.e-btn:active,
    .editor-properties .align-btn:active,
    .editor-properties .file-btn:active {
        transform: translateY(0);
        box-shadow: none !important;
    }

    .editor-properties .zorder-btn.e-btn:focus,
    .editor-properties .align-btn:focus,
    .editor-properties .file-btn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.16) !important;
    }

    .editor-properties .file-btn input[type="file"] {
        display: none;
    }

/* NumericTextBox de Syncfusion */
.editor-properties .prop-number.e-control-wrapper,
.editor-properties .prop-number.e-numeric.e-control-wrapper,
.editor-properties .prop-input-unit .e-control-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 9px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    overflow: hidden;
}

    .editor-properties .prop-number.e-control-wrapper .e-input,
    .editor-properties .prop-input-unit .e-control-wrapper .e-input {
        height: 30px !important;
        padding: 0 8px !important;
        color: #0f172a !important;
        font-size: 0.78rem !important;
        background: transparent !important;
    }

    .editor-properties .prop-number.e-control-wrapper.e-input-focus,
    .editor-properties .prop-input-unit .e-control-wrapper.e-input-focus {
        border-color: #2f6df6 !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.12) !important;
    }

/* ColorPicker de Syncfusion */
.editor-properties .prop-color-picker,
.editor-properties .prop-color-picker.e-colorpicker-wrapper,
.editor-properties .prop-row .e-colorpicker-wrapper {
    width: 46px !important;
    min-width: 46px !important;
    height: 30px !important;
    flex: 0 0 46px !important;
}

    .editor-properties .prop-row .e-colorpicker-wrapper:hover .e-split-btn {
        border-color: #93c5fd !important;
    }

/* CheckBox de Syncfusion */
.editor-properties .e-checkbox-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
}

    .editor-properties .e-checkbox-wrapper .e-frame {
        width: 16px !important;
        height: 16px !important;
        border-radius: 5px !important;
        border-color: #cbd5e1 !important;
    }

    .editor-properties .e-checkbox-wrapper:hover .e-frame {
        border-color: #60a5fa !important;
    }

    .editor-properties .e-checkbox-wrapper .e-label {
        color: #334155 !important;
        font-size: 0.76rem !important;
        font-weight: 750 !important;
    }

/* Toolbar del canvas: botones Syncfusion */
.canvas-toolbar .hist-btn.e-btn {
    width: 30px !important;
    height: 28px !important;
    padding: 0 !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color: #334155 !important;
    box-shadow: none !important;
}

    .canvas-toolbar .hist-btn.e-btn:hover:not(:disabled) {
        background: #eef4ff !important;
        border-color: #93c5fd !important;
        color: #2563eb !important;
    }

    .canvas-toolbar .hist-btn.e-btn:disabled {
        opacity: .42 !important;
        cursor: not-allowed !important;
    }

/* ==============================
   FIX SYNCFUSION NUMERIC / COLOR
   Pegar en app.css
   ============================== */

.editor-properties .prop-input-unit .e-control-wrapper,
.editor-properties .prop-number.e-control-wrapper,
.editor-properties .prop-number.e-numeric.e-control-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    border: 1px solid #d7e0ec !important;
    border-radius: 9px !important;
    background: #f8fafc !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    overflow: hidden !important;
}

    .editor-properties .prop-input-unit .e-control-wrapper .e-input,
    .editor-properties .prop-number.e-control-wrapper .e-input,
    .editor-properties .prop-number.e-numeric.e-control-wrapper .e-input {
        height: 30px !important;
        padding: 0 9px !important;
        color: #0f172a !important;
        background: transparent !important;
        font-size: 0.78rem !important;
        font-weight: 650 !important;
        text-align: right !important;
    }

    .editor-properties .prop-input-unit .e-control-wrapper.e-input-focus,
    .editor-properties .prop-number.e-control-wrapper.e-input-focus,
    .editor-properties .prop-number.e-numeric.e-control-wrapper.e-input-focus {
        border-color: #3b82f6 !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.13) !important;
    }

/* Oculta/limpia botones internos raros del NumericTextBox si aparecen */
.editor-properties .e-numeric .e-input-group-icon,
.editor-properties .e-control-wrapper .e-input-group-icon {
    border-color: #e2e8f0 !important;
    color: #64748b !important;
}

/* Color picker alineado como campo normal */
.editor-properties .prop-color-picker,
.editor-properties .prop-color-picker.e-colorpicker-wrapper,
.editor-properties .prop-row .e-colorpicker-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
}

    .editor-properties .prop-row .e-split-colorpicker,
    .editor-properties .prop-row .e-colorpicker-wrapper .e-split-btn-wrapper {
        width: 100% !important;
        min-width: 0 !important;
    }

        .editor-properties .prop-row .e-split-colorpicker .e-split-btn,
        .editor-properties .prop-row .e-colorpicker-wrapper .e-split-btn {
            width: 100% !important;
            height: 30px !important;
            border: 1px solid #d7e0ec !important;
            border-radius: 9px !important;
            background: #f8fafc !important;
            box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03) !important;
        }

        .editor-properties .prop-row .e-colorpicker-wrapper:hover .e-split-btn,
        .editor-properties .prop-row .e-split-colorpicker:hover .e-split-btn {
            border-color: #93c5fd !important;
            background: #ffffff !important;
        }

/* ==========================================================
   BOTONES GLOBALES - Cobros / Pagos
   Pegar en app.css
   ========================================================== */

.e-btn.pg-primary-btn,
.e-btn.pg-action-btn,
.e-btn.cb-primary-btn,
.e-btn.cb-action-btn {
    min-inline-size: 0;
    max-inline-size: 100%;
    min-block-size: var(--pg-control, var(--cb-control, 2.1rem));
    border-radius: 999rem !important;
    padding-block: 0 !important;
    padding-inline: .8rem !important;
    font-size: var(--pg-font-small, var(--cb-font-small, .8rem)) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

/* Botón principal */
.e-btn.pg-primary-btn,
.e-btn.cb-primary-btn {
    border-color: var(--pg-primary, var(--cb-primary, #2563eb)) !important;
    background: var(--pg-primary, var(--cb-primary, #2563eb)) !important;
    color: #ffffff !important;
}

    .e-btn.pg-primary-btn:hover,
    .e-btn.cb-primary-btn:hover {
        border-color: var(--pg-primary-dark, var(--cb-primary-dark, #1d4ed8)) !important;
        background: var(--pg-primary-dark, var(--cb-primary-dark, #1d4ed8)) !important;
        color: #ffffff !important;
    }

/* Botón secundario */
.e-btn.pg-action-btn,
.e-btn.cb-action-btn {
    border-color: var(--pg-line, var(--cb-line, #d9e3ef)) !important;
    background: #ffffff !important;
    color: var(--pg-heading, var(--cb-heading, #0f172a)) !important;
}

    .e-btn.pg-action-btn:hover,
    .e-btn.cb-action-btn:hover {
        border-color: var(--pg-accent-line, var(--cb-accent-line, #bfdbfe)) !important;
        background: var(--pg-accent-soft, var(--cb-accent-soft, #eff6ff)) !important;
        color: var(--pg-primary, var(--cb-primary, #2563eb)) !important;
    }

    /* Iconos dentro de botones Syncfusion */
    .e-btn.pg-primary-btn .e-btn-icon,
    .e-btn.pg-action-btn .e-btn-icon,
    .e-btn.cb-primary-btn .e-btn-icon,
    .e-btn.cb-action-btn .e-btn-icon {
        font-size: .85rem !important;
        line-height: 1 !important;
    }

/* Botoneras */
.pagos-page .pg-header-actions,
.pagos-page .pg-inline-actions,
.pagos-page .pg-bottom-actions,
.cobros-page .cobros-header-actions,
.cobros-page .cb-inline-actions,
.cobros-page .cb-bottom-actions {
    min-inline-size: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--pg-gap-tight, var(--cb-gap-tight, .45rem));
    flex-wrap: wrap;
}

/* Responsive botoneras */
@container (max-width: 82rem) {
    .pagos-page .pg-header-actions,
    .cobros-page .cobros-header-actions {
        inline-size: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: stretch;
    }

    .pagos-page .pg-bottom-actions,
    .cobros-page .cb-bottom-actions {
        inline-size: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr));
        justify-content: stretch;
    }

        .pagos-page .pg-header-actions .e-btn,
        .pagos-page .pg-bottom-actions .e-btn,
        .cobros-page .cobros-header-actions .e-btn,
        .cobros-page .cb-bottom-actions .e-btn {
            inline-size: 100%;
        }
}

@container (max-width: 44rem) {
    .pagos-page .pg-header-actions,
    .cobros-page .cobros-header-actions {
        grid-template-columns: 1fr;
    }

    .pagos-page .pg-inline-actions,
    .cobros-page .cb-inline-actions {
        inline-size: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: stretch;
    }

        .pagos-page .pg-inline-actions .e-btn,
        .cobros-page .cb-inline-actions .e-btn {
            inline-size: 100%;
        }
}

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400..700,0..1,0');

:root {
    --erp-primary: #2563eb;
    --erp-primary-hover: #1d4ed8;
    --erp-primary-soft: #eff6ff;
    --erp-success: #16a34a;
    --erp-danger: #dc2626;
    --erp-bg: #f8fafc;
    --erp-surface: #ffffff;
    --erp-border: #e2e8f0;
    --erp-text: #0f172a;
    --erp-muted: #64748b;
}

html,
body,
#app {
    height: 100%;
    overflow: hidden;
    background: var(--erp-bg);
    color: var(--erp-text);
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.e-btn.ur-btn,
.ur-btn.e-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 12px;
    border: 1px solid var(--erp-border);
    background: #ffffff;
    color: #334155;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    font-weight: 750;
    font-size: 13px;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

    .e-btn.ur-btn:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
        transform: none;
        color: white;
    }

    .rol-button:hover {
        color: #334155 !important;
    }

    .rol-button:active {
        color: white !important;
        background: white !important;
    }

    .e-btn.ur-btn:active,
    .ur-btn.e-btn:active {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    }

.e-btn.ur-btn-primary,
.ur-btn-primary.e-btn {
    border-color: var(--erp-primary);
    background: var(--erp-primary);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .22);
}

    .e-btn.ur-btn-primary:hover,
    .ur-btn-primary.e-btn:hover {
        border-color: var(--erp-primary-hover);
        background: var(--erp-primary-hover);
        box-shadow: 0 12px 26px rgba(37, 99, 235, .28);
    }

.e-btn.ur-btn-sm,
.ur-btn-sm.e-btn {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 12px;
}

.ur-btn-ico,
.e-btn .ur-btn-ico {
    font-size: 18px;
}

.e-btn.ur-x,
.ur-x.e-btn {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 9px;
    color: var(--erp-danger);
    background: #fff;
    border-color: #fee2e2;
    box-shadow: none;
}

    .e-btn.ur-x:hover,
    .ur-x.e-btn:hover {
        background: #fef2f2;
        border-color: #fecaca;
        transform: none;
    }

    .e-btn.ur-x .material-symbols-rounded,
    .ur-x.e-btn .material-symbols-rounded {
        font-size: 18px;
    }

.e-btn:disabled,
.e-btn.e-disabled,
.e-control.e-disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.e-input-group.ur-control,
.e-control-wrapper.ur-control,
.ur-control.e-input-group,
.ur-control.e-control-wrapper,
.ur-control .e-input-group,
.ur-control .e-control-wrapper {
    min-height: 40px;
    border-radius: 12px !important;
    border-color: var(--erp-border) !important;
    background: #ffffff;
    box-shadow: none !important;
}

    .e-input-group.ur-control.e-input-focus,
    .e-control-wrapper.ur-control.e-input-focus,
    .e-input-group.ur-control:focus-within,
    .e-control-wrapper.ur-control:focus-within {
        border-color: var(--erp-primary) !important;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, .12) !important;
    }

    .ur-control input.e-input,
    .ur-control .e-input,
    .e-input-group.ur-control input,
    .e-control-wrapper.ur-control input {
        min-height: 38px;
        color: var(--erp-text);
        font-size: 13px;
    }

.e-ddl.e-control-wrapper.ur-control,
.e-multiselect.e-control-wrapper.ur-control {
    border-radius: 12px !important;
}

.e-popup,
.e-dialog {
    border-radius: 16px !important;
    border-color: var(--erp-border) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18) !important;
}

/* Los desplegables de Syncfusion (calendario, listas) NO se pintan dentro del control: se cuelgan del
   `body`. Con una guía paso a paso abierta eso los dejaba por debajo de su velo —se veían apagados y no
   recibían el clic—, así que el paso que enseña la fecha de vencimiento invitaba a cambiarla y luego no
   dejaba elegir el día.

   No se puede resolver desde la guía: su hueco se calcula sobre lo que señala, y el desplegable ni
   siquiera existe hasta que se pulsa. Lo que sí es cierto siempre es que un desplegable ABIERTO tiene
   que estar por encima de todo, guía incluida — es lo último que ha pedido el usuario.

   Va aquí y no en el CSS de la guía porque el CSS de un componente Blazor está aislado y no alcanza a
   algo colgado del `body`. Y se condiciona a que la guía esté puesta (`.gu-capa`) para no alterar el
   apilado del resto de la aplicación. 1401 es la tarjeta de la guía; esto va justo encima. */
body:has(.gu-capa) .e-popup.e-popup-open {
    z-index: 1402 !important;
}

    .e-dialog .e-dlg-header-content {
        border-bottom: 1px solid #edf2f7;
    }

    .e-dialog .e-dlg-header {
        color: var(--erp-text);
        font-weight: 800;
    }

.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    font-weight: 750;
    font-size: 13px;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
        border: 3px solid transparent;
        background-clip: content-box;
    }

/* =========================================================
   LIQUIDACIONES IVA - BOTONES SYNCFUSION (solo los de los MODALES)
   Viven aquí, y no en el CSS con scope de la página, porque son SfButton: el scope no alcanza al
   markup que renderiza Syncfusion. Los botones de la barra inferior ya no pasan por aquí: son
   markup propio (.liq-btn), con su estilo en LiquidacionesIvaPage.razor.css.
========================================================= */

.e-btn.liq-action-btn,
.e-btn.liq-primary-btn,
.e-btn.liq-modal-close {
    min-width: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    outline: none !important;
    line-height: 1 !important;
}

    .e-btn.liq-action-btn .e-btn-content,
    .e-btn.liq-primary-btn .e-btn-content,
    .e-btn.liq-modal-close .e-btn-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: auto !important;
        min-width: 0 !important;
        line-height: 1 !important;
    }

/* Botón secundario */
.e-btn.liq-action-btn {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

    .e-btn.liq-action-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        color: #1f2937 !important;
        transform: none !important;
    }

/* Botón primario */
.e-btn.liq-primary-btn {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    border: none !important;
    background: #2563eb !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

    .e-btn.liq-primary-btn:hover {
        background: #1d4ed8 !important;
        color: #ffffff !important;
        transform: none !important;
        box-shadow: 0 10px 18px rgba(37, 99, 235, .16) !important;
    }

/* Botón cerrar modal */
.e-btn.liq-modal-close {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #6b7280 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}

    .e-btn.liq-modal-close:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        color: #111827 !important;
        transform: none !important;
    }

    .e-btn.liq-modal-close .material-symbols-outlined {
        font-size: 20px !important;
        line-height: 1 !important;
    }

/* Estados disabled */
.e-btn.liq-action-btn:disabled,
.e-btn.liq-primary-btn:disabled,
.e-btn.liq-action-btn.e-disabled,
.e-btn.liq-primary-btn.e-disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Responsive de botones
   Solo quedan los de los MODALES. Ni la cabecera ni la barra inferior usan ya estas clases: la
   cabecera es un CommandBar, y los botones de la barra son markup propio de la página (.liq-btn),
   con su estilo y su responsive en LiquidacionesIvaPage.razor.css. */
@media (max-width: 520px) {
    .e-btn.liq-action-btn,
    .e-btn.liq-primary-btn {
        height: 40px !important;
        min-height: 40px !important;
    }
}

/* =========================================================
   DEFINICIÓN IVA - BOTONES SYNCFUSION
   Pegar en app.css
========================================================= */

.e-btn.dei-action-btn,
.e-btn.dei-primary-btn,
.e-btn.dei-tab,
.e-btn.dei-group-tab,
.e-btn.dei-type-card,
.e-btn.dei-modal-close {
    min-width: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    outline: none !important;
    line-height: 1 !important;
}

    .e-btn.dei-action-btn .e-btn-content,
    .e-btn.dei-primary-btn .e-btn-content,
    .e-btn.dei-tab .e-btn-content,
    .e-btn.dei-group-tab .e-btn-content,
    .e-btn.dei-type-card .e-btn-content,
    .e-btn.dei-modal-close .e-btn-content {
        display: contents !important;
    }

/* Botón secundario */

.e-btn.dei-action-btn {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

    .e-btn.dei-action-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        color: #1f2937 !important;
        transform: none !important;
    }

/* Botón primario */

.e-btn.dei-primary-btn {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    border: none !important;
    background: #2563eb !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

    .e-btn.dei-primary-btn:hover {
        background: #1d4ed8 !important;
        color: #ffffff !important;
        transform: none !important;
        box-shadow: 0 10px 18px rgba(37, 99, 235, .16) !important;
    }

/* Tabs principales */

.e-btn.dei-tab {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}

    .e-btn.dei-tab:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        transform: none !important;
    }

    .e-btn.dei-tab.active {
        background: #eff6ff !important;
        border-color: #93c5fd !important;
        color: #1d4ed8 !important;
    }

/* Tabs de grupo */

.e-btn.dei-group-tab {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    border: 1px solid #dbe2ea !important;
    background: #ffffff !important;
    color: #374151 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}

    .e-btn.dei-group-tab:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        transform: none !important;
    }

    .e-btn.dei-group-tab.active {
        background: #eff6ff !important;
        border-color: #93c5fd !important;
        color: #1d4ed8 !important;
    }

/* Cards compactas de tipo IVA */

.e-btn.dei-type-card {
    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    text-align: left !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: inherit !important;
    border-radius: 12px !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

    .e-btn.dei-type-card:hover {
        background: #f8fbff !important;
        border-color: #bfdbfe !important;
        transform: none !important;
    }

    .e-btn.dei-type-card.active {
        border-color: #60a5fa !important;
        background: #eff6ff !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .10) !important;
    }

    .e-btn.dei-type-card .dei-type-top {
        display: contents !important;
    }

        .e-btn.dei-type-card .dei-type-top strong {
            grid-column: 1 !important;
            justify-self: start !important;
            font-size: 18px !important;
            line-height: 1 !important;
            font-weight: 950 !important;
            color: #0f172a !important;
            white-space: nowrap !important;
        }

        .e-btn.dei-type-card .dei-type-top span {
            grid-column: 3 !important;
            grid-row: 1 / span 2 !important;
            justify-self: end !important;
            align-self: center !important;
            max-width: 92px !important;
            padding: 4px 7px !important;
            border-radius: 999px !important;
            background: #eef6ff !important;
            color: #1d4ed8 !important;
            font-size: 11px !important;
            line-height: 1 !important;
            font-weight: 900 !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
        }

    .e-btn.dei-type-card .dei-type-title {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
        color: #1f2937 !important;
        font-weight: 850 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .e-btn.dei-type-card .dei-type-meta {
        grid-column: 2 !important;
        grid-row: 2 !important;
        min-width: 0 !important;
        margin: 2px 0 0 !important;
        font-size: 11px !important;
        line-height: 1 !important;
        color: #64748b !important;
        font-weight: 700 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

/* Cerrar modal */

.e-btn.dei-modal-close {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #6b7280 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}

    .e-btn.dei-modal-close:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        color: #111827 !important;
        transform: none !important;
    }

    .e-btn.dei-modal-close .material-symbols-outlined {
        font-size: 20px !important;
        line-height: 1 !important;
    }

/* Disabled */

.e-btn.dei-action-btn:disabled,
.e-btn.dei-primary-btn:disabled,
.e-btn.dei-action-btn.e-disabled,
.e-btn.dei-primary-btn.e-disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Responsive global botones */

@media (max-width: 768px) {
    .dei-header-actions .e-btn.dei-action-btn,
    .dei-header-actions .e-btn.dei-primary-btn,
    .dei-inline-actions .e-btn.dei-action-btn,
    .dei-inline-actions .e-btn.dei-primary-btn {
        flex: 1 1 auto !important;
        width: auto !important;
    }
}

@media (max-width: 520px) {
    .dei-header-actions .e-btn.dei-action-btn,
    .dei-header-actions .e-btn.dei-primary-btn,
    .dei-inline-actions .e-btn.dei-action-btn,
    .dei-inline-actions .e-btn.dei-primary-btn,
    .dei-modal-actions .e-btn.dei-action-btn,
    .dei-modal-actions .e-btn.dei-primary-btn {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .e-btn.dei-action-btn,
    .e-btn.dei-primary-btn {
        height: 40px !important;
        min-height: 40px !important;
    }

    .e-btn.dei-type-card {
        grid-template-columns: 48px minmax(0, 1fr) auto !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        padding: 7px 9px !important;
        gap: 8px !important;
    }

        .e-btn.dei-type-card .dei-type-top strong {
            font-size: 16px !important;
        }

        .e-btn.dei-type-card .dei-type-top span {
            max-width: 78px !important;
            font-size: 10.5px !important;
        }
}

/* El item "Configuración" del menú es un <button> (abre el modal de preferencias),
   pero debe verse igual que los enlaces del submenú/flyout. */
button.sidebar-sub-link,
button.sidebar-flyout-link {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

/* Desplegables de Preferencias y Apariencia (modal de ajustes).
   Syncfusion monta el popup fuera del componente, así que el CSS aislado
   no lo alcanza: se redondea aquí para que acompañe al control. */
.e-ddl.e-popup.pref-control,
.e-ddl.e-popup.ap-control {
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 32px rgba(15, 23, 42, .10);
    overflow: hidden;
}

    .e-ddl.e-popup.pref-control .e-list-item,
    .e-ddl.e-popup.ap-control .e-list-item {
        font-size: 13px;
        font-weight: 650;
    }

    .e-ddl.e-popup.pref-control .e-list-item.e-active,
    .e-ddl.e-popup.ap-control .e-list-item.e-active {
        color: #2563eb;
        background: #eff6ff;
        font-weight: 750;
    }

/* ═══════════════════════════════════════════════════════════════════════════
   BOTÓN AZUL DEL CRM — un único fondo y un único hover
   ═══════════════════════════════════════════════════════════════════════════
   Referencia: «+ Nueva actividad» del calendario. Antes cada pantalla tenía el
   suyo: fondo #2563eb, degradado o índigo #4f46e5, y hovers distintos (unos
   oscurecían a #1d4ed8, otros levantaban el botón 1-2px, otros cambiaban la
   sombra). Resultado: la misma acción se sentía distinta según dónde estuvieras.

   Va en el CSS GLOBAL a propósito: el CSS con ámbito de Blazor (.razor.css) no
   cruza de un componente a otro, y estos botones viven en una docena de
   componentes distintos. Cada uno conserva su tamaño, su radio y su tipografía
   en su propio fichero; aquí solo se unifican COLOR y HOVER.

   Al aplicarla hay que RETIRAR el `background` y el `:hover` del .razor.css del
   componente: sus selectores llevan el atributo de ámbito y ganan por
   especificidad, así que si se quedan, esto no pinta nada.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-azul-crm {
    background: #3b82f6;
    color: #ffffff;
    border: none;
    transition: background 0.15s, box-shadow 0.15s;
}

    /* `btn-primary` es TAMBIÉN una clase de Bootstrap, y algunos de estos botones la llevan: su
       `:focus` deja un halo de 4px que se queda puesto tras el clic, como si el botón siguiera
       pulsado. Se anula aquí. Va ANTES del :hover a propósito: al empatar manda la última regla,
       y al revés el botón perdería el hover justo después de pulsarlo. */
    .btn-azul-crm:focus,
    .btn-azul-crm:active {
        background: #3b82f6;
        box-shadow: none;
        outline: none;
    }

    .btn-azul-crm:hover:not(:disabled),
    .btn-azul-crm:focus:hover:not(:disabled) {
        background: #2563eb;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
        /* Sin desplazamiento: varios de estos botones lo llevaban y era justo lo que
           hacía que el hover se sintiera distinto en cada pantalla. */
        transform: none;
    }

    /* El foco por teclado sí se ve (con ratón, `:focus-visible` no se activa). */
    .btn-azul-crm:focus-visible {
        outline: 2px solid #93c5fd;
        outline-offset: 2px;
    }

    .btn-azul-crm:disabled {
        background: #e5e7eb;
        color: #9ca3af;
        box-shadow: none;
        cursor: not-allowed;
    }

/* ─── Campo obligatorio ────────────────────────────────────────────────────────────────────────────
   Marca única para TODOS los formularios de la aplicación: <label>Nombre <span class="req">*</span></label>.

   Va aquí y no en el CSS aislado de cada modal porque cada uno tiene su propio prefijo de clases
   (alm-modal-label, art-modal-label, cbm-label…) y la marca de «esto hay que rellenarlo» no debe
   depender de en qué pantalla estés: es la misma señal en toda la aplicación.

   El asterisco es la señal, no el color: quien no distinga el rojo sigue viendo el símbolo, y el
   `title="Obligatorio"` lo dice con palabras a quien navegue con lector de pantalla. */
.req {
    color: #dc2626;
    font-weight: 700;
    cursor: help;
}

/* Campo obligatorio sin rellenar, ya revisado el formulario (al pulsar guardar). Se AÑADE a la clase de
   input propia de cada modal: class="art-modal-input campo-mal".

   Lleva `!important` porque compite con el CSS aislado del componente, que gana en especificidad por su
   atributo de aislamiento (`.art-modal-input[b-xxx]`). Un estado de error tiene que ganar siempre, en
   cualquier pantalla: no es una preferencia estética, es lo que impide que el usuario se quede mirando
   un formulario que no avanza. El rojo se mantiene incluso con el foco dentro, porque mientras el campo
   siga vacío sigue faltando. */
.campo-mal,
.campo-mal:focus {
    border-color: #fca5a5 !important;
    background: #fef6f6 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .10) !important;
}

/* Aviso ÚNICO de la revisión, junto a los botones del pie: «Rellena los campos obligatorios». El detalle
   de qué falta lo dice el rojo de cada campo; repetirlo campo a campo llenaba el formulario de texto y lo
   hacía dar saltos al aparecer y desaparecer. `margin-right: auto` lo empuja al extremo contrario de los
   botones, que van alineados a la derecha. */
.form-aviso {
    margin-right: auto;
    font-size: 12px;
    color: #dc2626;
    line-height: 1.3;
}

/* Pie de modal en pantallas estrechas: los pares de campos se apilan, pero los botones NO. Se quedan en
   su línea y se reparten el ancho mitad y mitad (`flex: 1 1 0` iguala el reparto sea cual sea el largo
   del rótulo).

   Apilarlos alargaba el modal justo donde menos alto hay, y en vertical «Cancelar» quedaba por debajo de
   la acción principal, que es donde el pulgar cae primero. En fila se mantiene el orden de siempre: la
   salida a la izquierda, la acción principal a la derecha.

   Va aquí, colgando de `.modal-actions`, para que sea el MISMO comportamiento en todos los modales que
   la declaran, sin repetir la media query en el CSS aislado de cada uno. */
/* El pie centra verticalmente sus hijos para que el aviso quede a la altura de los botones. */
.modal-actions {
    align-items: center;
}

@media (max-width: 560px) {
    .modal-actions {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center;
    }

        /* El aviso se lleva la primera línea entera y los botones bajan debajo. Al lado no cabría:
           robaría ancho justo a los botones, que es lo que aquí no sobra. La separación entre las dos
           líneas la pone el `gap` del propio pie. */
        .modal-actions .form-aviso {
            flex: 0 0 100%;
            margin-right: 0;
        }

        /* Los dos botones se reparten TODO el ancho, mitad y mitad (`flex: 1 1 0` iguala el reparto sea
           cual sea el largo del rótulo). */
        .modal-actions .btn {
            flex: 1 1 0 !important;
            width: auto !important;
            min-width: 0;
        }
}

/* ── Markdown del asistente ─────────────────────────────────────────────────────────────────────────
   Lo que devuelve MarkdownAsistente (negritas, listas, tablas, código) llega al panel como MarkupString,
   y el CSS con ÁMBITO del componente no lo alcanza: Blazor marca los elementos que escribe el .razor y
   estos no llevan esa marca. Por eso viven aquí, en el CSS global, y no en AsistenteIaPanel.razor.css.

   Todo cuelga de .ia-md, que es el único sitio donde se pinta Markdown del asistente. */

.ia-md {
    display: block;
    white-space: normal; /* la burbuja usa pre-wrap para el texto plano; aquí ya hay párrafos */
}

    .ia-md > :first-child {
        margin-top: 0;
    }

    .ia-md > :last-child {
        margin-bottom: 0;
    }

    .ia-md p {
        margin: 0 0 10px;
    }

    .ia-md ul,
    .ia-md ol {
        margin: 0 0 10px;
        padding-left: 20px;
    }

    .ia-md li {
        margin: 2px 0;
    }

    .ia-md h1,
    .ia-md h2,
    .ia-md h3,
    .ia-md h4 {
        margin: 14px 0 6px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.35;
    }

    .ia-md strong {
        font-weight: 700;
        color: #0f172a;
    }

    .ia-md a {
        color: #2563eb;
        text-decoration: underline;
    }

    /* Un enlace al que se le quitó el destino por no ser http/https: se lee, no se pulsa. */
    .ia-md a:not([href]) {
        color: inherit;
        text-decoration: none;
    }

    .ia-md code {
        padding: 1px 5px;
        border-radius: 5px;
        background: #f1f5f9;
        font-family: Consolas, "Courier New", monospace;
        font-size: .92em;
    }

    .ia-md pre {
        margin: 0 0 10px;
        padding: 10px 12px;
        border-radius: 9px;
        background: #0f172a;
        overflow-x: auto;
    }

        .ia-md pre code {
            padding: 0;
            background: none;
            color: #e2e8f0;
        }

    .ia-md blockquote {
        margin: 0 0 10px;
        padding: 2px 0 2px 11px;
        border-left: 3px solid #e2e8f0;
        color: #64748b;
    }

    /* Las tablas son lo que más se nota: una consulta de datos las devuelve casi siempre, y en texto plano
       son ilegibles. Se desplazan solas si no caben, para no ensanchar el panel. */
    .ia-md table {
        width: 100%;
        margin: 2px 0 10px;
        border-collapse: collapse;
        font-size: 13px;
    }

    .ia-md th {
        padding: 0 10px 6px 0;
        border-bottom: 1px solid #e2e8f0;
        text-align: left;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: #64748b;
        white-space: nowrap;
    }

    .ia-md td {
        padding: 7px 10px 7px 0;
        border-bottom: 1px solid #eef2f7;
        font-variant-numeric: tabular-nums;
        vertical-align: top;
    }

    .ia-md tr:last-child td {
        border-bottom: none;
    }

    .ia-md hr {
        margin: 12px 0;
        border: none;
        border-top: 1px solid #e2e8f0;
    }